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

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

 

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

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

 

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

 

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

 

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 ثوان :)