Cara membuat Tab menu pada blogger

Sering kali kita melihat blog orang lain memiliki menu Tab menu diatasnya kayak blog ini (narsis dikit).
Kalian tidak salah datang berkunjung keblog ini, karena sebentar lagi semua pertanyaan itu akan terjawab, gimana caranya? agak ribet sih tapi Ikuti terus tutorial ini, dan anda akan merasa sangat mudah.

1. Login ke Account Blogger Anda

2. Lalu klik "Layout / Tata letak" dan lalu klik "Edit HTML"

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

4. Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>

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;
}


Perhatikan text-text yang dicetak biru,
itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna .
Silahkan ganti sesukamu

5. copy kode dibawah ini, letakkan sebelum kode </head>
<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>

6. save

7. kemudian Pilih "Page Elements" Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.

8. Copy script dibawah ini kedalamny
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 550px;" class="Tabs">
<a href="Link kamu">Menu Satu</a>
<a href="Link kamu">Menu dua</a>
<a href="Link kamu">Menu tiga</a>
<a href="Link kamu">Menu empat</a>
<a href="Link kamu">Menu lima</a>
</div>
</div></form>

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


Perhatikan tulisan yang dicetak warna hijau, itu adalah alamat link menu ganti dengan link yang anda inginkan. Perhatikan juga tulisan berwarna biru itu adalah nama menu yang akan ditampilkan ganti sesukamu.


9. Lalu Save

Selesai sudah, gampangkan