Cara Membuat Tabmenu

Tabmenu adalah daftar menu yang dipasang di bagian sidebar blog. Fungsinya adalah untuk menambah menu blog sehingga blog bisa memuat banyak informasi namun tampilan blog tetap simple dan tetap tertata rapi. Perhatikan tabmenu di sidebar blog saya di samoing kanan. Di situ ada tiga menu yaitu, My Friends, My Linkers, My Album. Nah itulah contoh tabmenu. Nampak sekali bagian sidebar blog ini cukup atraktif.

Sebenarnya tutorial ini tidak untuk mengajari para blogger, namun sebagai catatan penting saya setelah beberapa kali gagal membuat tabmenu ini. Siapa tahu di antara blogger pernah mengalami dan belum bisa membuat tabmenu ini, tutorial ini bisa menjadi tambahan referensi untuk mencoba kembali.

Berikut langkah-langkahnya:

1. Sign in dulu ke blog
2. Klik bar 'Tata letak' atau 'Setting'
3. Setelah tampil, klik 'Edit HTML'.
4. Terus klik tombol 'DOWNLOAD TEMPLATE LENGKAP' di pojok kanan atas yang berwarna biru tebal
5. Kemudian centang kotak kecil di samping tulisan 'Expand Template widget'
6. Setelah itu cari kode di bawah ini

]]></b:skin>

7. Setelah ketemu,pasang kode di bawah ini di atas kode tersebut
   /* Menu Tab View<br> ----------------------------------------------- */<br> div.TabView div.Tabs {<br> padding-top: 0px;<br> height: 24px;<br> overflow: hidden;<br> }<br> <br> /* Menu Utama */<br> div.TabView div.Tabs a {<br> float: left;<br> display: block;<br> width: 95px; /* ukuran lebar menu */<br> text-align: center;<br> height: 24px; /* ukuran tinggi menu */<br> padding-top: 3px;<br> margin-right:1px; /* jarak antarmenu */<br> vertical-align: middle;<br> border: 1px solid #CCC; /* warna border menu */<br> border-bottom-width: 0;<br> font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */<br> font-size: 12px; /* besar hurup menu */<br> letter-spacing: 0px;<br> background-color: #A4A4A4; /* warna latar menu */<br> color: #FFFFFF; /* warna hurup menu */<br> -moz-border-radius-topleft:5px;<br> -moz-border-radius-topright:5px;<br> -webkit-border-top-left-radius:10px;<br> -webkit-border-top-right-radius:10px;<br> }<br> <br> div.TabView div.Tabs a.Active {<br> background-color: #888888; /* warna background menu aktif */<br> color: #FFFFFF;<br> }<br> <br> div.TabView div.Tabs a:hover {<br> background-color: #999999; /* warna background menu hover */<br> color: #FFFFCC;<br> font-weight: bold;<br> }<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:url("http://i563.photobucket.com/albums/ss76/peace_enes/bgtabview.gif"); /* background kotak utama */<br> }<br> <br> div.TabView div.Pages div.Page {<br> height: 100%;<br> padding: 0px;<br> overflow: hidden;<br> }<br> <br> div.TabView div.Pages div.Page div.Pad {<br> padding: 3px 5px;<br> font-size: 11px; /* besar hurup kotak utama */<br> }
8. Selanjutnya cari lagi kode di bawah ini

</head>

9. Setelah ketemu, pasang kode di bawah ini sebelum / di atas kode tadi
<script src='http://sites.google.com/site/ruangsc/enes/tabview.js' type='text/javascript'/>
10. Tahap terakhir adalah memasang kode di bawah ini di sidebar blog Anda
    <form action="tabview.html" method="get"><br> <div id="TabView" class="TabView"><br> <div style="width: 100%;" class="Tabs"><br> <a >Menu 1</a><br> <a >Menu 2</a><br> <a >Menu 3</a><br> </div><br> <div style="width: 99%; height: 225px;" class="Pages"><br> <br> <!--Awal Menu 1--><br> <div class="Page"><div class="Pad"><br> <marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="1" onmouseout="this.start()"><br> <ol type="1"><br> <li>Sub Menu 1.1</li><br> <li>Sub Menu 1.2 </li><br> <li>Sub Menu 1.3</li><br> <br> </ol></marquee><br> </div></div><br> <br> <!--Akhir Menu 1--><br> <br> <!--Awal Menu 2--><br> <div class="Page"><div class="Pad"><br> <marquee direction="up" onmouseover="this.stop()" width="100%" scrollamount="1" onmouseout="this.start()"><br> <ol><br> <li>Sub Menu 2.1</li><br> <li>Sub Menu 2.2</li><br> <li>Sub Menu 2.3</li><br> </ol></marquee><br> <br> </div></div><br> <!--Akhir Menu 2--><br> <br> <!--Awal Menu 3--><br> <center><div class="Page"><div class="Pad"><br> <marquee <br> onmouseover="this.stop()" direction="up" width="100%" scrollamount="1" onmouseout="this.start()"></p> <p><ol></p> <p><li> Sub Menu 3.1</li></p> <p><li> Sub Menu 3.1</li></p> <p><li> Sub Menu 3.1</li><br> </ol></marquee><br> </div></div></center><br> <!--Akhir Menu 3--><br> <br> </div></div></form><br> <br> <script type="text/javascript">tabview_initialize('TabView');</script><br> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://abulonline.blogspot" target="_blank" title="Tabview Widget">get this widget</a></div>

Jika sudah berhasil, silahkan Anda memodifikasi dan mengubah data sesuai dengan kebutuhan. Jika belum, cobalah diperiksa kembali kode-kodenya kali aja ada yang kurang atau mungkin template Anda tidak cocok. Tapi yang pasti jangan putus asa karena saya juga sedikit modeng (maksudku momet dan jilemet) waktu mempelajari materi ini.

Selamat mencoba dan sukses selalu!

Tutorial : Abulladi Elqail

Read More