إضافة عدة تبويبات فى العمود الجانبى أو السيدبار لقوالب مدونات بلوجر

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

كيفية إظهار أو إخفاء أجزاء من المحتوى على بلوجر

تقسيم الموضوع الواحد فى بلوجر لعدة صفحات أو تبويبات

وبمتابعة الشرح التالى يمكنك تركيب أحد الإضافات الخاصة بالتبويبات ( تبويبات ثلاثية ، رباعية ، خماسية) وذلك حسب إحتياجك.

الخطوة الأولى : تركيب كود الإضافة HTML

قم بالدخول إلى لوحة تحكم بلوجر الخاص بمدونتك ثم إضغط تحرير قالب HTML (لاتنس الإحتفاظ بنسخة إحتياطية من القالب)
ثم بإستخدام لوحة المفاتيح Ctrl+F إبحث عن الكود التالى 

<div id='sidebar-wrapper'>

إذا لم تجده إبحث عن هذا الكود :

<div class='column-right-inner'>

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

ثلاث تبويبات

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div> 
  <div style='clear: both;' />
</div>

أربع تبويبات

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>

  
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id4'>تعليقات</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>
  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
    <b:section class='sidebar' id='sidebartab4' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div style='clear: both;' />
</div>

خمس تبويبات

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>

  
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id4'>تعليقات</a></li>
    
    <li id='DrROstab5'><a href='#widget-themater_tabs-1432447472-id5'>إتصل بنا</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>
  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
    <b:section class='sidebar' id='sidebartab4' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id5'>
    <b:section class='sidebar' id='sidebartab5' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div style='clear: both;' />
</div>

يمكن تغيير العناوين الموجودة بالأكواد السابقة مثل "تابعنا, الأقسام,الأكثر قراءة,....." بالعناوين المناسبة لك

الخطوة الثانية: كود التنسيق CSS 

إبحث عن الكود التالى 

]]></b:skin>

ثم أضف الكود التالى فوق الكود السابق مباشرة 

/*condaianllkhir multiTabbed Widget*/

.DrROsidebartabs {
  margin-bottom: 20px;
}

.DrROsidebartabs .widget {
  border: 0 none !important;
  box-shadow: 0 0 0 1px #ddd inset;
}

.DrROsidebartabs .widget h2 {
  display: none;
}

.tabs-widget {
  height: 35px;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.tabs-widget li {
  float: right;
  list-style: outside none none;
  padding: 0;
  text-align: center;
  width: 33.3%;
}

#DrROstabs {
  float: left;
}

#DrROstabs a {
  border-left: 0 none;
}

.tabs-widget li:first-child {
  margin: 0
}

.tabs-widget li a {
  background-color: #CCCCCC;
  border-left: 1px solid #444;
   border-right: 1px solid #444;
   border: 1px solid color: #fff;
  -webkit-border-radius: 9px 9px 0 0;
  border-radius: 9px 9px 0 0;
  color: #000;
  display: block;
  font-size: 14px;
   color: #000;
  height: 35px;
  line-height: 35px;
  text-transform: uppercase;
}

.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {
  background-color: #FFFFFF;
  color:#00000;
  text-decoration: none;
  border-top: 3px solid #333333;
}

يمكن تغيير قيمة الرقم الملون باللون الأصفر حسب عدد التبويبات بالأداة كالتالى:
ثلاث تبويبات : width: 33.3%
أربع تبويبات : Width: 25%
خمس تبويبات : Width: 20%
تخصيص الألوان بما يناسب قالب موقعك:
وذلك بتغيير القيمة الملونة باللون الأحمر CCCCCC ويمكن الإستعانة بمولد أكواد الألوان 

الخطوة الثالثة : إضافة الأدوات من لوحة التخطيط

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

قم بتركيب الأدوات التى تريد ظهورها فى التبويبات ثم معاينة الإضافة وحفظ >>> تابع المزيد من اضافات بلوجر