Online Firmware: Cara Membuat Tab pada Sidebar dengan JQuery

Tuesday, November 15, 2016

Cara Membuat Tab pada Sidebar dengan JQuery

Cara Mudah Membuat Tab pada Sidebar dengan J-Query - Membuat Tab pada sidebar dengan J-Query. Dengan menggunakan Tab pada Sidebar tentunya akan lebih hemat tempat dan akan terlihat rapi. Anda dapat mengisi beberapa Widget dalam 1 kotak Sidebar.

Tab pada Sidebar dengan JQuery

Dengan melihat gambar diatas, saya yakin kalian jadi lebih paham dari judul yang syaa tulis. Ya membuat tab pada sidebar yang akan menata lebih rapi blog kita karena dalam 1 kotak widget kita bisa isi beberapa widget.

Berikut ini script yang perlu Anda masukkan ke dalam edit html template Anda.

Paste script berikut diatas code ]]></b:skin>

/*---- Tabbed Sidebar Widgets ---- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}
.widget-tab {
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background:#FFFFFF url(http://i37.tinypic.com/28iq9fm.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://i38.tinypic.com/2urpe01.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-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background:#191919 url(http://i34.tinypic.com/sf83a1.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;
}
ul.tab-wrapper li:hover{
background:#FFFFFF url(http://i38.tinypic.com/2urpe01.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;
}

Kemudian Copy script berikut diatas kode </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js type=text/javascript/>
<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>

Kemudian copy script berikut dibawah nya

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js type=text/javascript/>
<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar";
</script>
<script type=text/javascript>
//<![CDATA[
var home_page_tab=location.href;if(home_page_tab.indexOf("blogger.com")!=-1){var starttab=-1;var endtab=-1}var $jtab1=jQuery.noConflict();$jtab1(document).ready(function(){var a="<div class=widget-wrapper><ul class=tab-wrapper></ul>";for(i=starttab;i<=endtab;i++){$jtab1("#"+sidebarname+" .widget h2").eq(i).hide();$jtab1("#"+sidebarname+" .widget").eq(i).hide();$jtab1("#"+sidebarname+" .widget .widget-item-control").eq(i).hide()}$jtab1("#"+sidebarname+" .widget").eq(starttab).before(a);i=0;j=0;$jtab1("#"+sidebarname+" .widget > h2").each(function(){if(i>=starttab&&i<=endtab){var b=$jtab1(this).text();$jtab1("#"+sidebarname+" .tab-wrapper").append("<li class=tab id=tabid"+sidebarname+j+">"+b+"</li>");j++}i++});i=0;j=0;$jtab1("#"+sidebarname+" .widget").each(function(){if(i>=starttab&&i<=endtab){$jtab1(this).attr({id:"widgtabid"+sidebarname+j});$jtab1(this).addClass("widget-tab");j++}i++});$jtab1("#"+sidebarname+" .tab").click(function(){$jtab1("#"+sidebarname+" .widget-tab").slideUp();$jtab1("#widg"+$jtab1(this).attr("id")).slideDown();$jtab1("#"+sidebarname+" .tab").removeClass("active-tab");$jtab1(this).addClass("active-tab")});$jtab1("#"+sidebarname+" .tab:first").click()});
//]]>
</script>
->

Silahkan save template Anda, dan silahkan isi sidebar Anda dengan widget apapun. Adapun tulisan yang ada warna merahnya boleh dipake dengan syarat tidak berubah lagi.

Baca juga : Cara Mudah Menghilangkan Link Aktif di Komentar

Cara Mudah Membuat Scrool To Top dengan JQuery

Available link for download