Tutorial Keren Cara Membuat Widget Tab View menu versi 2 (abu farhan)

Akhirnya setelah beberapa lama mencoba membuat tab menu versi abu farhan. kelebihan tab ini dari sebelumnya yaitu pada versi ini kita dapat menyisipkan widget yang telah disediakan oleh blog itu sendiri, misalnya seperti Popular Post, Blog Arcive, adsense dan lain-lain.contohnya bisa aga liat diblog ini....
baik mungkin saya langsung aja memberikan langkahnya cukup mudah koq asal sesuai dengan intruksi dibawah.

Langkah awal, pasang kode CSS dibawah ini dengan meng-copy paste kode di bawah tepat di atas ]]></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;
}

Keterangan: CSS diatas adalah untuk membentuk tampilan widget, jadi kalian bisa mengedit sesuai dengan keinginan kalian

Setelah itu, kita akan memasang script JQuery copy dan paste kode berikut tepat di atas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

keterangan: Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode diatas.

Yang terakhir, ini untuk menampilkan tab menu ini ke dalam blog kalian yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Keterangan: coba kalian perhatikan kode yang bewarna merah
starttab         : nomor widget yang akan masuk dalam tab pertama
endtab          :  jumlah widget yang akan masuk ke dalam Tab Menu
sidebarname : nama id dari kolom yang akan di jadikan Tab Menu.


Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu kalian bisa lihat gambar berikut:

 Keterangan:

Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar  "endtab=3".
Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.



Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

selesai deh....mudah kan apabila ngikutin sesuai yang diatas mudah-mudahan berjalan normal...
apabila ada pertanyanya silahkan posting dibawah...akan ane bantu sebisa ane....

>>Selesai baca jangan lupa jempol dan komentarnya y....