CARA MEMBUAT MENU HORIZONTAL

Cara Membuat Menu Horizontal, Tab Menu Horizontal, atau Static Page di Blogger Blogspot.

Rasanya jika blog tidak ada menu navigasi di header yang fungsinya dapat menyimpan content yang kita rasa penting untuk di klik dan di telusuri akan kurang enak dilihatnya, bagaimana jika menurut Anda?

Memangnya seperti apa sih horizontal menu atau menu navigasi horizontal itu? Untuk lebih jelas lihat contoh gambar dibawah ini:
Dalam bahasa blognya, menu horizontal atau tab menu horizontal ini biasa disebut sebagai static page. Dengan kehadiran update dari blogger.com, kini membuat static page menjadi lebih mudah.

Kita hanya perlu login ke blogger.com, kemudian pilih posting, klik edit pages, selanjutnya tinggal kita buat dech tuch static page atau horizontal menu. Akan tetapi, static page yang dibuat dengan cara tersebut akan menghasilkan halaman khusus yang benar-benar sebagai static page dan tidak terdapat kotak pesan komentarnya. Artinya, halaman statis yang kita buat bukan berasal dari halaman posting. Perbedaanya, jika kita membuat menu static page bukan dari halaman posting berarti halaman statis atau static page tersebut tidak memiliki kotak komentar.

Saya lebih senang membuat static page menggunakan dua cara yaitu: static page tanpa kotak komentar dan static page dengan kotak komentar, tujuannya ya hanya karena menurut Saya dalam static page untuk blog Saya boleh ada yang bisa di komentari dan juga ada yang tidak perlu dikomentari seperti halaman Home, About,...

Jika Anda ingin membuat static page atau tab menu horizontal yang sebagian menu-nya terdapat kotak komentarnya juga, barangkali ingin mengikuti langkah-langkah berikut:

1. Login ke blogger.com
2. Dari dashboard klik design, kemudian pilih Edit HTML
3. Centang Expand Widget Template, selanjutnya copy HTML code berikut:

• Home
• About
• Contact
• Longer Link Text
• Link 5
• Link 6
• Link 7

Ket:
=> Ganti url: http://diarykudiblog.blogspot.com/ dengan url hompage blog Anda, dan tanda # dengan alamat url yang Anda inginkan
=> Ganti tulisan: Longer Link Text, Link 5, Link 6, Link 7 dengan judul link yang Anda masukan;
4. Simpan dibawah kode:

atau diatas kode:

5. Selanjutnya copy lagi CSS Code berikut:

/*- Menu Tabs 6--------------------------- */

#tabs6 {
font: bold 11px/1.5em Verdana;
float:left;
width:100%;
background:change-background;
line-height:normal;
}
#tabs6 ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs6 li {
display:inline;
margin:0;
padding:0;
}
#tabs6 a {
float:left;
background:url("images/tableft6.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs6 a span {
float:left;
display:block;
background:url("images/tabright6.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs6 a span {float:none;}
/* End IE5-Mac hack */
#tabs6 a:hover span {
color:#FFF;
}
#tabs6 a:hover {
background-position:0% -42px;
}
#tabs6 a:hover span {
background-position:100% -42px;
}
6. Simpan diatas kode: ]]>, simpan template dan lihat hasilnya.

HTML Code dan CSS Code diatas adalah hasil dari CSS Menu Generator dari CSSPortal, Anda juga dapat membuat tab menu horizontal dengan cara mengambil CSS dan HTML Code yang disediakan oleh CSSPortal di http://cssportal.com/. Disana terdapat banyak layout pilihan yang dapat Anda pilih sesuai dengan keinginan.

Semoga bermanfaat.