Cara Membuat Menu Navigasi

POsting kali ini saya yaitu Membuat Menu Navigasi Horizontal Glossy di Blogger. Menu navigasi blog merupakan elemen yang sangat penting apa lagi para blogger yang selalu mementingkan penampilan dan style blognya.

Langsung saja berikut ini tutorial membuat menu navigasi

1. Login ke blogger, pastinya dengan akun sobat
2. Kemudian pada dasbor klik Rancangan >> Edit HTML
3. Jangan lupa di backup dulu template sobat untuk menghindari ke gagalan
4. Tambahkan kode CSS berikut di atas tag ]]></b:skin>
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */ /*Modified : IB (http://www.maskolis.co./) */ .glossymenu{ position: relative; padding: 0 0 0 34px; margin: 0 auto 0 auto; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-sCtsVaR_Cg2EaVqDp299Sh4UJZ8IB79e_xRsaEMO_EWjZVY6FSgiMN-ZkL3tlpbxC5pKyQwOm24hbCAOkhb379qOV5KiVNgvLCgJ2hIsTX9t5FZv2ybnkIQ6LsjDh6YG8T3HrS7xIRU/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/ height: 46px; list-style: none; } .glossymenu li{ float:left; } .glossymenu li a{ float: left; display: block; color:#000; text-decoration: none; font-family: sans-serif; font-size: 13px; font-weight: bold; padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/ height: 46px; line-height: 46px; text-align: center; cursor: pointer; } .glossymenu li a b{ float: left; display: block; padding: 0 24px 0 8px; /*Padding of menu items*/ } .glossymenu li.current a, .glossymenu li a:hover{ color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5JY2BeUeXbSXBhw4BrtPDX3jBbwsJoRioXxaoXAezYiDEEdFTIwf4u00vmqeYs5IathEOuETcRIWLV1a1kUpZkXi68X1IkhZqd_H7nw5-R8T0RAboRdWlP3o-br7-zBWmXrE7oprLmgk/s1600/maskolis+nav.png) no-repeat; /*left tab image path*/ background-position: left; } .glossymenu li.current a b, .glossymenu li a:hover b{ color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH5SWhNurJGNK48oJV_iHiyeSEATSs3FLtjOZYSoP-AVKWkrKzEhemq2Mn727V3u6cgr29PvbGSqcLOSve-crS7uxeaVEh6-R9apZ3-Qu67Ay8N-1Gfh6hueEUay_7inzRkSXPXceSbmc/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/ }
Jika gambarnya tidak sesuai atau tidak cocok silahkan cari ajah hoho
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
   
   <ul class='glossymenu'>
   <li class='current'><a href='http://dhio89.blogspot.com/'><b>Home</b></a></li>
   <li><a href='http://dhio89.blogspot.com/search/label/Blogger' title='Blogger'><b>Blogger</b></a></li>
   <li><a href='http://dhio89.blogspot.com/search/label/Software' title='Software'><b>Software</b></a></li>
   <li><a href='http://dhio89.blogspot.com/search/label/Komputer' title='Computer'><b>Computer</b></a></li>
   <li><a href='http://dhio89.blogspot.com/search/label/Musik%20Hip%20Hop' title='Music HipHop'><b>Music HipHop</b></a></li>
   <li><a href='http://dhio89.blogspot.com/search/label/Hot%20Girls' title='Hot Girls'><b>Hot Girls</b></a></li>
   </ul>
6. Atau sobat bisa juga letakan di atas kode <div id='crosscol-wrapper' style='text-align:center'>
   Sobat tinggal pilih mau di taruh di mana sesuai selera
7. Sobat bisa edit link dan anchor teks kode HTML diatas
8. Lalu save template