Cara Membuat Menu Navigasi Horizontal Glossy di Blog

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. langsung aja gan ga perlu basa basi . bismillah dulu :

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/AVvXsEi0ltAW-vRjP6vCbAfk5PlK3pIk6JTNlltcxMBotj0Afbaap6YaUexC1yAIFBD52_Jo_o1mLy29j8IhWtQH9gdmGGDEEa_To0ppGEGdm9QK-pnCZwshLZayNwmHTzoU7EE4LG8XOh1sS5g/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/AVvXsEg9h6CB1ZH-f01ATH2Sz3jYJ5GRt__6qjGXjY3_4yKuNTsh1pKZqYhh3UhDSTWHGN9yg261K81WvS4bV_z2nCjoBJJL0TrtIJlaBHYx5Lk0F7oB1h0mbS-gdka4273CSVFF_HmU8mOrvmU/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/AVvXsEipIILyEezrq-kGJlFVUlFu8BjTrZeVmhYkhcaZDZ6QQxNeUyMCvvUafb5wbex77YCS14L144NYNuDI36Eq9KfGrti7I3gJ0wHE2MUfanmYkBlaDs1FzzzisNEfn7y3u3EIN0nFpQx_jMQ/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

SEMOGA BERMANFAAT .

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.