Cara Membuat TabView Widget

Pusing karena widget yang kebanyakan sehingga ruang yang tersedia di sidebar blog kita menjadi sedikit? Saya punya solusi untuk mengatasi maslaah itu, yaitu dengan membuat menu Tab View. Tab View ini (dikenal juga dengan istilah Slide Show Menu) Widget ini sangat bermanfaat karena dapat menggabungkan beberapa widget dalam 1 widget, baik itu Recent Post, Recent Comments, Blogroll, Popular Post, dll. Contoh Tab View ini bisa kalian lihat pada Widget Header saya yang berisi menu: Chat Zone, Popular dan NewPost, NewComment, dll.

Untuk membuat Tab View ini dapat kita pelajari dari situs www.o-om.com, trik-tips.blogspot.com, suprisdiantoko.com, ruangsc.blogspot.com dan situs-situs lain yang mengupas masalah ini. Tapi jika malas search and research di web-web lain, ikuti saja langkah-langkah membuat Tab View berikut:

Langkah Pertama

* Login ke akun Blogger kamu.

* Dari halaman dashboard, pilih Edit HTML.

* Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog anda. Tekan Control F untuk mencarinya.

* Kopikan kode CSS berikut dan letakkan di atas kode ]]></b:skin> .

/* 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: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb5VaSQYTV9HdRVDI1dpcfUoA8joRwcyZX4ESq8N44B9K1VbdB68xv4EFF_eKT1HZwBleoAU8qug0vcOx-HDumRq6UU6SHbzqvIT5tVyUoWsqlqqYwlW5cJDyBI42LdC9sdOrDtjovgmw/s0/bgtabview.gif.png"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Pada bagian yang berwarna biru, bisa kita ubah sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis hurup.
* Setelah itu letakan script berikut di bawah ]]></b:skin>

<script src="http://ic-project.googlecode.com/files/tabview.js" type="text/javascript"/>

* Kemudian Save/Simpan Template

Langkah Kedua

* Buat/Tambah gadget baru di tab Elemen Halaman.
* Pilih gadget HTML/Javascript.
* Masukan script berikut ke dalam gadget anda.

<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>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; 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.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.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.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript" src="http://ic-project.googlecode.com/files/tabview-tabs.js"></script>

Pada tulisan yang berwarna Biru tebal dapat kita ubah disesuaikan dengan keinginan dan kreasi kita. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kita gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kita. Begitupun dengan judul Menu dan Isi Menu dapat kita buat sendiri sesuai keinginan.
Selain itu kita bisa menambahkan menu-menu lain (lebih dari 4) asalkan lebar sidebar blog kita mencukupi. Atau bisa juga mengakalinya dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kita.

* Langkah teakhir sangat mudah yaitu : Klik Simpan/Save.  Setelah itu anda kunjungi halaman blog anda untuk melihat hasilnya sesuai dengan keingina anda atau tidak.

Sangat mudah kan??? Hahahaha....

Ok, cukup sekian penjelasan singkat cara membuat tab view dari saya, jika ada yang kurang jelas atau kurang di pahami, anda bisa meninggalkan komen di bawah artikel ini.

Terima kasih dan sampai bertemu di artikel berikutnya.

Sumber : berbagai sumber

Share this artikel:

Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru.