Formulir Kontak

Nama

Email *

Pesan *

Membuat Multi Tab di Sidebar dengan JQuery

Aizzan Blog -- Cara membuat multi tab di sidebar dengan JQuery sangatlah mudah bagi mastah blogger yang sudah berkecimpung di dunia blogger, sekarang kita akan membahas tentang multi tab di sidebar karena yang sebelumnya kita sudah membahas tentang cara mudah membuat menu widget dengan JQuery Accordion. Nah tidak ada salahnya bukan untuk saling berbagi ilmu buat sesama blogger, keuntungan yang kita dapatkan dari penggunaan ini adalah kita dapat menghemat tempat pastinya dengan begitu 2 sampai 3 widget dapat kita jadikan satu dalam multi tab, jika sobat ingin melihat demo bisa di lihat dengan link DEMO ini.

Aizzan Blog:  Membuat Multi Tab di Sidebar dengan JQuery
Aizzan Blog:  Membuat Multi Tab di Sidebar dengan JQuery

Gambar di atas tersebut adalah hasil screenshot yang telah saya ujicoba di blog saya, nah sekarang jika sobat ingin menggunakan multi tab tersebut seperti gambar di atas silahkan mengikuti tutorial di bawah ini :

1. Login ke blogger sobat

2. Pergi ke "Template"

3. Backup dulu template seblumnya untuk berjaga - jaga jika ada kesalahan

4. Klik "Edit HTML"

5. Cari kode ]]></b:skin>, untuk lebih cepat bisa tekan Ctrl + F

6. Masukkan kode di bawah ini tepat di atas kode ]]></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;
}

7. Cari kode </head>, untuk lebih cepat bisa tekan Ctrl + F

8. Masukkan kode pertama di bawah ini tepat di atas kode </head>

    <!-- JavaScript Menu JQuery-->
<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>
<!-- JavaScript Menu JQuery-->

9. Masukkan kode kedua di bawah ini tepat di bawah kode pertama

    <!-- JavaScript Menu JQuery-->
<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>
<!-- JavaScript Menu JQuery-->

10. Simpan template, dan lihat blog sobat

11. Setelah itu atur tempat widget yang akan di buat multi tab

Selamat mencoba dan semoga artikel di atas bisa membantu serta bermanfaat buat sobat, jika ada kritik maupun saran dapat sobat kirimkan melalui kolom komentar di bawah ini dan juga bisa melalui Contact Us.
Previous
Next Post »
0 Komentar