Membuat Tab Menu

Mau membuat Tab menu seperti blog saya : My Blog|Contact|Product|E-Book|Coretan|Cirebon kurang lebih seperti itu gambarx. Klo kata q sih gunax biar pengunjung cepet nyari artikelx gt (hihihihihi)

Ok carax seperti ini

1. Masuk ke blog
2. Klik Edit HTML
3. Centang pada kotak kecil Expand Template Widget
4. Copy kode berikut

<script src='http://h1.ripway.com/pinginbelajar/campuran/menu_tab.js' type='text/javascript'/>

5. Pastekan kode tersebut sebelum kode </head>
6. Copy Kode berikut

div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }

7. Pastekan kode tesebut sebelum kode ]]></b:skin>
8. Save
9. Copy kode berikut

<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #999999;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
<a>Judul 4</a>
<a>Judul 5</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom Judul 1

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom Judul 2

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom Judul 3

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom Judul 4

</div>
</div>


<div class="Page">
<div class="Pad">

Entri data anda di sini yang akan tampil di kolom Judul 5

</div>
</div>


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

10. Login ke Blog kamu pilih gadget
11. Pilih HTML/Java
12. Pastekan Kodex di sini
13. Save dan liat deh hasilx

Artikel Yang Berhubungan