Tabbed Sidebar إضافة جميلة و سهلة

الكثير منا يبحث عن إضافة توفر له المزيد من المساحة في مدونته خاصة إن كان من محبي الإضافات و يزين مدونته بكل ما هو جديد. لذلك إختر لك هذه الإضافة الجميلة و السهلة Tabbed Sidebar و هي تجمع عدة إضافات في نفس المساحة. و لتتعرف أكثر عليها قم بمشاهدة المثال.



Tabbed Sidebar

Demo 

المرحلة الأولى : وضع Styles CSS
باستطاعتك التعديل على كود CSS إن كانت لديك معرف بهذه اللغة فالتعديل سيكون سهل، أما إن كنت لا تستطيع التعامل مع هذه اللغة فألصقه كما هو.
قم بلصق الكود قبل الوسم


  ]]></b:skin>


/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF
url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif)
repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab  ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF
url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif)
repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;      

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919
url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif)
repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
المرحلة الثانية : تسطيب مكتبة الجيكيري jQuery Library
إذا كنت قد نصبتها من قبل فلا داعي لوضع المكتبة مرة أخرى. و إن لم تفعل قم بنسخ الكود التالي و ألصقه قبل الوسم

</head>

<!-- jQuery Call -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<!-- End of jQuery Call -->



المرحلة الثالثة : وضع كود Script الخاص بالإضافة


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



</head>


<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type="text/javascript" src="
http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js">
</script>



لتعامل مع الكود يمكن تغير التالي
var starttab=0;
var endtab=2;
var sidebarname="sidebar";

الرقم 0 هو أول الإضافات و الرقم 2 هو ثالث الإضافات يمكنك أن تختار الرقم اللذي تريد و لتتوضح لك الأمور أنظر للصورة.


Tabbed Sidebar
TabbedSidebar


هنا الإضافات 3 و 4 لم يتم إدراجهما في قائمة Tabbed Sidebar


TabbedSidebar

و لتستفيد من هذه الإضافة جيدا إعلم أنها توضع مرة واحدة في كل مدونة أي أنك لن تستطيع تكرارها عدة مرات في نفس المدونة، و يجب أن تضع عنوان للإضافات التي تريد إدراجها في Tabbed Sidebar كما هو موضح في الشرح أعلاه.


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

هناك 13 تعليقًا:

  1. السلام عليكم ورحمة الله
    الله يعطيك العافيه مدونه رائعه ومميزه
    وان شاء الله بستفيد منها كثير
    خصوصاً اني مازلت في بداية طريق التدوين
    المهم عندي سؤال بخصوص هذه الاضافه الرائعه
    مافهمت Styles CSS
    ياليت توضح لي الطريقه من البديه
    مثلاُ
    تصميم >> اضافة اداه >>> تخطيط >>> وهكذا
    ياليت تشرح لي الطريقه إذا ممكن
    شاكره ومقدره
    مدونتي من هنا
    http://ehsas4343.blogspot.com/

    ردحذف
  2. أهلا بك أختي إحساس معنا و إن شاء الله تستفيدي.

    بخصوص الإضافة تتجهين إلى تصميم ثم تحرير HTML ثم تقومي بتوسيع القالب (توسيع قوالب عناصر واجهة المستخدم) و لا تنسي أخد نسخة إحتياطية من المدونة.

    ومن ثم تقومين بالبحث عن الوسوم الموضحة في الموضوع أعلاه عن طريق خاصية الحث (بالضغط على Ctrl+F )و تعد إيجاده تضعين الكون في المكان المناسب، و نتهى.

    و إن شاء الله سأضع موضوع عن طريقة التعامل مع المدونة للمبتدئين.

    تحياتي لك

    ردحذف
  3. تم التركيب بنجاح
    والصراحه كنت ابحث عن تلك الاضافه من زمااان
    الله يبارك فيك اخي موضوع مهم ورائع
    من متابعين مدونتك باذن الله على الدوام

    ردحذف
  4. مبروك عليك الإضافة و إن شاء الله تستفيد منها ومما نقدمه هنا.

    و الله يبارك فيك و نرجو أن نكون عند حسن ظنك أخي الكريم

    ردحذف
  5. حاولت جاهدة تطبيق ما قلت لكن لم أفلح هل من الممكن إعادة الشرح بطريقة مفصلة أكثر

    ردحذف
  6. لا أرى طريقة أخرى لشرح أسف لكن يمكنكي أن ترسلي قالب مدونتك و سأرى أين يكمن المشكل.

    ردحذف
  7. السلام عليكم

    طريقة تغيير حجم الخط فى tab " جديد المواضيع " او اى tab من الثلاثه ازاى

    وكيفية التحكم فى عرض كل واحد منهم ولون خلفية كل tab

    وبارك الله فيك واعانك وجمل هذه المدونة القيمه اخى اكرينى

    ردحذف
  8. @محمد المصـــرىلتغير حجم الخط إبحت عن الكود التالي ثم غير الرقم 9 لرقم أخر وهو حجم الخط

    cursor:pointer;
    display:inline;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:bold;


    أما بخصوص تغير الحجم فلا أنصحك فتغير بمقدار 1px قد يشوه من شكل الإضافة.

    أرجوا أن أكون قد أفدتك أخي محمد

    ردحذف
  9. ودي بهذه الاضافه من زمان وجدت امس اضافه نفس هذه ولكن صعبه ماتضبط مع الكل
    والان وجدت هذه السهله والمبسطه
    ولكن اخي طبقت الخطوات بحذافيرها واعتمدت ومو ظاهره لدي لافي عناصر الصفحه ولا بواجهة المدونه اتوقع السبب من الخطوه الثالث
    فشو تقصد بـ
    var starttab=0;
    var endtab=2;
    var sidebarname="sidebar";

    هل اغير 0 واكتب اول قسم اريده و 2 اكتب ثالث اضافه
    او اتركها هكذا بدون تغيير
    لان جربت بدون تعديل مانفع جربت اكتب بدل 0 الاقسام مو راضي

    ياليت توضح لنا هالخطوه والله يجزاكـ الجنه

    ردحذف
  10. @أوراق
    بخصوص الأرقام هي خاصة بتمركز الإضافات في مدونتك ف 0 هي أول إضافة و تغير هذا الرقم يغير تمرك Tabbed Sidebar إذا اخترتي الرقم 1 بدل 0 ستظهر إضافة قبل Tabbed Sidebar و الرقم 2 هو الإضافة التي سينتهي عندها الكود.

    أما بخصوص الأرقام فلا يجب أن تغير لأن الإضافة لن تعمل.

    حاولي أختي مرة أخرى و أخبريني بالنتيجة.

    ردحذف
  11. ايضا طبقت مره اخرى لايظهر لي شي جديد
    علما انا ماعندي اضافة مكتبة الجيكيري واضفت الكود الموجود بالشرح
    هل تتوقع المشكله من كود المكتبة ؟؟

    ردحذف
  12. @أوراق
    لا أين تكمن المشكلة هي في الغلب في تكويد قالب مدونتك.

    و مكتبة جيكوير تعمل بشكل جيد و لأتأكد من الكود ككل قمت بتجربه على المدونة التالية
    http://masonry-template.blogspot.com/

    و عمل بشكل جيد يمكنك زيارتها.

    لكن أعد بوضع إضافة مماتلة لهذه في القريب إن شاء الله.

    تحياتي للجميع

    ردحذف
  13. عملت كل شيء زي ماقلت بس مازبط معايا ><

    ردحذف