منتديات رحيل لكل العرب - طريقة إضافة الشريط الجانبي لبلوجر بعدة تبويبات

السلام عليكم ، في تدوينة اليوم ، سوف أشرح لكم ، طريقة اضافة تبويبات ويدجيت متعددة ، لإستعمالها في الشريط الجانبي ، او السايدبار ، في مدونات بلوجر .

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

طريقة تركيب الإضافة :

1- من لوحة التحكم >> قالب >> تحرير HTML

2- خذ نسخة احتياطية لقالب المدونة قبل اجراء اي تغيير

3- قم بالبحث عن الكود التالي ]]></b:skin> بالاستعانة بلوحة التحكم (CTRL+F)

بعد ان تجد الكود أضف مباشرة فوقه الكود التالي :

/ * Multi Tab Widget * /
.multitab-section {background: # fff; text-transform: uppercase; width: 100%}
.multitab-widget {list-style: none; margin: 0 0 10px; padding: 0}
.multitab-widget li {list-style: none; padding: 0; margin: 0; float: left}
.multitab-widget li a {background: # 22a1c4; color: # fff; display: block; padding: 15px; font-size: 13px; text-decoration: none}
.multitab-tab {border: 0; width: 33.3%; text-align: center}
.multitab-section h2, h3 .multitab-section, .multitab-section h4, h5 .multitab-section, .multitab-section h6 {display: none;}
.multitab-li widget solid # 22a1c4; font-size: 14px; text-transform: capitalize}

بعد ذالك قم بالبحث عن </ body> و أضف فوقه الكود التالي :

<Script type = 'text / javascript'>
// <! [CDATA [
// Multi tab widget
jQuery (document) .ready (function ($) {$ (". multitab-widget-content-widget-id"). hide (); $ ("ul.multitab-widget-content-tabs-id li: first a ") .addClass (" multitab-widget-current "). show (); $ (". multitab-widget-widget-content-id: first '). show (); $ ("ul.multitab-widget-content -tabs-id li a "). click (function () {$ (" ul.multitab-widget-content-tabs-id li a "). removeClass (" multitab-current widget-a "); $ (this) .addClass ("multitab-widget-current"); $ (". multitab-widget-content-widget-id"). hide (); var activeTab = $ (this) .attr ("href"); $ (activeTab ) .fadeIn (); return false;});});
//]]>
</ Script>

بعد ذالك قم بالبحث عن <div id = 'sidebar-wrapper'> و أضف تحته الكود التالي :

<Div class = 'multitab-section'>
<Ul class = 'multitab multitab-widget-widget-content-tabs-id'>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id1'>Latest</a> </ li>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id2'>Tags</a> </ li>
<Li class = 'multitab-tab'> <a href='#multicolumn-widget-id3'>Archive</a> </ li>
</ Ul>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID1'>
<B: section class = 'sidebar' id = 'sidebartab1' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID2'>
<B: section class = 'sidebar' id = 'sidebartab2' preferred = 'yes' />
</ Div>
<Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-id3'>
<B: section class = 'sidebar' id = 'sidebartab3' preferred = 'yes' />
</ Div>
</ Div>

بعد ان تنتهي قم بحفض القالب ، و غير اسماء التبويبات اذا كنت تريذ ذالك ، لا تنسو ان تضعو مشاكلكم ، و استفساراتكم ، في التعليقات تحت ، شكرا ...