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

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

يونيو 27, 2017
4tabbed widget


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

 - بمعنى عند الضغط على تبويب معين يتم ظهور الأداة المرتبط بها مع إخفاء باقى الأدوات المرتبطة بالتبويبات الأخرى.

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

الخطوة الأولى : تركيب كود الإضافة 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;).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>


أربع تبويبات
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;).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 ويمكن الإستعانة بمولد أكواد الألوان

 

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

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

 

 مصدر

 

الاشتراك في: تعليقات الرسالة (Atom)