Cara Membuat Menu Horizontal Glossy
By Unknown - Friday, September 7, 2012
Kali ini saya akan berikan lagi
penjelasan membuat menu horisontal glossy. contohnya ada pada gambar di
bawah, atau langsung menuju disini.
Langsung saja. berikut ini tutorial membuat glossy horizontal menu
- Login ke blogger dengan akun anda
- Kemudian pada dasbor klik Rancangan >> Edit HTML
- Tambahkan kode CSS berikut diatas tag ]]></b:skin>
Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :/*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/AVvXsEh7YCacTcWxXUPbmtVWNbCk2PGdKuAjdKNzDJyjaviK3j19eYbyLFhJlQBoTYVzS-vL0oalzRuvDnrKQcEKTQrNklz0kNAVpJV6XLnjvBFANTb-yZKFrFUSGsXZrAwANZHXhK-HuHEsmc0/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/AVvXsEjumqKsOK2LcKQXuov6Jk8SQwFeAmE5EKg6Fq21S-mn3ZkeDLCaV29IVwgtz5v_HGhbHVheIwJqCtjMfFUvw7QCQbWXAZiwWPJe41fWw6tQ1BRFjoE3ku981n9Dt7r4Bd0Cki_tUmZw6eM/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/AVvXsEgQj6BZte4LPIsdJiFO8wpG8CtJLIXbanNBOLHyg4HSqlW_6kHRdc4zBzeCw9YxuMS8etft3mxuqfWw_aqRhp3mRWkSNplhLfHr6yYAde-pQWOgtvYANSTvvLN310HBsNLWDi1aWnOI_hg/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
} - Silahkan upload dulu image diatas ke tempat hosting masing-masing.
- Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'> <ul class='glossymenu'><li class='current'><a href='http://panitah.blogspot.com/'><b>Home</b></a></li><li><a href='http://panitah.blogspot.com/search/label/Tips%20Dan%20Trik%20Ngeblog?&max-results=10' title='Tips Blog'><b>Tutorial Blog</b></a></li><li><a href='http://panitah.blogspot.com/search/label/Bank?&max-results=10' title='Bank'><b>Bank</b></a></li><li><a href='http://panitah.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li><li><a href='http://panitah.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li><li><a href='http://panitah.blogspot.com/search/label/Joomla' title='joomla'><b>Joomla</b></a></li></ul>
- Temen-temen bisa edit link dan anchor teks kode HTML diatas
- Terakhir Save template anda
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "Cara Membuat Menu Horizontal Glossy"