Cara membuat Navigasi menu horisontal

U

ntuk membuat navigasi menu horisontal kita bisa download di berbagai situs yang menyediakan berbagai bentuk navigasi menu horisontal dari yang paling sederhana sampai yang paling rumit ,akan tetapi kita kesulitan mencari warna yang sesuai dengan thema template kita, nah sebagai solusinya kang mahfid akan mencoba share tentang cara membuat navigasi menu horisontal dengan beberapa pilihan warna untuk contoh Navigasi menu horisontal nya kurang lebihnya seperti contoh di bawah ini

Nah gimana setelah melihat contoh contoh di atas masih ingin tahu cara membuatnya ,oke kita langsung aja menuju ke T..K..P

1. Login dulu ke blogger.com
2. Setelah masuk dasboard pilih Edit HTML jangan lupa download lengkap dulu template sobat untuk menjaga kemungkinan sobat gagal melakukan tutorial ini 
3. Cari kode ]]></b:skin> taruh kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya

   #topbar{background:url(http://karinafotocollection-project.googlecode.com/files/nav%20menu%20biru.png) repeat-x top left;width:980px;border-top:1px solid #000;margin:0 auto;padding:0 auto}
   #top-wrapper{width:980px;height:30px;margin:0 auto}
   .clearit{clear:both;height:0;line-height:0.0;font-size:0}
   #top{width:100%}
   #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
   #top a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:none;color:#fff;padding:6px 10px 8px}
   #top a.arrow{background-image:url(http://3.bp.blogspot.com/-xBsbKIUfF0I/TyFxf1pJQiI/AAAAAAAAExI/S6g7p0oiO6A/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:6px 24px 8px 10px}
   #top li{float:left;position:static;width:auto}
   #top li ul,#top ul li{width:170px}
   #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:4px 10px}
   #top li ul{z-index:100;position:absolute;display:none;background:#054d58;padding-bottom:0;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=87);-moz-opacity:.87;opacity:.87}
   #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{color:#f5c623}
   #top li:hover ul,#top li.hvr ul{display:block}
   #top li:hover ul a,#top li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
   #top li ul li.hr{border-bottom:1px solid #02363e;display:block;font-size:1px;height:0;line-height:0;margin:0}
   #top ul a:hover{background-color:#0f7281!important;color:#f5c623!important;text-decoration:none}
   img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
   img.label_thumb:hover{background:#f7f6f6}
   .label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
   ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
   .headline-wrapper{background:url(http://3.bp.blogspot.com/-4zZsLkFaj0g/T0OowyCVBnI/AAAAAAAAFdY/SMsuUDyvIl4/s1600/headlines-bg.png) repeat-x;width:980px;height:22px;border-bottom:1px solid #022f36;margin:0 auto;padding:0 auto}
   .headline{width:980px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
   .headline a:hover{color:#eace12;text-decoration:underline}
   .navbar{width:100%;margin:0 auto;padding:0 auto}
   .nav{background:url(http://1.bp.blogspot.com/-hmL4IGrj5yw/Ty7DHGrKIdI/AAAAAAAAFGM/DWr2l6ZBCQY/s1600/submeny-bg.gif) repeat-x top left;width:980px;height:30px;margin:0 auto;padding:0 auto}
   .nav ul{padding-left:0;color:#022e35;text-transform:capitalize;list-style-type:none;font:bold 12px Arial, Helvetica,Arial,Verdana,sans-serif;margin:0}
   .nav li{display:inline;margin:0}
   .nav li a{text-shadow:1px 1px 1px #fff;float:left;display:block;text-decoration:none;color:#022e35;padding:6px 7px}
   .nav li a:hover{background:#fff;color:#333;text-decoration:none}

4. Nah untuk penempatan kode dibawah ini ada 2 versi untuk yang pertama coba cari kode <div id='header-wrapper'> kalau kesulitan mencarinya gunakan Ctrl + F kalau sudah ketemu taruh kode di bawah ini  dibawah kode  </div> gimana bingung ya...sama.....dong ...oke untuk jelasnya kode nya seperti ini  :
   <div id='header-wrapper'>
   ------------------------------------
   -----------------------------------
   ----------------------------------
        </div>
   Taruh kodenya disini
   berikut kode yang harus di taruh

<div id='topbar'> <div id='top-wrapper'> <ul id='top'> <li><a href='/'><img border='0' src='http://2.bp.blogspot.com/-L0B8lAHpkhs/TyFxgeNjmbI/AAAAAAAAExM/PV-i3c8jvA4/s1600/home_white.png' style='padding:0px;'/></a></li> <li><a href='#'>About Us</a></li> <li><a class='arrow' href='#'>Contact Us</a> <ul> <li><a href='#'>Goggle +</a></li> <li class='hr'/> <li><a href='#'>Contact on Facebook</a></li> <li class='hr'/> <li><a href='#'>Contact on Twitter</a></li> </ul> </li> <li><a href='#'>Sport</a></li> <li><a href='#'>Culture</a></li> <li><a class='arrow' href='#'>Entertainment</a> <ul> <li><a href='#'>Music</a></li> <li class='hr'/> <li><a href='#'>Movie</a></li> <li class='hr'/> <li><a href='#'>Television</a></li> </ul> </li> <li><a href='#'>Health</a></li> <li><a class='arrow' href='#'>More</a> <ul> <li><a href='#'>Themes</a></li> <li class='hr'/> <li><a href='h#'>Tutorial</a></li> <li class='hr'/> <li><a href='#'>Resource</a></li> <li class='hr'/> <li><a href='#'>Advertise</a></li> <li class='hr'/> <li><a href='#'>Javascript</a></li> </ul> </li> </ul> </div></div>

5. Jika kode <div id='header-wrapper'>  Tidak ketemu coba sobat cari kode </header> lalu taruh kode di atas tepat dibawah kode </header>
6. Nah yang terakhir Save template
   

background Navigasi menu horisontal di atas berwarna biru untuk mengganti nya sobat bisa ganti teks yang berwarna merah di atas sesuai yang sobat inginkan dengan kode kode di bawah ini

http://karinafotocollection-project.googlecode.com/files/merah.png

http://karinafotocollection-project.googlecode.com/files/hijau.png

http://karinafotocollection-project.googlecode.com/files/kuning.png

http://karinafotocollection-project.googlecode.com/files/nav%20menu%20biru.png

http://karinafotocollection-project.googlecode.com/files/ungu.png