HORISONTAL MENU

Hallo sobat blogger pemula, salam sejahtera selalu.
Pernahkah sobat pingin buat menu horisontal (kayak di blog ini) tapi berujung jengkel karena tidak segera jadi ? Tenang, saya juga. Kan, kita sesama blogger pemula, jadi senasiblah.
OK, kalo sobat pingin paket jadi tanpa pusing meramu, silakan pake punya saya.
Begini caranya :
1. Masuk edit HTML
2. Klik download template lengkap
3. Klik kotak expand template widget
4. Copy kode di bawah ini

/* 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: 940px;

float: left;

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;

}

5. Letakkan di atas kode ini

]]></b:skin>

6. Copy kode berikut

<div id="bg_nav">

<div id="navleft">

<div id="nav">

<ul><li><a href="http://amin-wahyudi.blogspot.com/" title=" TIPS PRAKTIS ">UNTUK BLOGGER PEMULA</a></li>

<li><a href="http://pojoksluke.blogspot.com/" title=" LIHAT DARI JENDELA ">DUNIA PENDIDIKAN</a></li>

<li><a href="http://yudyani.blogspot.com/" title=" TAMBAH WAWASAN ANDA DENGAN PERBANDINGAN ANTARA JUDAISME DAN KRISTEN ">MIMBAR KRISTEN </a></li>

<div id="dropmenudiv" onmouseout="dynamichide(event)" onmouseover="clearhidemenu()" style="visibility: hidden;">

</div>

</ul>

</div>

</div>

</div>

7. Letakkan di atas kode ini

<div id='content-wrapper'>

8. Save

Catatan : tulisan merah sesuaikan dengan kebutuhan sobat.
Sudah jadi, silakan dilihat.