Cara Membuat Menu Navigasi Horizontal Di Blog

Selamat Pagi Sobat..
Sebelum berangkat ke sekolah, saya menyempatkan diri untuk memposting Cara Membuat Menu Navigasi Horizontal Di Blog, pasti semua sudah pada tau apa itu menu navigasi, tak heran, karena sudah banyak yang memposting nya.. :D
tapi ada yang berbeda pada postingan saya disini, yaitu cara pengeditan HTML nya,
Menu ini baru saja saya modifikasi di blog saya.. :D
Dan akhirnya berhasil juga saya edit.. :P

Jika sobat merasa tertarik dengan menu navigasi di atas, silahkan baca sampai dengan selesai. Namun perlu saya tegaskan di sini bahwa mungkin hasil yang di dapat bisa berbeda dengan contoh diatas karena faktor desain template yang berbeda-beda, oleh kerena itu ada kemungkinan sobat harus sedikit merubah kode yang saya berikan agar cocok dengan template sobat.

Silahkan sobat ikuti cara dibawah ini

Sebelum nya sobat simpan dulu gambar nya,

http://i1231.photobucket.com/albums/ee519/noochii/headermenu.png

http://i1231.photobucket.com/albums/ee519/noochii/tableft6.png

http://i1231.photobucket.com/albums/ee519/noochii/tabright6.png

Kemudian Simpan Gambar nya ke imagehosting yang biasa sobat gunakan contohnya www.Photobucket.com

Sebenarnya sobat boleh menggunakan 3 gambar diatas, karena saya takut tidak sengaja menghapusnya, jadi sebaiknya sobat menggunakan alamat sobat sendiri. biar lebih aman.. :D

Berikut adalah cara" penginstallan nya

Pertama
Login dulu ke account blogger sobat
Klik menu Design/Rancangan
Kemudian klik tab Edit HTML
Jangan Lupa di centang dahulu Expand Widgetnya
Cari code ]]></b:skin>  Dan pastekan code dibawah ini, Diatas code ]]></b:skin>

/* Menu */
#tabs6 {
float:left;width:100%;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/headermenu.png") no-repeat center top;
font-size:13px;
line-height:normal;
border-bottom:1px solid #666;
}

#tabs6 ul {
margin:0;padding:10px 10px 0 5px;
list-style:none;
}

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

#tabs6 a {
float:left;
background:url("http://i1231.photobucket.com/albums/ee519/noochii/tableft6.png") no-repeat left top;
margin:0;padding:0 0 0 4px;text-decoration:none;
}

#tabs6 a span {
float:left;display:block;background:url("http://i1231.photobucket.com/albums/ee519/noochii/tabright6.png") no-repeat right top;
padding:5px 15px 4px 6px;
color:#fff;
font-weight:bold;
}

/* Commented backslah Hack hides rule from IE5-Mac \*/

#tabs6 a span {
float:none;
}
/* End IE5-Mac hack */

#tabs6 a:hover span {
color:#C2FB77;
}

#tabs6 a:hover {
background-position:0% -42px;
}

#tabs6 a:hover span {
background-position:100% -42px;
}

#tabs6 #current a {
background-position:0% -42px;
}

#tabs6 #current a span {
background-position:100% -42px;
}

Setelah sudah, cari code <div id='content-wrapper'>
Paste lagi code dibawah ini di bawah code <div id='content-wrapper'>

<div id='tabs6'>
<ul>

<!-- Silahkan ganti tanda pagar (#) dengan link milik anda -->

<li id='current'><a href='/' title='Home'><span>Home</span></a></li>
<li><a href='http://www.facebook.com/noochii' target='_blank' title='About Me'><span>About Me</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' title='Edit'><span>Edit</span></a></li>

<li><a href='http://#' target='_blank' title='Edit'><span>Edit</span></a></li>
</ul>
</div><!-- #tabs6 end -->

Setelah sudah semuanya, save template sobat..
akhirnya selesai juga postingan nya, huh
waktunya mandi dan siap-siap untuk berangkat sekolah.. :)