Glossy Horizontal Menu

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog KAMU. Seperti yang sudah AKU jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di  alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya.  kali ini saya akan berikan lagi penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di bawah,
Langsung saja. ke TKP berikut ini tutorial membuat  

 glossy horizontal menu 

  Contoh

Login ke blogger dengan akun anda  

Kemudian pada dasbor  klik Rancangan >> Edit HTML  

Tambahkan kode CSS berikut diatas tag  ]]></b:skin>

Klik show untuk melihat

/*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/AVvXsEgZLmtw0PkI8eObVDGY6lpLv5UIyBhTwG4BnEodO_itHv88Kmk5S3v2pf0uJPXnIbuVAJNe3KzAWLlHhhz2Om-Y2bcIIezLPp6dI4uhmLdGrDLNRGMIBlpSuviyP3ENBJYeisUH49yIUx8/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/AVvXsEjZ0piq75EdbIWHgvV_Pd7cRsQs1_Qyqfe2bK_HynlOvqFhf9gxi4yqeMjVCORqU-i1DS0TY-7R4OUXdXD8MvcVuh3Xsjcq-RxMMo7BlfBgmtTQlYbTeBD6Fi0cv4RomeaVE6fovYvSsSA/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/AVvXsEgn8Z4hqkSEzxg3RzIzHT6Ar-jghNbqrsk5zxNZ_UN-eVrbgtZiVi9dlWNdHUZg_A8O5LzMnGHvzLAB418Mm_qu80ggVpu0Eg46UJArYUSfyRR3XopOAW8D5rlyMaGfW4ehaQTpaAQVIno/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
}

Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

Klik show untuk melihat

<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>

Temen-temen bisa edit link dan anchor teks kode HTML diatas  

Terakhir Save template anda

Memang banyak sekali menu navigasi horisontal yang dapat kita pakai untuk memperindah blog. kita..
selamat mencoba semoga berhasil
  Dan Semoga Bermanfaat..