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

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

 

المرحلة الأولى : وضع 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 هو ثالث الإضافات يمكنك أن تختار الرقم اللذي تريد و لتتوضح لك الأمور أنظر للصورة.






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




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


أتمنى أن تنال الإضافة إعجابك تحياتي القلبية لك.

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