تحديث إضافة Tabbed Sidebar بمظهر جديد

بسم الله الرحمن الرحيم

 

اليوم سنقوم بوضع موضوع أو إضافة مشابهة Tabbed Sidebar إضافة جميلة و سهلة و التي كنت قد وضعتها في أول أيام المدونة و لقد لاقت إعجاب الكثيرين. لكن للأسف، مع عدم خبرة الكثير من القراء لم يستطيعوا إضافة هذه الأداة لمدوناتهم. أخرهم كتنت الأخت “أوراق” و قد وعدتها بإضافة مماثلة و ها أنا أفي بوعدي لها و لجميع قراء مدونتي المتواضعة.

تحديث إضافة Tabbed Sidebar بمظهر جديد

هذه الإضافة مخصصة لمدونة Wordpress لكن تم بحمد الله تحويلها من طرف أحد الإخوة لتتوافق مع منصة Blogger و لكي لا أطيل عليكم الكلام أترككم مع شرح طريقة إضافتها لمدونتك.

 

view demo بالمناسبة سيكون هناك شرح بالفيديو ستجده في أخر الموضوع.

 

طريقة إضافة الأداة لمدونتك

 

1- توجه للوحة تحكم المدونة / تصميم / تحرير Html / قم بتوسيع القالب

2- قم بالبحث عن الوسم التالي ]]></b:skin> و ضع قبله الكود بالأسفل

/*---- Wordpress Style MBT 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:left}
.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;}

3- إن أردت قم بتغير A46F38# باللون الموجود في مدونتك ليتناسب معها.

4- إبحث عن الوسم <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;'/>

5- قم بتغير كلمات ( مواضيع جديدة ، القائمة البريدية ، أخر التعليقات ) بما يناسبك.

6- الأن قم بحفظ القالب

7- الأن قم بالذهاب لعناصر الصفحة سوف تجد أنه قد ظهرت 3 إضافات قم بسحب الإضافات التي تريد إليها.

إضافة الأدوات للمدونة

8- بعد هذه الخطوة قم بحفظ التعديلات و عاين الأداة في مدونتك.

 

شرح الفيديو

 

 

 

الأن جاء دورك لتتحفنا و تضع تعليقك في المربع الموجود بالأسفل

إذا أعجبك الموضوع فشاركه مع أصدقائك فلن يأخد منك الأمر سوى 5 ثوان :)

هناك 10 تعليقات:

  1. أخي لم أجد الوسمdiv id='sidebar-wrapper'

    ووجدت هذا الوسم
    div id='header-inner'

    مالعمل
    اثقل عليك بين الحين والاخر
    شكرا

    ردحذف
  2. @waleed sabr
    لا عليك أخي الكريم

    أعتقد أنك لم ترى الشرح في الفيديو لأني شرحت حل هذه المشكلة و طريقة تجاوزها فيه.


    أتمنى أن تتبع الشرح الموجود في الفيديو و تتبع الخطواة الموجودة فيه.

    و بعد ذالك أعلمني بالنتيجة.


    سلام

    ردحذف
  3. اخي مع تقديري لجهدك شرحك منقوص . لم اجد الوسم

    ردحذف
  4. @LAMAR
    أخي الكريم لو رأيت الإجابة عن التعليق الأول ستجد أني قد أجبت عن السؤال.

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

    اتمنى أن تشاهد شرح الفيديو ليتضح لك الأمر.

    تحياتي لك

    ردحذف
  5. مشكور يآااطيب
    الله يجزيكِ الخير .. أبدعتِ هنآاا

    ردحذف
  6. @AL EMAD

    العفو أخي الكريم

    و جزاك الله خير الجزاء إن شاء الله

    ردحذف
  7. شكرا وبارك الله فيك اخي الغالي , جاري تجربة الاضافة

    ردحذف
  8. @علي

    و بارك فيك أخي علي و نحن نرحب بك معنا.

    ردحذف
  9. الله يفتح عليك أعجبتني مواضيعك كثيرا مفيدة جداو في نفس مجال مدونتي لكن بالفرنسية
    http://seo-dz.blogspot.com

    ردحذف
  10. موضوع مميز شرف لي ان اقوم بمتابعة مدونتكم الرائعة اتمنى ان تتابعو مدونتنا المتواضعة بدوركم دعما لنا كما نتشرف بتعليقاتكم وتوجيهاتكم كما ارغب في تبادل اعلاني مع مدونتكم خلقا لجسور التواصل
    مدونة معراج

    ردحذف