كيفية اضافة عمودين فى القائمة الجانبية السيدبار Two Columns Sidebar

لأصحاب مدونات بلوجر كيف تضيف عمودين بالقائمة الجانبية الشريط الجانبى بالسيدبار؟ لتمكنك بأضافة الادوات بجانب بعضها وكأنها مقسمة كما نراها بالمواقع الكبيرة وكما تلاحظون بصورة هذه التدوينة الذى قمت بتصميمها تفيد بأن يوجد عمودين بالشريط الجانبى لن اطيل عليكم بالكلام ولنشاهد معا طريقة التركيب .

صورة توضح بعد التركيب تم اضافة عمودين بالقائمة الجانبية :

شرح تركيب الأضافة :

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

الان اضغط على CTRL + F من الكيبورد لظهور عملية البحث 

ابحث عن هذا الكود : 

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>  </div>

ضع هذا الكود التالى  ما بين الكود المحدد باللون الأصفر 

<b:section class='sidebar' id='magazine-left4' showaddelement='yes'>

<b:widget id='Text514' locked='false' title='Column 1' type='Text'/>

</b:section>

<b:section class='sidebar' id='magazine-right4' showaddelement='yes'>

<b:widget id='Text524' locked='false' title='Column 2' type='Text'/>

</b:section>

<div style="clear: both;"></div>

 للتوضيح اكثر لكيفية وضع الكود بالشكل الصحيح 

<div id='sidebar-wrapper'>

  <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>

<b:widget id='Label99' locked='false' title='Labels' type='Label'/>

</b:section>

 <b:section class='sidebar' id='magazine-left4' showaddelement='yes'>

<b:widget id='Text514' locked='false' title='Column 1' type='Text'/>

</b:section>

<b:section class='sidebar' id='magazine-right4' showaddelement='yes'>

<b:widget id='Text524' locked='false' title='Column 2' type='Text'/>

</b:section>

<div style="clear: both;"></div>

 </div>

الأن ابحث مرة اخرى عن هذا الكود :

]]></b:skin>

ضع بقبلة مباشرة هذا الكود :

#magazine-left4 {

width: 49%;

float: left;

}

#magazine-right4 {

width: 49%;

float: right;

}

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

بالنهاية ارجو بأن هذا التدوينة افادات الجميع وانتظرونى بتدوينة اخرى مفيدة