اضافة تبويبات متعددة فى العمود الجانبى على بلوجر Tabbed sidebar

اضافة تبويبات متعددة فى العمود الجانبى على بلوجر Tabbed sidebar

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

 تابع:

5 خطوات بسيطة لتصميم شعار أو لوجو إحترافى


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


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

ثم بإستخدام لوحة المفاتيح Ctrl+F إبحث عن الكود التالى

<div id='sidebar-wrapper'>
إذا لم تجده إبحث عن هذا الكود :

<div class='column-right-inner'>
ثم أسفل الكود الذى تجده من الأكواد السابقة  أضف مباشرة  أحد الأكواد الآتية "حسب عدد التبويبات التى تريد إضافتها"

ثلاث تبويبات
3tabbed widget



<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;).removeClass(&quot;tabs-widget-current a&quot;);





$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {


$(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>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>



<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='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-id2'>



<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>

    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>
</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;' />



أربع تبويبات
4tabbed widget



<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;).removeClass(&quot;tabs-widget-current a&quot;);





$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {


$(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>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>



<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='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>


    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />



<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'>
  </div>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>



<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>

    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>


</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;' />



خمس تبويبات

5 tabbed widget



<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;).removeClass(&quot;tabs-widget-current a&quot;);





$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {


$(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>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>



<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='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>


  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>



<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>
    <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-id3'>



<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>

    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>


    <b:section class='sidebar' id='sidebartab5' maxwidgets='1' preferred='yes' />



<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'>
  </div>

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









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



الخطوة الثانية: كود التنسيق CSS
إبحث عن الكود التالى

]]></b:skin>


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





/*condaianllkhir multiTabbed Widget*/








.DrROsidebartabs {


.DrROsidebartabs .widget {





margin-bottom: 20px;


}
  box-shadow: 0 0 0 1px #ddd inset;



border: 0 none !important;
}
.tabs-widget {



.DrROsidebartabs .widget h2 {
  display: none;
}
  padding: 0;



height: 35px;
  list-style: outside none none;
  margin: 0;
}
  list-style: outside none none;



.tabs-widget li {
  float: right;
  padding: 0;
  text-align: center;
  width: 33.3%;



}
#DrROstabs {



  float: left;



}
  border-left: 0 none;



#DrROstabs a {
}
.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;
  font-size: 14px;



color: #000;
  display: block;
  line-height: 35px;



color: #000;
  height: 35px;
.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {



text-transform: uppercase;
}

  background-color: #FFFFFF;
  border-top: 3px solid #333333;



color:#00000;
  text-decoration: none;
}







يمكن تغيير قيمة الرقم الملون باللون الأصفر حسب عدد التبويبات بالأداة كالتالى:

ثلاث تبويبات : width: 33.3%

أربع تبويبات : Width: 25%

خمس تبويبات : Width: 20%

تخصيص الألوان بما يناسب قالب موقعك:

وذلك بتغيير القيمة الملونة باللون الأحمر CCCCCC ويمكن الإستعانة بمولد أكواد الألوان

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

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