آداة ثلاثية التبويبات للسايد بار

من أكثر الادوات المهمة لمن يحتاجون مكان في السايد بار حيث انها تجمع ثلاث ادوات في آداة واحده مما يجعل هناك مساحة لادوات أكثر في السايد بار هذه الآداة هي بتنسيق حصري لكن مدون تم الإهتمام بان تعمل الآداة على القوالب المتجاوبة دون مشاكل وان تتخذ حجم السايد بار المشكلة الوحيدة التي قد تواجهك في تركيب تلك الآداة هي ان يكون قالبك غير مهئ في منطقة السايد بار لإستخدام تلك الآداة , الآداة ستعطيك ثلاث مساحات داخل التخطيط يمكنك ان تضيف بها اى أدوات تعجبك

معاينة

/*Cnmu Tabbed Widget*/
.cnmusidebartabs {margin-bottom: 20px;}
.cnmusidebartabs .widget {
  border: 0 none !important;
  box-shadow: 0 0 0 1px #ddd inset;
}
.cnmusidebartabs .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%;
}
#cnmustab2 {float:left;}
#cnmustab2 a {border-left: 0 none;}
.tabs-widget li:first-child {margin: 0}

.tabs-widget li a {
  background-color: #000;
  border-left: 1px solid #444;
  color: #fff;
  display: block;
font-size:12px;
height:35px;
line-height:35px;
  text-transform: uppercase;
}

.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {
  background-color: #FB6400;
  color:#fff;
  text-decoration: none;
}

تنسيق

هذا #000 هو لون خلفية التبويبات
وهذا #fff لون الكتابة
وهذا  #FB6400 لون الإطار النشط او عند تمرير الماوس
الرقم 12 هو حجم خط التبويبات
من اراد ان يستخدم أيقونة لكل تبويب يضيف بعد الكود السابق الكود التالي
#cnmustab1 a {
  background-image: url("*");
  background-position: 98% center;
  background-repeat: no-repeat;
} مع تغيير * برابط الأيقونة
هذا خاص بالتبويب الأول
لعمل أيقونة للتبويب الثاني كرر الكود مع تبديل الرقم 1 بـ 3
والتبويب الثالث بتغيير الرقم 1 بـ 2

 التفعيل داخل القالب

هذا هو الجزء الاهم في الأمر
عليك ان تبحث في قالبك عن اسم اول آداة لديك في السايد بار
فوق اسم الآداة ستجد سطر أوله كلمة <b:section
 فوق السطر ستضيف الكود التالي
 مثال لاحظ اسم الآداة بالأصفر واسم السطر بالاحمر نريد ان نضيف الكود فوق السطر الأحمر

<div class='cnmusidebartabs'>
<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='cnmustab1'><a href='#widget-themater_tabs-1432447472-id1'>شائعة</a></li>
<li id='cnmustab2'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات</a></li>
<li id='cnmustab3'><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>

لو قالبك يدعم منطقة السايدر بار بشكل مضبوط ستعمل معك الآداة دون مشاكل ويمكنك حينها العودة لصفحة التخطيط وتركيب الإضافات التي تريد بها
يمكنك طبعا تعديل الكلمات العربية لكن لا تعدل الترتيب فقط الكلمات

المحتويات والمعلومات في هذا الموضوع قديمة أول لمشكلة تم حلها

العودة للرئيسية متابعة القراءة