من أكثر الادوات المهمة لمن يحتاجون مكان في السايد بار حيث انها تجمع ثلاث ادوات في آداة واحده مما يجعل هناك مساحة لادوات أكثر في السايد بار هذه الآداة
من أكثر الادوات المهمة لمن يحتاجون مكان في السايد بار حيث انها تجمع ثلاث ادوات في آداة واحده مما يجعل هناك مساحة لادوات أكثر في السايد بار هذه الآداة هي بتنسيق حصري لكن مدون تم الإهتمام بان تعمل الآداة على القوالب المتجاوبة دون مشاكل وان تتخذ حجم السايد بار المشكلة الوحيدة التي قد تواجهك في تركيب تلك الآداة هي ان يكون قالبك غير مهئ في منطقة السايد بار لإستخدام تلك الآداة , الآداة ستعطيك ثلاث مساحات داخل التخطيط يمكنك ان تضيف بها اى أدوات تعجبك
اليوم أريد أن أقدم لكم إضافتين مهمة لجمالية و تنسيق قوالب البلوجر الإضافة عبارة عن تبويب ثلاثي متعدد للشريط الجانبي لقوالب البلوجر.
الاضافة الاولي
1طريقة التركيب
الخطوة الاولي Css
إبحث عن الكود التالي : ]]></b:skin> أو </style>
ونضيف فوقه الكود التالي :
.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,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
الخطوة الثانية JAVASCRIPT
ثم نبحث عن الكود : </body> ونضيف فوقه الكود التالي :
<script type='text/javascript'>//<![CDATA[// Multi tab widgetjQuery(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-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });//]]></script>
الخطوة الثالثة Html
ثم نبحث عن الكود التالي : <div id='sidebar-wrapper'> و نضيف أسفله الكود التالي :
<div class='multitab-section'><ul class='multitab-widget multitab-widget-content-tabs-id'><li class='multitab-tab'><a href='#multicolumn-widget-id1'>الشعبية</a></li><li class='multitab-tab'><a href='#multicolumn-widget-id2'>الأرشيف</a></li><li class='multitab-tab'><a href='#multicolumn-widget-id3'>التعليقات</a></li></ul><div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'/></div><div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'/></div><div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'/></div></div>
و هكذا تكون قد حصلت على النتيجة المطلوبة.
الاضافة الثانية
2الخطوة الاولي Css
/*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;}
الخطوة الثانية JAVASCRIPT
<script type='text/javascript'>//<![CDATA[jQuery(document).ready(function($){$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");$(this).addClass("tabs-widget-current");$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();var activeTab = $(this).attr("href");$(activeTab).fadeIn();return false;});});//]]></script>
الخطوة الثالثة Html
<div class='cnmusidebartabs'><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>
لو قالبك يدعم منطقة السايدر بار بشكل مضبوط ستعمل معك الآداة دون مشاكل ويمكنك حينها العودة لصفحة التخطيط وتركيب الإضافات التي تريد بها
wesam developer
إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا
COMMENTS