شرح مع الصور لكيفية عمل سكرول بار للبيانات

*****

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف الخلق وحبيب الحق وعلى اّله وصحبه وسلم

في بعض الأحيان يكون لديك مجموعة كبيرة من البيانات أو الأكواد، بحيث أنه عند وضعها في أحد المواضيع أو المشاركات في الموقع أو المدونة فإنها تأخذ مساحة كبيرة من الحيز او المساحة المخصصة للموضوع أو المشاركة، بالإضافة الى أن مظهرها لا يكون جيد، كما أنها أحيانا تخرج من الصفحة لزيادة عرضها عن عرض المساحة المخصصة لنشر الموضوع خاصة إذا وضعتها في جدول، وقد تأتيك رسالة من جوجل كونسول بأنه يوجد خطأ ما في موقعك . للأسباب السابقة وغيرها من المفضل عمل سكرول بار لهذه الأكواد أو البيانات سواء في الموقع أو في المدونة .

المحتويات

1- عمل سكرول بار في مواقع الإنترنت .
2- عمل سكرول بار في مدونات بلوجر .

أولا: عمل سكرول بار في مواقع الإنترنت

لا يختلف عمل سكرول بار للبيانات أو الأكواد أو غيرها في مواقع الإنترنت عـن مدونات بلوجر حيث أنه يتم وضـع هذه البيانات أو الأكواد أو .... في كل منهما داخل ديف ( </div>...<div>)، ثم تنسيق هذا الديف لكي تكون هذه البيانات داخل حاوية أو صندوق يحتوي على سكرول بار . ولتوضيح الفكرة سوف نقوم بالاّتي:

1- تجهيز البيانات ووضعها داخل ديف

ويعني تجهيز البيانات اي وضعها في صفوف فوق بعضها ثم نقوم بوضعها داخل ديف كما يأتي:

أ- تجهيز البيانات

: نفترض أننا لدينا مجموعة من البيانات او الجمل وموضوعة بشكل غير جيد بجوار بعضها مثلا ولنفترض أن هذه الجمل هي: اتقي الله حيثما كنت، واتبع السيئة الحسنة تمحها، وخالق الناس بخلق حسن ..... إلخ . وحتى يمكن تجهيز هذه البيانات لعمل سكرول بار لها فإننا نقوم بوضعها في صفوف تحت بعضها البعض كالاّتي:

اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها
وخالق الناس بخلق حسن
------
اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها
وخالق الناس بخلق حسن
------
اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها
وخالق الناس بخلق حسن

ب- وضع الجمل السابقة داخل ديف

: اي نقوم بوضع الجمل السابقة بين وسم البدايه (<div>) ووسم النهاية ،(</div>) وذلك في الموضوع او المشاركة في الجزء الخاص بأكواد html، وذلك حتى يسهل تنسيقها وعمل سكرول بار لها كالاتي:

<div>

 <br /> اتقي الله حيثما كنت

 <br /> واتبع السيئة الحسنة تمحها

 <br /> وخالق الناس بخلق حسن

 <br /> ---------

 <br /> اتقي الله حيثما كنت

 <br /> واتبع السيئة الحسنة تمحها

 <br /> وخالق الناس بخلق حسن

 <br /> ---------

 <br /> اتقي الله حيثما كنت

 <br /> واتبع السيئة الحسنة تمحها 

 <br /> وخالق الناس بخلق حسن

</div>

لاحظ اننا اضفنا الكود <br / > لجعل الجمل السابقة تأتي تحت بعضها، ولا تأتي بجوار بعضها.

2- عمل سكرول بار وتنسيقه

بعد وضع الجمل السابقة داخل الديف يمكن عمل سكرول بار لها ثم تنسيقه، ولعمل سكرول بار ثم تنسيقه فإننا نستخدم لغتي HTML ، CSS ولتنسيق السكرول بار يمكن وضع أكواد CSS المسئولة عن التنسيق دخل الديف، أو في القسم الخاص بالتنسيق داخل الموقع بين وسمي ، أو في الملف الخارجي الخاص بالتنسيق وفي هذا الجزء من الموضوع سنتناول التنسيق داخل الديف ، وفي القسم الخاص بالتنسيق في الموقع كالاّتي:

أ- التنسيق داخل الديف

: وللتنسيق داخل الديف، توضع اكواد التنسيق داخل الديف والتي تشمل نوعين من الاكواد :

- أكواد التنسيق الخاصة بتنسيق الحاوية أو الصندوق: وهي أكواد CSS التى تعطي الشكل المطلوب والمناسب للحاوية، التي تحتوي على البيانات المراد عمل سكرول بار لها، مثل عرض الصندوق، وإرتفاعه، والإطار، والهوامش، وغيرها.

- اكواد التنسيق الخاصة بالمحتوى الداخلي للصندوق: وهي أكواد CSS التي يتم استخدامها في تنسيق محتوى الصندوق، من بيانات أو جمل أو أكواد وغيرها كحجم الخط ولونه، والمسافة الرأسية بين الأسطر، وغيرها .

 

وعند إضافة أكواد التنسيق الى الديف السابق نحصل على الاّتي: 

<div dir="ltr" style="align: center; border-color: black; border-style: dashed; border-width: 1px; height: 300px; margin: 10px; overflow: scroll; padding: 10px; text-align: left; width: 550px;">

<span style="font-size: 20px; ">

اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها
وخالق الناس بخلق حسن
---------
اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها
وخالق الناس بخلق حسن
---------
اتقي الله حيثما كنت
واتبع السيئة الحسنة تمحها 

وخالق الناس بخلق حسن

</span>

</div>

والكود ذو اللون الأخضر هو الكود الخاص بتنسيق الصندوق، أما الكود ذو اللون الأزرق فهو الكود الخاص بتنسيق المحتوى أي البيانات الموجودة بداخل الصندوق .

ملحوظة: يمكن تغيير القيم الملونة باللون الاحمر بما يناسب موقعك .

ب- التنسيق في قسم التنسيق بالموقع

: وحتى يمكن تنسيق السكرول بار في قسم التنسيق بالموقع فإننا نقوم بالاتي:

اولا: نقوم بوضع أي دي (id) للديف المحتوي لبيانات السكرول بار كالاّتي:

نضع البيانات او الجمل او ..... هنا

ثانيا: نضع أكواد التنسيق السابقة الموجودة داخل الديف كما هو مبين أعلاه، في قسم التنسيق بالموقع بين وسمي التنسيق، أي بين وسم البداية . وهذه الطريقة هي المفضلة، خاصة عند الحاجة لعمل أكثر من سكرول بار، حيث أن تنسيق السكرول بار في هذه الحالة سيتم بصورة تلقائية .

ج- التنسيق في ملف التنسيق الخارجي للموقع

: وفي هذه الحالة يتم وضع أكواد التنسيق المبينة أعلاه في ملف التنسيق الخارجي الخاص بالموقع بعد وضع أي دي (id) للسكرول بار بطبيعة الحال .

وسوف تحصل على صندوق سكرول بار كما بالشكل الاّتي:

ثانيا: عمل سكرول بار في مدونات بلوجر

لا يختلف عمل سكرول بار في مدونات بلوجر كثيرا عنه في مواقع الإنترنت الأخرى كما سبق ذكره، ولعمل سكرول بار لمدونة على بلوجر يتبع الاّتي:

1- نفتح لوحة تحكم بلوجر ونختار المشاركات posts كما في الشكل التالي:

ثم نختار المشاركة المطلوب عمل سكرول بار فيها كما في الشكل التالي:

2- نضع الأكواد أو البيانات المراد عمل سكرول بار لها داخل محرر المشاركات، ثم نختار من الشريط العلوي محرر الأكواد وذلك بالضغط على HTML view في أعلى شمال النافذة كالاّتي:

3- نبحث في نافذة محرر الأكواد على الأكواد المقابلة للبيانات التي تم وضعها في نافذة محرر المشاركات، ويمكن الإستعانة بخانة البحث التي تظهر في أسفل النافذة، وكتابة إسم أو عنوان البيانات فيها، ثم ضغط إنتر من الكيبورد، حيث ستظهر الكلمة أو الكلمات المبحوث عنها بلون خلفية مختلف عن باقي الأكواد في محرر الأكواد، ولإظهار خانة البحث نضغط على crl+f من الكيبورد كما بالشكل التالي: 

 

4- نحدد الديف أو التاج الموجود بداخله الأكواد المطلوب عمل سكرول بار لها في محرر الأكواد ثم نقوم بتنسيقه كالاّتي:

# نضع البيانات داخل ديف ثم نقوم بتنسيقها كما هو مبين أعلاه في الجزء الخاص بتنسيق السكرول بار للموقع . أو نقوم بوضع أي دي (id) للديف المحتوي لبيانات السكرول بار كالاّتي:

<div id=”scroll”>

<span>

نضع البيانات

او الجمل

او ..... هنا

</span>

</div>

# نقوم بوضع الأكواد المسئولة عن تنسيق السكرول بار بين وسمي التنسيق في قالب المدونة كالاتي:

<b:skin><![CDATA[ 

#scroll{
dir: ltr;
text-align: left;
line-height: 25px;
border-color: black;
border-style: dashed;
border-width: 1px;
height: 200px;
overflow: scroll;
width: 550px;
padding-left: 10px;
margin-right: 20px;
}
#scroll span{
font-size: 18px;
color: #605885;
}

]]></b:skin>

وهذه الطريقة هي المفضلة إذا كنت ستحتاج عمل سكرول بار في أكثر من مشاركة أو موضوع، لأن ذلك سيؤدي إلى تنسيقه بشكل تلقائي . ويمكن معاينة صندوق السكرول بار بالضغط على هذا الرابط ثم النزول قليلا لأسفل .

______________

ودمتم في رعاية الله

الإنتقال إلى أعلى الصفحة