Membuat Menu Navigasi Horizontal Glossy di Blog ~ .:: Cavalier Juhik ::.

Title : Membuat Menu Navigasi Horizontal Glossy di Blog | Category : Blogging

Kembali saya akan berikan tutorial dalam modifikasi menu navigassi horisontal di blog anda. Seperti yang sudah saya jelaskan sebelumnya menu navigasi pada blog merupakan elemen yang penting di alam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Bagi yang pngen menubarnya bagus, bisa ikutin tutorial di bawah ini :

Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
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/AVvXsEhIWjb3A1LTfC35SOkQk2xHxDz9AuygjSkqHIEHUikusoyx1DYXhyBGRz7GXjMwdbPVVh5nOTyRBzqZwhJqWAN85ucSeEMn2QCw3OGNd8Ba_V9SrJ2Wch8HHwCcHmPSIGJTWYbgNa1imoI/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/AVvXsEjqOmA750DwEul83S-z7YU9oV2wzxtaErneBeosmYRLNB_HP2k18tyfQmM9lMBYS_JzLZ0rynwnGS4ikInw-ZPFEtxBhNPY_KYSiyeZUiPxdh8zcrjD6gbIamPpgmAdSvd3Mbmskk-tC8M/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/AVvXsEha3eQTCotnmM6pZHkUxvtdAHpc9r1XM3_0CGSUxQaXNHon9fKghNFuNRByTBJpElk3QWxhwBC-CgzJVo-ysrubBJ__7mxyEWu0IaZTIllbYrWqouD9N2uLvg9Rw_RQw5vVr27bLawI4QI/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
}

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

<ul class='glossymenu'>
<li class='current'><a href='http://cavalierjuhik.blogspot.com'>Home</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/2011/06/daftar-isi.html'>Daftar Isi</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/search/label/Software?max-results=5'>Software</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/search/label/Blogging?max-results=5'>Blogging</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/search/label/Movie%27s?max-results=5'>Movie</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/search/label/Game?max-results=5'>Game</a></li>
<li><a href='http://cavalierjuhik.blogspot.com/search/label/C.%20Profil?max-results=5'>C. Person</a></li>