Membuat tabview widget pada sidebar

Blogging bagi sebagian orang di anggap menyenangkan akan tetapi bagaimana bila dalam sidebar blog kita kekurangan tempat untuk meletakkan berbagai aksesori blog yang jumlahnya terbilang banyak bahkan ratusan dan dalam blog itu sendiri tempatnya relatif sempit untuk berbagai aksesori. Mungkin bagi para webmaster tidak masalah akan tetapi bagaimana dengan kita yang masih awam dengan dunia blog/website? Jawabannya sangat jelas Bingung, pusing dll.
Untuk mengatasi masalah kekurangan tempat pada sidebar banyak sekali cara akan tetapi pada edisi ini saya akan menunjukkan salah satu cara pembuatan widget sidebar yang mirip dengan menu-menu yang berjajar rapi di atas blog yang di sebut dengan tabview widget.
Cara ini sebenernya saya dapat dari browsing internet melalui fasilitasnya eyang google yang memberi tau saya cara ini ada di blognya Kang Enes yang membahas cara ini. Tapi bila sobat males nyari blognya Enes sobat bisa langsung mengetahuinya di blog saya sama aja kok.
Baik kita mulai aja dan silahkan sobat ikuti langkah berikut ini :

Langkah Pertama
Silahkan sobat login dulu ke Blogger. Pada Dasbor pilih menu Edit Html dan jangan mencentang kotak kecil di samping tulisan Expand Template Widget karena akan muncul kode-kode yang memusingkan kepala sobat. Lalu cari kode ]]></b:skin> pada kode template milik sobat. Tekan Ctrl + F lalu masukkan kode di atas, jika sudah ketemu copy dan paste kode CSS di bawah ini di atas kode tadi.

/*--- Menu Tab View --- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/*--- Menu Utama ---*/
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px;/*--- ukuran lebar menu ---*/
text-align: center;
height: 24px;/*--- ukuran tinggi menu ---*/
padding-top: 3px;
margin-right: 4px;/*--- jarak antarmenu ---*/
vertical-align: middle;
border: 1px solid #CCC;/*--- warna border menu ---*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif;/*--- jenis hurup menu ---*/
font-size: 12px;/* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4;/*--- warna latar menu ---*/
color: #FFFFFF;/*--- warna hurup menu ---*/
-moz-border-radius-topleft:10px;
-moz-border-radius- topright:10px;
-webkit-border-top-left- radius:10px;
-webkit-border-top-right- radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: # 888888;/*--- warna background menu aktif ---*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: # 999999;/*--- warna background menu hover ---*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC;/*--- warna border kotak utama ---*/
overflow: hidden;
background:url(" http://i563.photobucket.com/albums/ss76/peace_enes/bgtabview.gif");/*--- background kotak utama ---*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3 px 5px;
font-size: 12px;/*--- besar hurup kotak utama ---*/
}

Yang ada tulisan tanda keterangan bisa di ubah sesuai keinginan sobat

Selanjutnya letakkan kode di bawah ini di bawah kode ]]></b:skin>

<script src="http://sites.google.com/site/myscriptku/script/viewtab.js" type="text/javascript"/>

Klik tombol bertuliskan Simpan Template

Langkah Kedua
Klik menu Element Halaman selanjutnya klik tulisan Tambah Gadget lalu pilih Html/JavaScript tunggu beberapa saat, setelah itu copy dan paste kode berikut kedalam kotak :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1"> Menu 1 </a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width:99%;height:200px;" class="Pages">

<!-- Awal Menu 1 -->
<div class="Page">
<div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.3. dst<br/>
</div></div>
<!-- Akhir Menu 1 -->

<!-- Awal Menu 2 -->
<div class="Page">
<div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.3. dst<br/>
</div></div>
<!-- Akhir Menu 2 -->

<!-- Awal Menu 3 -->
<div class="Page">
<div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.3. dst<br/>
</div></div>
<!-- Akhir Menu 3 -->
</div></div>
</form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;">
<a href="http://ruangsc.blogspot.com/2009/07/cara-membuat-tab-view-widget-pada.html" target="_blank" title="Tabview Widget">Widget by SC Community</a></div>

Tulisan Keterangan Menu 1, Menu, Isi Menu, dst Bisa di ubah sesuai keinginan sobat, selain itu sobat juga bisa menambah menu lain selagi sidebar blog sobat mencukupi, jika tidak cukup sobat bisa merubah ukuran lebar menu pada code CSS yang sobat letakkan di atas kode ]]></b:skin> pada HTML blog sobat dan kode yang sobat letakkan pada sidebar blog sobat.

Simpan hasil perubahan sobat dan lihat hasilnya.

Selesai, dan selamat mencoba!

Cape' dech ngetik terus

Tweet