Cara Membuat Menu Tab View Pada Blogspot

Assalamualaikum, kali ini saya ingin memberi tips cara membuat Menu Tab View pada Blogspot. Anda bisa membuat Menu Tab View untuk menghemat tempat pada space blog seperti yang sering muncul pada blog kebanyakan, misalnya Tab View Terbaru, Komentar, dan Terpopuler. Ya, dengan cara ini space blog kita akan lebih hemat sehingga masih bisa dipasang widget lain yang mungkin kita butuhkan. Selain itu juga bisa membuat tampilan blog kita lebih terkesan keren dan minimalis. Pastinya anda sudah pernah lihat semua kan menu tab view ini? Jika belum, coba lihat salah satu contohnya dibawah:

 

Lalu, bagaimana cara membuatnya? Apakah sulit? jawabannya tentu tidak.

Yuk, kita simak cara membuat Menu Tab View pada Blogspot berikut ini :

1. Login dulu ke akun blogger anda.

2. Langsung menuju ke menu Template

3. Pilih Edit HTML

4. Jangan lupa centang Expand Widget Template

5. Cari kode ]]></b:skin> , kemudian letakkan kode dibawah ini tepat DIATAS 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: 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 huruf 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;
}
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://i864.photobucket.com/albums/ab206/kibagus/th_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: 3px 5px;
font-size: 12px; /* besar huruf kotak utama */
}

Kemudian letakkan lagi kode dibawah ini tepat DIBAWAH kode  ]]></b:skin>

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

Kemudian simpan template anda.

Sekarang langkah selanjutnya, langsung menuju ke menu Layout (tata letak) pada blog anda

Klik Add Gadget dan pilih HTML/JavaScript.

Lalu copy paste kode dibawah ini:

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.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-->

</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://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

Simpan dan lihat Hasilnya.

Keterangan :

Tulisan berwarna merah merupakan keterangan dari masing-masing kode. Silahkan modifikasi/atur nilainya sesuai keinginan anda.

SELAMAT MENCOBA