Cara Membuat Menu Navigasi Horizontal Glossy Di Blog - Kembali di postingan kali ini. Saya akan memberikan suatu tutorial blogger Cara Membuat Menu Navigasi Horizontal Glossy Di Blog. Sudah tahu Navigasi Glossy atau belum? jika belum berikut screenshotnya.
Keren gak? Tetap mau melanjutkan? Baiklah, langsung saja berikut tutorialnya.
1. Login Ke Blogger Sobat.
2. Masuk Edit HTML
3. Masukkan kode berikut di atas ]]></b:skin>
.glossymenu{
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIGYdmTW3XNE_ADSFQwadAAKM1LVOFAckkZH3iq7vDeAe59fj2yG6rOsQZcIBaqOohVUQpQwcpf_Mp2JdnYQXyeOXcKN005TaNE7TkSAQDfw50iG1nHQVnhcKIvwNVDxA-ZIIDaI5Vup4/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/AVvXsEg8RuRSHl7xlBgzyeBcOLcb0knJoA3CRXcouOlaggLCSbdkouVJHbyWnswjt8jYVj_L-84oCrhyIFWEV-mSxpWksjotQ_BpkCb-WNDgJncLsRHoSUkpD6qneEPD943Lb3mKKQiqNhriIJw/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/AVvXsEief3tUGCMFwhGBg__spceXmcFzCb1qJH_vj5P5OmSP_BGDNlMy5J20PM5gYj-AWfMDYosgq_5p7KVVb2XgeSd4I5xaTnTYUWqdo8PnLvWHetqZocGNRSrdG954O_ib9M8vQEu5bynww1c/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
}
position: relative;
padding: 0 0 0 34px;
margin: 0 auto 0 auto;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIGYdmTW3XNE_ADSFQwadAAKM1LVOFAckkZH3iq7vDeAe59fj2yG6rOsQZcIBaqOohVUQpQwcpf_Mp2JdnYQXyeOXcKN005TaNE7TkSAQDfw50iG1nHQVnhcKIvwNVDxA-ZIIDaI5Vup4/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/AVvXsEg8RuRSHl7xlBgzyeBcOLcb0knJoA3CRXcouOlaggLCSbdkouVJHbyWnswjt8jYVj_L-84oCrhyIFWEV-mSxpWksjotQ_BpkCb-WNDgJncLsRHoSUkpD6qneEPD943Lb3mKKQiqNhriIJw/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/AVvXsEief3tUGCMFwhGBg__spceXmcFzCb1qJH_vj5P5OmSP_BGDNlMy5J20PM5gYj-AWfMDYosgq_5p7KVVb2XgeSd4I5xaTnTYUWqdo8PnLvWHetqZocGNRSrdG954O_ib9M8vQEu5bynww1c/s1600/naskolis+leftnav.png) no-repeat right top; /*right tab image path*/
}
4. Jika gambarnya tidak cocok, bisa anda ganti sesuaikan dengan template yang dipakai. Di bawah ini adalah contoh gambar background yang bisa anda gunakan :
Silahkan upload dulu image diatas ke tempat hosting masing-masing.
5. Dan yang terakhir, masukkan kode berikut diatas <div id='header-wrapper'>
<ul class='glossymenu'>
<li class='current'><a href='http://BLOG-KAMU.blogspot.com/'><b>Home</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/tutorial blog' title='tutorial blog'><b>Tutorial Blog</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/SEO' title='SEO'><b>SEO</b></a></li>
<li><a href='http:/BLOG-KAMU.blogspot.com/search/label/wordpress' title='wordpress'><b>Wordpress</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/affiliate' title='affiliate'><b>Affiliate</b></a></li>
<li><a href='http://BLOG-KAMU.blogspot.com/search/label/hosting' title='hosting'><b>Hosting</b></a></li>
</ul>
Sumber : http://linggarbloggersejati.blogspot.com/2013/01/cara-membuat-menu-navigasi-horizontal-glossy.html#ixzz2IDL97Y28
Tidak ada komentar:
Posting Komentar