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

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

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

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

عدل علي الـ CSS

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

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

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

    <div class='MBT-tabviewsection'>

    <script type='text/javascript'>
                jQuery(document).ready(function($){
                    $(".MBT-tabs-content-widget-MBT-id").hide();
                    $("ul.MBT-tabs-widget-MBT-id li:first a").addClass("MBT-tabs-current").show();
                    $(".MBT-tabs-content-widget-MBT-id:first").show();
                    $("ul.MBT-tabs-widget-MBT-id li a").click(function() {
                        $("ul.MBT-tabs-widget-MBT-id li a").removeClass("MBT-tabs-current a");
                        $(this).addClass("MBT-tabs-current");
                        $(".MBT-tabs-content-widget-MBT-id").hide();
                        var activeTab = $(this).attr("href");
                        $(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. توجة الي لوحة تحكم المدونة > التخطيط الان يمكنك مشاهدة مثل الموجود في الصوره التالية

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

كل المواضيع

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

التعليقات:0

إرسال تعليق

تابعنا ليصلك جديدنا

الأكثر مشاهده هذه الاسبوع

الوسوم