002. Cara Membuat Horizontal Menu di Blogger / Blogspot

Lama nggak nulis soal tutorial, sekaranglah saatnya posting. Kebetulan ada pertanyaan via email. Yakni, bagimana cara membuat horizontal menu di blogger / blogspot. Seperti di bagian atas blog ini (Home, About, dst). Cara membuat menu horisontal di blogger / blogspot sebenarnya sudah sering diulas di banyak blog. Tapi, tak ada salahnya saya munculkan lagi.

Langsung saja, begini caranya:

1. Masuk 'Layout'----> 'Edit HTML', centang 'Expand Widget Template'

2. Cari kode ]]>

3. Letakkan skrip berikut ini di atasnya

/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

4. Cari kode:

5. Kopi dan paste kode berikut ini di atasnya:

Read more: http://wawanwae.blogspot.com/2009/10/cara-membuat-horizontal-menu-di-blogger.html#ixzz0mhmi3FrA

6. Simpan. Selesai.

Selamat mencoba. Saya mau ke kantor pos nih, ambil earning Adsense. Enyak...enyak...enyak!!!

Sumber: http://wawanwae.blogspot.com/2009/10/cara-membuat-horizontal-menu-di-blogger.html#ixzz0mhlzMPI7