Membuat Menu Navigasi Horizontal Glossy di Blog

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Setelah sebelumnya saya memberikan tutorial membuat multi level menu drop down, kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah, atau langsung menuju disini.

Langsung saja. berikut ini tutorial membuat glossy horizontal menu :

1. Log in ke bloggge anda
2. masuk ke rancangan lalu, masuk ke edit/html
3. kemudian letakkan kode dibawah ini diatas kode ]]></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/AVvXsEhTe-nLyazrgZFdeQ6xOrQ-LMJKX120PF17XmGXJ_IiFlqoVRu1ozG784i4cfrdUQlNLOglNcRY1c_9mXMHtGKYTn30Z8MO8HLYw7u4xYHsL_GDEfE_Ri-MyKmS8Z3jd9OZSNoaF_ISez0/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/AVvXsEjUwm-cOXR2DjIijSxTt3e9tH4438_XKt8PtYwFk62j_f7nJeLR3LaJZifb_d3004WZV9dId9j0Tu3B95r8x9lJDQezPlCllXuBU70FPp5Kk5ryrc1Z8SvQWewd_8UdztUdH8CSMFnaxtQ/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/AVvXsEiWsj3m6pjcqG3893bS5vDAJvyqyjms6AhmnNCoy4gGnIvIEYWBjFLCV2EraV0UwqRDrCiXuzJYdEAawu8oY91PEWa-_Do4oBMxbQbQ1NPmh2d2yXg9MHSA2Iq0xNrr-q2Vyha0QnY2vj8/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
   }
4. kemudian save template
5. setelah itu tambah widget html/javascript
6. kemudian masukkan kode dibawah ini
   
   
   <ul class='glossymenu'>
   <li class='current'><a href='http://www.maskolis.co.cc/'><b>Home</b></a></li>
   <li><a href='http://www.maskolis.co.cc/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
   <li><a href='http://www.maskolis.co.cc/search/label/SEO' title='SEO'><b>SEO</b></a></li>
   <li><a href='http://www.maskolis.co.cc/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
   <li><a href='http://www.maskolis.co.cc/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 
   <li><a href='http://www.maskolis.co.cc/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 
   </ul>
   
7. setelah itu klik simpan.
   
   gampangkan, :) jangan lupa tinggalkan kritik dan saran anda..

Share it to your friends..!