طريقة إضافة قسمين في السايدبار

كلنا رأينا قوالب تحتوي أكثر من عمود أو قسم في السايدبار adding two columns at blogger sidebar  ولكن احيانا لا يكون القالب يعجبنا ولكن نحتاج لتلك الإضافة في قالب خاص خصوصا انا مفيده لكثير من المدونين في عرض وحدات إعلانية او اضافات صغيرة لا تحتاج عمود كامل ولهذا بإذن الله في هذا الدرس سنستطيع اضافة قسمين للسايدبار وسنضيف أيضا قسم ثالث بعد هاذين القسمين لزيادة التنسيق لكن يجب ان ننوه أن هذه الإضافة في الغالب ستعمل مع جميع القوالب لكن تنسيقها قد لا يتوافق مع جميع القوالب لذا قبل عمل أى تعديل قم باخذ نسخة احتياطية من قالبك لتجنب أى مشكلة

طريقة الإضافة

ادخل الى لوحة تحكم مدونتك ثم قم بالبحث عن آخر اضافة في السايدبار لديك يمكنك البحث عنها بالإسم 

ثم قم بالبحث تحت أكوادها عن هذا الكود </b:section>  ملاحظة ان لم تجده قد تجد أسهم توسيع عناصر بجانب الإضافة اضغط عليها حتى تظهر جميع أكوادها وعندما تجد الكود أضف تحته مباشرة الأكواد التالية 

<b:section class='sidebar' id='cnmu-right-col' preferred='yes'/>
<b:section class='sidebar' id='cnmu-left-col' preferred='yes'/>
<b:section class='sidebar' id='cnmu-center-col' preferred='yes'/>

وهذه صورة للتوضيح

ثم بعد ذلك نبحث عن هذا الوسم sidebar-wrapper

والذي نقصده سيكون موجود في اكواد الستايل فقم بتوسعتها بالضغط على سهم التوسعة

عندما تجده ستجد بعده قوس فتح كهذا { ثم اكواد قليلة ثم قوس إغلاق كهذا }

بعد قوس الإغلاق أضف الأكواد التالية

#cnmu-right-col {
width:49%;
float:right;
word-wrap:break-word;
overflow:hidden;
}
#cnmu-left-col {
width:49%;
float:left;
word-wrap:break-word;
overflow:hidden;
}
#cnmu-center-col {
width:100%;
float:right;
word-wrap:break-word;
overflow:hidden;
}

ملاحظة : الأكواد المعلمة بالأحمر هي خاصة بالعمود الثالث الذي سيضاف بعد العمودين إن لم تريده قم بحذفهما

بعض القوالب تكون الوسوم بها متغيرة وقد لا تجد sidebar-wrapper

حينها ستفعل التالي

ابحث عن اول آضافة لديك في السايدبار وفوق اكوادها ستجد كود مثل هذا

<b:section class='sidebar' id='#'

الكود سكون مشابه وليس مطابق وفي مكان هذا الرمز # ستجد كلمة هذه الكلمة هي الوسم البديل لــ sidebar-wrapper

قم بنسخها وابحث عنها بين اكواد الستايل وعندما تجد الكود الخاص بها ستجد نفس الشئ قوس فتح وقوس اغلاق بعد قوس الإغلاق أضف الأكود

وبالتوفيق بإذن الله

منشورة في: *, دروس