اضافة 3 ازرار في السايد بار

اليوم أريد أن أقدم لكم إضافتين مهمة لجمالية و تنسيق قوالب البلوجر الإضافتين عبارة عن تبويب ثلاثي متعدد للشريط الجانبي لقوالب البلوجر. 

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

معــايـنــة

الكود الاول

• الشعبية
• الأرشيف
• التعليقات

الكود الثاني

• شائعة
• تعليقات
• تسميات

شرح كود واجهة التبويبات المتعددة (Multi-tabs)

• الهيكل الأساسي (HTML)

  1. الكود الأول:

     يُنشئ هذا الجزء واجهة تبويبات تحتوي على ثلاثة أقسام: "الشعبية"، "الأرشيف"، و"التعليقات".

     
     <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. الكود الثاني:

     يُنشئ هذا الجزء واجهة تبويبات أخرى تحتوي على ثلاثة أقسام: "شائعة"، "تعليقات"، و"تسميات".

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

• التنسيقات (CSS)

  1. الكود الأول:

     تنسيق واجهة التبويبات الأولى.

     
     .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-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;
     }
     

  2. الكود الثاني:

     تنسيق واجهة التبويبات الثانية.

     
     .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 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;
     }
     

• التفاعل (jQuery)

  1. الكود الأول:

     تفعيل التبويبات وإظهار المحتوى المقابل عند النقر.

     
     jQuery(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;
       });
     });
     

  2. الكود الثاني:

     تفعيل التبويبات وإظهار المحتوى المقابل عند النقر.

     
     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;
       });
     });
     

طريقة التركيب

1. اضافة كود Html

    من لوحة تحكم بلوجر

   حدد السمة تحرير HTML

   ابحث عن الكود التالي <div id='sidebar-wrapper'>

   وضيف اسفله كود html(1)

2. اضافة كود Css

    من لوحة تحكم بلوجر

   حدد السمة تحرير HTML

   إبحث عن الكود التالي : ]]></b:skin> أو </style>

   وضيف فوقه كود Css(1)

3. اضافة كود jQuery

    من لوحة تحكم بلوجر

   حدد السمة تحرير HTML

   نبحث عن الكود : </body>

   وضيف فوقه كود jQuery(1)

ملحوظة! نفس الخطوات بالترتيب مع الكود الثاني

ملخص

هذا الكود يُنشئ واجهة تبويبات متعددة باستخدام HTML وCSS وjQuery. يتم استخدام jQuery لإضافة التفاعل بين التبويبات والمحتوى. يمكن تعديل التنسيقات والمحتوى ليتناسب مع احتياجات التصميم الخاصة بك.