Cara Membuat Menu Tab View Yang Keren

Pembahasan posting kali ini khusus untuk anda yang ingin

"Membuat Menu Tab View" seperti yang anda lihat pada

gambar previewnya di bawah ini :

Cara membuatnya sedikit agak rumit, jadi ikuti

langkah cara membuatnya dengan teliti :

1.   Setelah login ke blog anda.
      langsung klik Edit HTML.
2.   Centang kotak 'Expand Widget Templates'
3.   Cari kode ]]></b:skin>
4.   Letakkan kode berikut di atasnya :

/* Menu Tab View<br /> -------------------------------------------------- */<br /> <br /> div.TabView div.Tabs {widht:95%;<br /> padding-top: 0px;<br /> height: 30px;width: 300px;<br /> overflow: hidden;}<br /> <br /> /* Menu Utama<br /> ---------------- */<br /> <br /> div.TabView div.Tabs a {<br /> float: left;<br /> display: block;<br /> width: 100px; /* ukuran lebar menu */<br /> text-align: center;<br /> height: 40px; /* ukuran tinggi menu */<br /> padding-top: 5px;<br /> margin-right:4px; /* jarak antarmenu */<br /> vertical-align: middle;<br /> border: 1px solid #CCC; /* warna border menu */<br /> border-bottom-width: 0;<br /> margin:0px;<br /> padding: 4px 0;<br /> font-family:'Arial',sans-serif; /* font hurup menu */<br /> font-size:12px;<br /> font-weight:bold; /* besar hurup menu */<br /> text-transform: uppercase;<br /> background-color: #0000FF; /* warna dasar menu */<br /> color: #FFFFFF; /* warna hurup menu */<br /> -moz-border-radius-topleft:12px;<br /> -moz-border-radius-topright:12px;<br /> -webkit-border-top-left-radius:12px;<br /> -webkit-border-top-right-radius:12px;<br /> }<br /> div.TabView div.Tabs a.Active {<br /> background-color: #FFFF00; /* warna dasar menu aktif */<br /> color: #000000;<br /> }<br /> div.TabView div.Tabs a:hover {<br /> background-color: #888888; /* warna dasar menu hover */<br /> color: #FF9900;<br /> font-weight: bold;<br /> }<br /> /* Kotak Utama */<br /> div.TabView div.Pages {<br /> clear: both;<br /> border: 1px solid #CCC; /* warna border kotak utama */<br /> overflow: hidden;<br /> background:#FFFFFF; /* warna dasar kotak utama */<br /> }<br /> div.TabView div.Pages div.Page {<br /> height: 100%;<br /> padding: 5px;<br /> overflow: hidden;<br /> }<br /> div.TabView div.Pages div.Page div.Pad {<br /> padding: 5px 2px;<br /> font-size: 13px; /* besar hurup kotak utama */}<br /><br />

5.   Cari lagi kode  </head>
6.   Letakkan kode berikut di atasnya :
      Setelah itu simpan template anda.

<script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js" type="text/javascript">
</script>

7.   Langkah terakhir masuk ke Rancangan.
      Tambah Gadget, masukkan kode berikut
      ke dalam kontennya.

<form action="tabview.html" method="get"><div id="TabView" class="TabView"><div style="width: 100%;" class="Tabs">Disini letakkan kode untuk menu tab 1 <br /> </div><div style="width: 99%; height: 200px;" class="Pages"><!--Awal Menu 1--><br /> <div class="Page"><div class="Pad">Disini letakkan kode untuk menu tab 2 </div></div><!--Akhir Menu 1--><br /> <!--Awal Menu 2--><br /> <div class="Page"><div class="Pad">Disini letakkan kode untuk menu tab 3 </div></div><!--Akhir Menu 2--><br /> <!--Awal Menu 3--><br /> <div class="Page"><div class="Pad">Disini letakkan kode untuk menu tab 4 </div></div><!--Akhir Menu 3--><br /> </div></div></form><script type="text/javascript">tabview_initialize('TabView');</script><br /> <div style="font-size:90%; text-align:left;"><a href="http://syamsudinnamaku.blogspot.com/2011/03/cara-membuat-menu-tab-view-yang-keren.html" target="_blank" title="Mau Pasang Widget ini, klik disini</a></div>

CATATAN :

*   Pada kode-kode di atas, yang anda perlu ubah
    adalah 'width dan height'-nya, sesuaikan
    dengan area sidebar blog anda.

*   Ubah juga 'warna'-nya, sesuaikan dengan
    selera anda. Lihat kode warnanya di sini.

Selamat mencoba,
Semoga anda berhasil.
Sukses selalu, good luck !

JANGAN LUPA BERIKAN KOMENTAR ANDA
UNTUK PERKEMBANGAN BLOG INI KE DEPAN