Modifikasi 3 Template Valid HTML5 [maskolis template]

Berikut saya akan berbagi cara membuat menu horizontal glossy yang cantik jika di pasang diblog, sehingga memudahkan kita bernavigasi di blog, caranya sangat gampang, ikutin saja langkah2 yang sudah dibuat dibawah, pasti berhasil deh, okoh doh langsung saja ya ikuti langkah2 di bawah ini;

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) */
   /*Reshare by : IB  (http://tutorialblog4seo.blogspot.com/) */
   .glossymenu{
       position: relative;
       padding: 0 0 0 34px;
       margin: 0 auto 0 auto;
       background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNcE2A5mG2wMloep5o7EphpcdM3wVZchbkvSWRYKB4AdEQl3Pyxu4QsB58Ya1yxhtCkQPYTsR54yiHJiO4_BPBXKqLSb4I2C8RR7CG5YILsyRv8UxbRpQgjLFIySKt2R3rPQ5EAjwK0So/s1600/maskolis+menu.png) repeat-x; /*tab background image path*/
       height: 46px;
       list-style: none;
   }
   .glossymenu li{
       float:left;
   }
   

   Related Posts

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

   Ads Middle post

       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/AVvXsEiHtfdWhQ0ILKnOqxwrmKzNvbbGbTc57_WNE61Qw-5WdnkQoAzzuHb70DDymBZIO831R40UjbK1S3XXTrLtr4PXCFmv67hnS26yu81h24jwtE8KYJcoyFlDVinf_KObMh8BI5OgnsFTYMk/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/AVvXsEiZ74ENCy0YdVBtQBa5lNhNfIjwSz9gJY-6Y2mkqNDEWp1IvCutiReH_XVqHgA8qhTcylU-wfy7HYdjP10VawSZPrNMvzy334w79p_EEcTR5uwoFAo_XOKkSgAwPK9cJxs0NZ6EDKOT_OU/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://tutorialblog4seo.blogspot.com/'><b>Home</b></a></li>

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

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

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

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

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

   </ul>

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

Selamat mencoba dan semoga berhasil,,,,

Sumber : maskolis.com