هاك الاقسام المتعددة أو هاك التبويبات لمدونة بلوجر

Tweet

السلام عليكم ورحمة الله ان شاء الله اليوم اضافة جميلة جدا لمدونة بلوجر وبطريقة سهل الاضافة عباره عن هاك الاقسام المتعددة الصورة تفي بالغرض 

كيف اضف الهاك لمدونة  بلوجر :

1. لوحة تحكم المدونة > القوالب > اضافة HTML
2. خذ نسخة احتياطية  لقالب المدونة قبل كل شي 
3. ابحث عن الكود  التالي ]]></b:skin>
4. انسخ الكود من الوصلة التالي والصق بعده مباشره (الكود هنا )
5. إحفظ القالب 
6. إنتهينا بحمدالله 

عدل علي  الـ CSS

1. ابحث عن هذا الكود ]]></b:skin>
2. فوقه مباشره الصق الكود التالي 

/*---- Wordpress Style c4geek Menu Tabs----*/

    .MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
    .MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:right}
    .MBT-tabs li:first-child{margin:0}
    .MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
    .MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
    .MBT-tabs-content{background:#212121}
    .MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

اضافات HTML

1. ابحث عن هذا الكود <div id='sidebar-wrapper'>
2. تاكد  من ان خيار"توسيع قوالب عناصر واجهة المستخدم" غير منشط
3. تحت هذا الكود <div id='sidebar-wrapper'> مباشره الصق الكود التالي 

    <div class='MBT-tabviewsection'>

    <script type='text/javascript'>
                jQuery(document).ready(function($){
                    $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li:first a&quot;).addClass(&quot;MBT-tabs-current&quot;).show();
                    $(&quot;.MBT-tabs-content-widget-MBT-id:first&quot;).show();
                    $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).click(function() {
                        $(&quot;ul.MBT-tabs-widget-MBT-id li a&quot;).removeClass(&quot;MBT-tabs-current a&quot;);
                        $(this).addClass(&quot;MBT-tabs-current&quot;);
                        $(&quot;.MBT-tabs-content-widget-MBT-id&quot;).hide();
                        var activeTab = $(this).attr(&quot;href&quot;);
                        $(activeTab).fadeIn();
                        return false;
                    });
                });
            </script>

    <ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
    <li><a href='#widget-MBT-id1'>تابعنا</a></li>
    <li><a href='#widget-MBT-id2'>اخر الاخبار</a></li>
    <li><a href='#widget-MBT-id3'>البحث</a></li>
    </ul>

    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'>
    </b:section>                                     
    </div>  

    <div style='clear:both;'/>                      
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'>
    </b:section>                                       
    </div>  

                          
    <div style='clear:both;'/>
    <div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'>
    </b:section>                                      
    </div>

    </div>
    <div style='clear:both;'/>

الان غير التصنيفات التالية بماينسبك "تابعنا , اخر الاخبار , والبحث"

4. توجة الي لوحة تحكم المدونة > التخطيط الان يمكنك مشاهدة مثل الموجود في الصوره التالية

للاستفسار الرجاء ترك تعليقك وسنرد عليك ان شاء الله