Membuat Menu Navigasi Horizontal Glossy di Blog

berikut ini adalah cara unruk membuat Menu Navigasi Horizontal Glossy di Blog yang unik :)

Langsung saja. berikut ini tutorial membuat glossy horizontal menu

1. Login ke blogger dengan akun anda 
2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
3. Tambahkan kode CSS berikut diatas 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/AVvXsEgCfh8r-YY5Rx96Rp0vmr-CoHYTH5MRkrdjbzVkgHtdxH6OLe9-4n-pnmbKG93A1NtAkVsCeiPFqsiy_MW3Pv1tfLalx2-Ky_GThFFddykuF-p6fpEDLElV_Wu3tSUfl2vbS0IL20a_vx8/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/AVvXsEh_s8dy6Glr3_39dc0jiL5840IaTk0KU3FurrRHfF1P3joe9GCJ5ILxFqmRwhnVVVVsC4bLYdR__OVSlQGryu18BFUwYUCWT8g5rp-1g58ELUsm8STg0XiWeuiH4taQzj-bJyENdRLOVsA/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/AVvXsEglpXBCpG4q_ziGP1xBUakos-0fw34paEoyRz1fzZO9b5ldB91iC8gu6h73FVGhgdply-KzfyWDioUIRzVfkT4SSegtDN4e4AnbRyY15h9743YiaMvTpxnBde2VTdS41ZoMuKGv0IAVJVw/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
   }
   Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
   
    
4. Silahkan upload dulu image diatas ke tempat hosting masing-masing. 
5. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

   <ul class='glossymenu'>

   <li class='current'><a href='http://creatingwebsite-maskolis.blogspot.com/'><b>Home</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li> 

   <li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li> 

   </ul>

6. Temen-temen bisa edit link dan anchor teks kode HTML diatas 
7. Terakhir Save template anda

Selamat mencoba teman
jangan lupa isi comentar di bawah yaa heheh