Cara Membuat Menu Horizontal yang Simpel

Jika sobat ingin membuat menu horizontal untuk menampilkan beberapa kumpulan artikel maka cobalah trik yang satu ini. Menu horizontal dapat sobat tampilkan di header maupun di footer. Untuk itu langsung saja kita buat menu horizontalnya...

1. Login ke blogger.
2. Masuk ke Rancangan dan klik pada Edit HTML
3. Klik Expand widget template
4. Back up dulu template sobat
5. Cari kode ini: ]]></b:skin>
6. Kopi kode dibawah ini dan paste diatas kode ]]></b:skin>

/* -- Horizontal Menu Blogtrikdantips -- */
#horizontal-menu-blogtrikdantips {
float:left;
width:100%;
font-size:12px;
border-bottom:1px solid #2763A5; /* Bottom Line */
line-height:normal;
}

#horizontal-menu-blogtrikdantips ul {
margin:0;
padding:10px 10px 0 50px; /*Menu Position */
list-style:none;
}

#horizontal-menu-blogtrikdantips li {
display:inline;
margin:0;
padding:0;
}

#horizontal-menu-blogtrikdantips a {
float:left;
background: url("http://2.bp.blogspot.com/-ZHmnP8zb4gw/T5LHtBeFg8I/AAAAAAAADIs/rfQqFhpwuj4/s320/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#horizontal-menu-blogtrikdantips a span {
float:left;
display:block;
background: url("http://1.bp.blogspot.com/-bjmP5GpAPMw/T5LH9OMcjJI/AAAAAAAADI4/dlVjPxEUHLA/s320/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#horizontal-menu-blogtrikdantips a span {float:none;}
#horizontal-menu-blogtrikdantips a:hover {
background-position:0% -42px;
}

#horizontal-menu-blogtrikdantips a:hover span {
background-position:100% -42px;
}

7. Jika sobat ingin memasang menu tersebut dibawah header maka cari kode <div id="content-wrapper">
8. Kopi kode dibawah ini dan paste sebelum kode <div id="content-wrapper">

<div id="horizontal-menu-blogtrikdantips">
<ul>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Contact</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Profile</span></a></li>
<li><a href="http://blogtrikdantips.blogspot.com"><span>Gallery</span></a></li>
</ul>
</div>

9. Ganti url diatas dengan url menu sobat, serta ganti juga judul menu. Untuk menambah menu baru sobat tinggal tambahkan tag lt
10. Simpan template sobat lalu lihat hasilnya!

Untuk melihat DEMO klik DISINI