دليل المدون

2016-02-03

اضافة تبويبات متعددة فى العمود الجانبى على بلوجر Tabbed sidebar

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

blogger widgets
فى الفترة الأخيرة كثرت الأسئلة حول إضافة عدة تبويبات فى العمود الجانبى أو السيدبار لقوالب مدونات بلوجر ، هذه الإضافة المميزة التى تعمل على تنظيم أدوات قالب المدونة ومنع  إزدحامها فى السيدبار ، وتعتمد فكرة هذه الإضافة على إظهار أداة وإخفاء باقى الأدوات الموجودة فى العمود الجانبى بإستخدام تقنية جى كيورى jQuery - بمعنى عند الضغط على تبويب معين يتم ظهور الأداة المرتبط بها مع إخفاء باقى الأدوات المرتبطة بالتبويبات الأخرى.
 تابع: 

كيفية إظهار أو إخفاء أجزاء من المحتوى على بلوجر

تقسيم الموضوع الواحد فى بلوجر لعدة صفحات أو تبويبات

وبمتابعة الشرح التالى يمكنك تركيب أحد الإضافات الخاصة بالتبويبات ( تبويبات ثلاثية ، رباعية ، خماسية) وذلك حسب إحتياجك.

الخطوة الأولى : تركيب كود الإضافة HTML

قم بالدخول إلى لوحة تحكم بلوجر الخاص بمدونتك ثم إضغط تحرير قالب HTML (لاتنس الإحتفاظ بنسخة إحتياطية من القالب)
ثم بإستخدام لوحة المفاتيح Ctrl+F إبحث عن الكود التالى 
<div id='sidebar-wrapper'>
إذا لم تجده إبحث عن هذا الكود :
<div class='column-right-inner'>
ثم أسفل الكود الذى تجده من الأكواد السابقة  أضف مباشرة  أحد الأكواد الآتية "حسب عدد التبويبات التى تريد إضافتها"

ثلاث تبويبات

3tabbed widget

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

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

أربع تبويبات

4tabbed widget

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>

  
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id4'>تعليقات</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>
  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
    <b:section class='sidebar' id='sidebartab4' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div style='clear: both;' />
</div>

خمس تبويبات

5 tabbed widget

<div class='DrROsidebartabs'>
  <script type='text/javascript'>
    jQuery(document).ready(function($){
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
    $(this).addClass(&quot;tabs-widget-current&quot;);
    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
    var activeTab = $(this).attr(&quot;href&quot;);
    $(activeTab).fadeIn();
    return false;
    });
    });
  </script>
  <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li id='DrROstab1'><a href='#widget-themater_tabs-1432447472-id1'>تابعنا</a></li>
    <li id='DrROstab2'><a href='#widget-themater_tabs-1432447472-id2'>الأقسام</a></li>
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id3'>الأكثر قراءة</a></li>

  
    <li id='DrROstab3'><a href='#widget-themater_tabs-1432447472-id4'>تعليقات</a></li>
    
    <li id='DrROstab5'><a href='#widget-themater_tabs-1432447472-id5'>إتصل بنا</a></li>
    </ul>
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' maxwidgets='1' preferred='yes' />
  </div>

  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' maxwidgets='1' preferred='yes' />
  </div>
  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id4'>
    <b:section class='sidebar' id='sidebartab4' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id5'>
    <b:section class='sidebar' id='sidebartab5' maxwidgets='1' preferred='yes' />
  </div>  
  
  <div style='clear: both;' />
</div>
يمكن تغيير العناوين الموجودة بالأكواد السابقة مثل "تابعنا, الأقسام,الأكثر قراءة,....." بالعناوين المناسبة لك

الخطوة الثانية: كود التنسيق CSS 

إبحث عن الكود التالى 
]]></b:skin>

ثم أضف الكود التالى فوق الكود السابق مباشرة 


/*condaianllkhir multiTabbed Widget*/

.DrROsidebartabs {
  margin-bottom: 20px;
}

.DrROsidebartabs .widget {
  border: 0 none !important;
  box-shadow: 0 0 0 1px #ddd inset;
}

.DrROsidebartabs .widget h2 {
  display: none;
}

.tabs-widget {
  height: 35px;
  list-style: outside none none;
  margin: 0;
  padding: 0;
}

.tabs-widget li {
  float: right;
  list-style: outside none none;
  padding: 0;
  text-align: center;
  width: 33.3%;
}

#DrROstabs {
  float: left;
}

#DrROstabs a {
  border-left: 0 none;
}

.tabs-widget li:first-child {
  margin: 0
}

.tabs-widget li a {
  background-color: #CCCCCC;
  border-left: 1px solid #444;
   border-right: 1px solid #444;
   border: 1px solid color: #fff;
  -webkit-border-radius: 9px 9px 0 0;
  border-radius: 9px 9px 0 0;
  color: #000;
  display: block;
  font-size: 14px;
   color: #000;
  height: 35px;
  line-height: 35px;
  text-transform: uppercase;
}

.tabs-widget li a:hover, .tabs-widget li a.tabs-widget-current {
  background-color: #FFFFFF;
  color:#00000;
  text-decoration: none;
  border-top: 3px solid #333333;
}


يمكن تغيير قيمة الرقم الملون باللون الأصفر حسب عدد التبويبات بالأداة كالتالى:
ثلاث تبويبات : width: 33.3%
أربع تبويبات : Width: 25%
خمس تبويبات : Width: 20%
تخصيص الألوان بما يناسب قالب موقعك:
وذلك بتغيير القيمة الملونة باللون الأحمر CCCCCC ويمكن الإستعانة بمولد أكواد الألوان

الخطوة الثالثة : إضافة الأدوات من لوحة التخطيط

بعد إضافة الأكواد السابقة قم بحفظ القالب ثم توجه إلى التخطيط من لوحة التحكم >> ستجد أن السيدبار تم تقسيمه كما بالصورة
blogger layout
قم بتركيب الأدوات التى تريد ظهورها فى التبويبات ثم معاينة الإضافة وحفظ >>> تابع المزيد من اضافات بلوجر
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة

12:43 م
, ,

هناك 7 تعليقات

  1. abdo5‏/2‏/2016، 7:52 م

    هل يمكن وضع مثلها داخل الموضوع ولاكن بتغير محتوها ؟
    اذا يمكن ذلك فممكن الكود
    وشكرا

    ردحذف
    الردود
    1. Dr Rasha Omran6‏/2‏/2016، 11:22 م

      بالفعل يمكن إضافتها داخل الموضوع وقد شرحت ذلك فى موضوع سابق بطريقة إخفاء المحتوى تحت العناوين الفرعية أما إذا كنت تريد إستخدام تبويبات داخل الموضوع فإليك هذا الكود

      حذف
  2. غير معرف20‏/2‏/2016، 9:15 ص

    رائع جدا و مشكور أخي

    ردحذف
  3. غير معرف20‏/2‏/2016، 9:24 ص

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

    ردحذف
    الردود
    1. Dr Rasha Omran21‏/2‏/2016، 2:22 ص

      شكرًا جزيلا أختى على مشاركتك القيمة وقد قمت بشرح هذه الفكرة بهذا الموضوع
      تقسيم الموضوع الواحد فى بلوجر لعدة صفحات أو تبويبات

      حذف
  4. غير معرف23‏/4‏/2016، 4:47 ص

    شكراً علي هذا الموضوع تم العمل والتنفيذ علي مدونتي
    ياريت لو يكون في شرح عن تثبيت القائمة العلوية في مدونة بلوجر
    ولو في قائمتين يفضل تثبيت القائمة الثانية مثل مدونتك

    ردحذف
  5. agadir8‏/12‏/2017، 3:52 م

    اسف سيدي و لكن لم اجد السيدبار في لوحة التحكم وشكرا

    ردحذف

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

الاشتراك في: تعليقات الرسالة (Atom)
Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون