إنشاء علامة تبويب منسدلة بالجيكويري

هل سبق لك ان شاهدت موقع لدية تبويب في السايدبار به 3 أقسام يتنقل بينهم بضغطة زر . فهي لعرض أكثر من قسم في مساحة واحدة بدلا من عرض كل قسم منها بشكل منفصل وفي هذة الحالة سيأخذ مساحة كبيرة من السايد بار ( القائمة الجانبية )

 أو أي مكان آخر تم وضعها به .

إضافة علامة تبويب منسدلة بالجيكويري :-

الخطوة الأولى :-  عليك تسجيل الدخول على بلوجر ثم الدخول الى مدونتك ومنها تختار قالب ثم تضغط على Edit HTML ثم قم بالبحث عن 

وسم  ]]></b:skin> ثم ضع هذة الأكواد أعلى منه 

/* Tab Widget */ .tabviewsection { background: #f8f8f8; text-transform: uppercase; border-bottom: 5px solid #f34246; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; float: left; width: 100%; } .tabs-widget { list-style: none; list-style-type: none; margin: 0 0 10px 0; padding: 0; } .tabs-widget li { list-style: none; list-style-type: none; padding: 0; float: left; border-right: 2px solid #fff; } .tabs-widget li a { color: #fff; display: block; padding-right: 16.5px; padding-left: 16px; font-size: 13px; padding-top: 15px; padding-bottom: 15px; text-decoration: none; border-top-left-radius: 5px; border-top-right-radius: 5px; } .tabs-widget-content { } .tabviewsection { margin-top: 10px; margin-bottom: 10px; } .tags_tab { width: 80px; text-align: center; } .about_tab { width: 96px; text-align: center; } li.laster { border: 0px; width: 120px; text-align: center; } .blog-mobile-link { display: none; } .tabs-widget li a { padding-right: 20px; padding-left: 20px; } .tabs-widget { height: 51px; } .tw-authors { width: 570px; } .tabviewsection h2 { display: none; } .tabs-widget li a.tabs-widget-current { padding-bottom: 20px; margin-top: -10px; background: #f8f8f8; color: #444; text-decoration: none; border-top: 5px solid #f34246; font-size: 14px; text-transform: capitalize; } .tabs-widget li a { background: #f34246; }

بعد وضع الكود إضغط على حفظ القالب وننتقل الى الخطوة الثانية 

الخطوة الثانية :-

 في هذة الخطوة كل شخص له طريقة في وضع الكود حسب فكرة عمل الكود ولكننا في هذة المقالة سنشرح أفضل وأسهل طريقة لاضافة هذا الكود وهو من خلال البحث عن بداية السايد بار ويمكنك البحث عن بدايته بالبحث عن (<div id='sidebar-wrapper'>)

قد لا تجدها بهذا الاسم فكل مطور يستخدم اسم مختلف عند تكويد القالب ولكن في الطبيعي هي بهذا الاسم الذي ذكرته مسبقا .
بعد ايجاد المكان المناسب نضع هذا الكود أسفل منه  

<!-- Tab Widget [start] by shro7atbloger.com --><div class='tabviewsection'><script type='text/javascript'> 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><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'><li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li><li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li><li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li></ul><!-- Tab Widget 1 --><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' preferred='yes'> </b:section> </div><!-- Tab Widget 2 --> <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' preferred='yes'> </b:section> </div><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><!-- Tab Widget 3 --><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] by shro7atbloger.com -->

بعد إضافة الكود سنذهب الى التخطيط سنجد تم اضافة ثلاث أدوات بهذة الأسماء

 (sidebartab1 و sidebartab2 و sidebartab3)

في كل أداة نقوم باختيار ما نريد اظهارة سواء كان مشاركات شائعة أو تسميات أو تعليقات أو نبذة عن المدونة وبعد الانتهاء نقوم بالحفظ ومشاهدة التعديلات التي تم إضافتها . 

الى هنا ينتهي درسنا ونتمنى أن ينال إعجابكم وان كان هناك أي مشكلة قم بالتعليق وسنرد عليك في أقرب وقت وان تم التركيب بنجاح فلا تبخل علينا بمشاركة الموضوع مع اصدقاءك الى اللقاء في موضوع جديد دمتم بخير ☺