Cara Membuat Menu Tab View Pada Blog

Jumpa kembali sobat blogger di blog ini. Kali ini saya cuman pengen bagi-bagi info dan pengetahuan saja tentang yang ingin menambah asesoris blog sobat sekaligus menghemat widget. selain nampak elegan juga dapat mempercepat loading blog sobat dengan mengurangi jumlah widget yang akan sobat tampilkan sehingga semua keinginan sobat agar selalu tampil lengkap dengan penambahan Tab Menu View di bawah ini. Ya mungkin ada yang pernah dapat atu giman aja juga boleh. Yang pengting kan saling berbagi aja

Contohnya ada dibawah ini nich :

Caranya adalah sebagai berikut ini :

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"

2. Kemudian cari kode ini ]]></b:skin>

3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */


}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

6. Kemudian "Di save Ya"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

- Angka2 atau text yang berwarna Merah (350px) adalah ukuran tinggi dan lebar tabview.

- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).

- Kode yang berwarna Orange adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.

- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berwarna Hijau. tambahkan menu tersebut dibawahnya.

Semoga sukses dan berhasil