السبت، 14 فبراير 2015

إضافة صندوق إضافات مزدوج في السيدبار بالمدونة

بقلم: BR MED يوم السبت، 14 فبراير 2015 القسم : 2 التعليقات
السلام عليكم ور حمة الله و بركاته.
مرحبا بكم مجددا، متابعين الكرام كما عودناكم دائما بالجديد والحصري والمفيد على ورشة مدون، التي تهتم بكل ما يخص المدونين على منصة بلوجر، و درس اليوم هو كيفية إضافة آداة مزدوجة في السيدبار و هي على شكل قائمة مقسمة لتحتوي ثلاث نوافذ، في كل نافدة يمكنك وضع إضافة معينة ، وهذه الإضافة جميلة جدا وإحترافية و تهم بالخصوص أصحاب المدونات التي تشكو من قلة المساحات في واجهة المواقع، بحيث عوض وضع ثلات إضافات متفرقة التي ستأخد مساحة كبيرة من المدونة ، تقوم بوضع هذه الأخيرة التي تمكنك من الإنتقال بين الإضافات بسلاسة و خفة.
يمكنك معاينتها في مدونتنا السيدبار على يسارك

الآن طريقة تركيب الإضافة.
  1. نذهب للوحة التحكم بلوجر ثم القالب نقوم بأخد نسخة إحتياطية للقالب تحسبا لأي خطأ.
  2. بعدها نقوم بتحرير HTML ثم ننقر وسط الأكواد و نبحث بالإستعانة بالزرين عن (CTRL+F) عن الوسم ]]></b:skin>
  3. بعد إيجاده ضع الكود التالي فوقه مباشرة.
 /* Tab Widget By warch-mo */
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
float: left;
width: 99%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-left: 2px solid #fff;
}
.tabbed-widget li a {
color: #000;
display: block;
padding-right: 14px;
padding-left: 14px;
font-size: 13px;
padding-top: 14px;
padding-bottom: 14px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabbed-widget-content {
}
.tabbedviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
text-align: center;
}
.about_tab {
text-align: center;
}
li.laster {
border: 0px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabbed-widget li a {
padding-left: 20px;
padding-right: 20px;
}
/* .tabbed-widget {
height: 51px;
}*/
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #24AAE9;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #24AAE9;
}
بعد ذلك نقوم بالبحث عن أحد الأكواد التالية:
<div id='sidebar-wrapper'>
أو
<div class='sidebar-wrapper'>
أو
<div class='sidebar'>
أو
<div id='sidebar'>
 
ملاحظة : قد لا تجد أي أحد هذه الأكواد لأن تصاميم القوالب تختلف و لكن يجب عليك البحث عن معرف السيدبار بقالبك، المهم إن واجهت هذا المشكل إترك تعليق به رابط مدونتك لأساعدك.
 
بعد أن تجد المعرف الخاص بالسيدبار لديك قم بوضع هذا الكود مباشرة بعده.
<!-- Tab Widget [start]  by warch-mo--><div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabbed-widget-current&quot;).show(); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { $(&quot;ul.tabbed-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabbed-widget-current a&quot;); $(this).addClass(&quot;tabbed-widget-current&quot;); $(&quot;.tabbed-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); var activeTab = $(this).attr(&quot;href&quot;); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-widget-widget-themater_tabs-1432447472-id'> <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>مواضيع شائعة</a></li> <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات الزوار</a></li> <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>الأرشيف</a></li></ul><!-- Tab Widget 1 --><div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <!-- Tab Widget 2 --> <div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>
<!-- Tab Widget 3 --><div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] -->
يمكنك تغير الكلمات باللون الأحمر بما يناسبك
 أما طريقة إستخدام الإضافة فهي سهلة عند الذهاب لصفحة التخطيط سوف تجدها كما في الصورة
كل خانة يمكنك أن تضع بها أداة مهما كان نوعها، المهم أتمنى أن يعجبكم الدرس و أن تستفيدوا منه أي إستفسار أنا في الخدمة،
دمتم بود في أمان الله.

هناك تعليقان (2):

  1. Unknown25 فبراير 2015 في 10:08 ص

    مجهود رائع جزاكم الله خيرا

    تشرفنى زيارتك لمدونتى ( الموسوعة ) لتحميل قالب مدونتى الرائع عبر الرابط التالى

    http://th3-encyclopedia.blogspot.com/2015/02/th3-encyclopedia-blog-template.html

    ردحذف
    الردود
    1. BR MED25 فبراير 2015 في 3:24 م

      بارك الله فيك أخي =r وشكرا على مرورك =s

      حذف

يسعدنا تفاعلكم بالتعليق , أما لو لديك سؤال خارج الموضوع يرجى استخدام ركن الأسئلة ولإضافة كود قم بتحويله أولابمحول الأكواد , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

الاشتراك في: تعليقات الرسالة (Atom)