عمل مساطر لعناصر الاطار الجانبي بمدونتك

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

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

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

اولا : سوف نعرف كيفية تطبيق المسطره على عنصر واحد فقط من عناصر الاطار الجانبي .

يجب اولا ان تعرف اسم القطعة "اي العنصر" التي تريد ان تطبق عليها المسطره ولذلك اتبع تلك الخطوات :

1.      أذهب إلى "تحرير HTML" لمدونتك عبر المسار التالي ( لوحة التحكم الرئيسية – تخطيط او تصميم – تحرير HTML )

2.      في أسفل القالب سوف تجد مثل هذه الأكواد :

(أضغط على الصور للتكبير)

وكما تلاحظ ان اسماء العناصر التي تضعها موجود بالترتيب مثل (اكتب سؤالك هنا – أقسام المدونة -  أخر التعليقات) ولكن نحن لا نريد تلك الاسماء بل نريد الاسم الذي يتواجد في أول الكود من كل عنصر يعني مثلا إذا اخترنا العنصر الذي اسمه "أقسام المدونة" سوف نجد في اول الكود الذي يتبعه هذا الجزء widget id='Label1' locked='false ومن هذه النقطة نجد ان الاسم الذي يميز هذا العنصر "أقسام المدونة" والذي نريده هو Label1 الموجود بالون الاخضر ، وسوف تلاحظ أيضا أن لكل عنصر من العناصر اسم مختلف عن الأخر وقد تتشابه ولكن تختلف في الارقام مثل هذه الأسماء (HTML12 - HTML6 - HTML4 - Feed2 - Label1 - Feed1 ) ولكن دائما سوف تجد الاسم بعد كلمة widget id=' مباشرتا وهو عنوان الـ id .

3.      نأخذ اسم كود العنصر الذي اخترناه مثل "اقسام المدونة" وهو في هذا المثال Label1 ونضعه في هذا الكود :

/* Sidebar Content */
#ضع هنا اسم القطعة{
height:200px;
overflow:auto;
}

ملاحظة : هذه الكلمة height تستخدم لتحديد الطول المناسب الذي إذا زاد عليه طول العنصر يطبق المسطره علية تلقائيا يمكنك تغييره كما تريد عبر تغيير القيم الموجودة بعده مثلما هنا 200 .

أما بالنسبة لتلك الكلمة overflow:auto تعني تطبيق المسطر فقط في حالة زيادة طول العنصر عن الطول المطلوب الذي تم تحديده .

أو بمعنى أخر ان تلك الكلمة auto تعني (أوتوماتك او تلقائي) اي ان خاصية المسطرة سوف تظهر فقط عند تخطي طول العنصر القيمة المحددة له ، أما إذا أردنا ان تظهر المسطره دائما نغير كلمة auto بكلمة scroll وفي هذه الحالة سوف تظهر المسطره في كل الحالات ولكنها سوف تكون غير فعالة "اي لا تعمل" عند عدم تخطي الطول المحدد وتفعل عند تجاوز العنصر هذا الطول مثل بتلك الصورة :

4.      ثم خذ الكود بعد وضع به اسم العنصر "أقسام المدونة : Label1 " ليصبح مثل هذا الكود :

/* Sidebar Content */
#Label1{
height:200px;
overflow:auto;
}

ثم ضع هذا الكود في اي مكان في القالب بشرط بعد تلك العلامة } وهي عبارة عن قوس وجهه إلى اليسار ، يعني ابحث على تلك العلامة } "في اي مكان في القالب" التي سوف تجده في سطر منفرد وضع تحتها الكود مثل بتلك الصورة :

ثم اضغط معاينة قبل الحفظ وسوف تجد المسطره مثل التي بتلك الصورة :

ثانيا : لتطبيق هذه السطره على جميع عناصر الاطار الجانبي للمدونة

1.      اذهب ايضا إلى قالب المدونة "تحرير HTML"

2.      أبحث عن منطقة sidebar بالضغط على Ctrl+f في لوحة المفاتيح لديك ثم ابحث عن sidebar .widget }  وسوف تجدها مثل بتلك الصورة :

3.      ضع بها هذا الكود في أسفل الكود sidebar .widget :

height:250px;
width:200px;
overflow:auto;

ليصبح مثل هذه الكود بالصورة :

ملاحظة : لقد ذكرنا في المثال السابق معاني تلك الكلمات (overflow:auto – height) , أما الكلمة الجديدة التي نجدها في هذا الكود وهي width تعني : إذا زاد عرض العناصر عن القيمة المحدده "200" سوف يتم تطبيق المسطرة تلقائيا ولكن هذه المرة بعرض العنصر ، ويمكنك تغيير قيمة عرض العنصر بالقيمة التي تناسبك

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

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