Cara membuat menu navigasi horisontal keren

Assalamualaikum  mengawali postingan di awal bulan Pebruari ini aku ingin shere ama sobat so pasti yang suka bereksperiment dengan Css code ..sperti postingan ku kali ini yang akan memberikan tutorial cara membuat Menu Navigasi Horisontal ,untuk DEMO dan contoh nya coba lihat disini ,gimana keren khan....yang ngak bilang keren ngak jadi dech Karina suguhkan kopy ha ha ha aha ....oke kita langsung ke TKP..

• Login ke blogger.com
• masuk rancangan
• Edit HTML jangan lupa untuk menjaga jika terjadi kesalahan Download lengkap dulu template
• Cari kode  ]]></b:skin> lalu taruh kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kode Css nya :

---

/*modivikasi menu=>http://karinafotocollection.blogspot.com*/

#NavbarMenu{background:#fffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; text-transform:capitalize border-bottom:1px solid #666;}

#NavbarMenu{width:700px; float:left; margin:0; padding:0;}

#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}

#nav{margin:0; padding:0;}

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

#nav li{list-style:none; margin:0; padding:0; text-shadow:0px 0px 0px #000;}

#nav li a, #nav li a:link, #nav li a:visited{color:red; display:block;border:1px solid red; text-transform:capitalize; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}

#nav li a:hover, #nav li a:active{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/CorporateButtonBackgroundOver.gif) repeat top left; color:#088A08; padding:9px 15px 9px; text-decoration:none;}

#nav li li a, #nav li li a:link, #nav li li a:visited{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/baquette_beige_diamond_lip_color.jpg) repeat top left; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia,;}

#nav li li a:hover, #nav li li a:active{background:#fff url(http://i1136.photobucket.com/albums/n499/Mahfid_Mayanto/search.gif) repeat top left; color:black; padding:3px 10px;}

#nav li{float:left; padding:0;}

#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}

#nav li ul a{width:140px;}

#nav li ul ul{margin:-24px 0 0 170px;}

#nav li:hover ul ul, #nav li:hover ul*ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}

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

#nav li:hover, #nav li.sfhover{position:static;}

---

• Lalu save template

Nah jika sudah di save selanjutnya tinggal memasuk kan menu navigasinya  Caranya :

• masuk rancangan 
• tambah gadget lalu pilih  HTML Java script lalu masukkan kode di bawah ini

<ul id='nav'>

<li><a href='http://karinafotocollection.blogspot.com/' title='home'>Home</a> </li>

<li><a href='http://karinafotocollection.blogspot.com/'>Join Us</a>

<ul>

<li><a href=’ ‘>Blog ku</a> </li>

<li><a href=’ ‘>Blog tutorial </a> </li>

</ul> </li>

<li><a href='#' title='other'>Modivikasi blog</a>

<ul>

<li>

<a href=’#’>mouse over</a></li>

<li>

<a href=’#’>menu horisontal</a></li>

<li>

<a href=’#’>menu vertikal</a></li>

</ul>

<li><a href='#' title='other'>PHOTOSHOP</a>

<ul>

<li>

<a href=’#’>SOFWER</a></li>

<li>

<a href=’#’>TUTORIAL</a></li>

<li>

<a href=’#’>BRUSHES</a></li>

</ul>

<li><a href='#' title='other'>WALPAPER</a>

<ul>

<li>

<a href=’#’>SELEBRITIS</a></li>

<li>

<a href=’#’>FOOTBALL</a></li>

</ul>

<li><a href='#' title='other'>DOWNLOAD FREE MP3</a>

<ul>

<li>

<a href=’#’>WAB SITE 1</a></li>

<li>

<a href=’#’>WAB SITE 2</a></li>

<li>

<a href=’#’>WAB SITE 3</a></li>

<li>

<a href=’#’>WAB SITE 4</a></li>

<li>

<a href=’#’>WAB SITE 5</a></li>

<li>

<a href=’#’>WAB SITE</a></li>

</ul>

<li><a href='#' title='other'>BANNER SAHABAT</a></li>

</li></li></li></li></ul>

---

PENTING DI INGAT :ganti teks yang berwarna merah dengan alamat blog kamu sendiri

SELAMAT MENCOBA