Langsung saja berikut ini tutorial membuat menu navigasi horizontal glossy di blogger
- Login ke blogger, pastinya dengan akun sobat
- Kemudia pada dasbor klik Rancangan >> Edit HTML
- Jangan lupa di backup dulu template sobat untuk menghindari ke gagalan
- Tambahkan kode CSS berikut di atas tag ]]></b:skin>
- Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>
<ul class='glossymenu'>
<li class='current'><a href='http://dhio89.blogspot.com/'><b>Home</b></a></li>
<li><a href='http://dhio89.blogspot.com/search/label/Blogger' title='Blogger'><b>Blogger</b></a></li>
<li><a href='http://dhio89.blogspot.com/search/label/Software' title='Software'><b>Software</b></a></li>
<li><a href='http://dhio89.blogspot.com/search/label/Komputer' title='Computer'><b>Computer</b></a></li>
<li><a href='http://dhio89.blogspot.com/search/label/Musik%20Hip%20Hop' title='Music HipHop'><b>Music HipHop</b></a></li>
<li><a href='http://dhio89.blogspot.com/search/label/Hot%20Girls' title='Hot Girls'><b>Hot Girls</b></a></li>
</ul> - Atau sobat bisa juga letakan di atas kode <div id='crosscol-wrapper' style='text-align:center'>
Sobat tinggal pilih mau di taruh di mana sesuai selera - Sobat bisa edit link dan anchor teks kode HTML diatas
- Lalu save template
/*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(http://4.bp.blogspot.com/-DfeEq8uDJIM/TVQEJ5xN2eI/AAAAAAAAAd8/8AbrUp0dhws/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(http://4.bp.blogspot.com/-2UTHS_rxW5s/TVQANHivxcI/AAAAAAAAAdo/51kJqOkYe3k/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(http://2.bp.blogspot.com/-6Pfazya7VFo/TVQAVqkGgZI/AAAAAAAAAdw/6l3fVCb3kOw/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/ }
Jika gambarnya tidak sesuai atau tidak cocok silahkan cari ajah hoho
ok sekian dulu tutorial tentang Membuat Menu Navigasi Horizontal Glossy di Blogger. Semoga bermaanfaat...
Post a Comment