IlhamiZation - Selamat Menunaikan Ibadah puasa sahabat Blogger! kali ini saya akan mengeshare
Kumpulan Menu Navigasi Blog yang Keren dari template2 gratisan yang saya kumpulkan dari
RVmalice dan
Blog Johanes. Mari kita simak Post ini!!
masukkan css pada style-style navigasi berikut diatas kode
]]></b:skin>
Style 1 # Green Navigation by RVmalice (With Modification)
css :
#greeNav{
height:40px;
margin-top:10px;
}
#greeNav-left{
float:left;
display:inline;
width:100%;
}
#greeNav ul{
position: relative;
overflow: hidden;
padding: 0px 0px 0px 5px;
margin-left: 15px;
margin-top: 1px;
margin-right: 15px;
text-transform: uppercase;
font-size: 20px;
height: 35px;
font-family: 'Squada One', cursive;
background: #292929;
border-left: 5px solid #393939;
border-right: 5px solid #393939;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 15px;
}
#greeNav ul li{
float:left;
list-style:none;
background:#191919;
height:50px;
margin-left:5px;
width:relative;
-moz-border-radius:5px 0 0 5px;
text-shadow: 0 1px 2px #191919;
}
#greeNav ul li a, #nav ul li a:visited{display:block; color:#ace43f; text-decoration:none; padding:6px;}
#topnav2 ul li a:hover{background-color: #90C529;
color: #191919;
display: block;
height: 50px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
}
#greeNav ul li.home a:hover{background: url("http://i1180.photobucket.com/albums/x403/ilhamganteng99/HOME_32x32-32.png") no-repeat top left;
background-size: 22px;
background-position-y: 5px;
background-color: #191919;
color: #90C529;
display: block;
height: 40px;
-webkit-transition: all .4s ease-out;
-moz-transition: all .4s ease-out;
-o-transition: all .4s ease-out;
}
#greeNav li.home a {
background: url("http://i1180.photobucket.com/albums/x403/ilhamganteng99/HOME_32x32-32_IZ.png") no-repeat top left;
background-position-y: 5px;
padding-left: 27px;
background-size: 23px;
color: #191919;
padding-bottom: 1px;
background-color: #ACE43F;
height: 40px;
}
css :
#SNOnav {
float: left;
width: 100%;
overflow: hidden;
margin-top: 0px;
border-bottom: 10px solid #A8CABA;
background: rgba(0, 0, 0, 0.4);
padding-top: 5px;
padding-bottom: 5px;
}
#SNOnav li {
float: left;
display: inline;
list-style: none;
margin: auto;
color: #fff
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
border-left: 9px solid #5D4157;
border-right: 9px solid #5D4157;
text-shadow: 0px 1px 1px black;
width: 81px;
height: 35px;
line-height: 35px;
margin-right: 10px;
text-align: center;
margin-left: 10px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
}
#SNOnav li:hover {background:#5D4157;}
#SNOnav ul:hover, #nav li a {text-shadow: 0px 3px 1px black;}
#SNOnav li a:hover, #nav li a.selected{
color:#fff;}
#SNOnav li a {
font-size:12px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-decoration:none;
text-align: center;color:#fff;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;}
Style 3 # Coming soon
Style 4 # Coming soon
Style 5 # Coming soon
nah setelah css diatas anda taruh diatas kode
]]></b:skin>, sekarang saatnya anda copy kode dibawah ini sesuai keinginan anda :
<div id='navigasi'><ul><li><a href='http://www.zackmaru.com/'>Home</a></li><li><a href='http://www.zackmaru.com/'>GuestBook</a></li><li><a href='http://www.zackmaru.com/'>Exchange</a></li><li><a href='http://www.zackmaru.com/'>SiteMap</a></li><li><a href='http://www.zackmaru.com/'>Disclaimer</a></li><li><a href='http://www.zackmaru.com/'>About</a></li><li><a href='http://www.zackmaru.com/'>Stats</a></li></div>
Note : contoh jika anda memilih Green Navigation maka ganti kode <div id='
navigasi'> (diatas) menjadi <div id='
greeNav'> begitu juga navigasi yang lainnya!
ganti
http://www.zackmaru.com/ dengan url yang kamu inginkan!
ganti Teks berwarna
Hijau dengan Menu yang kamu inginkan!
Salam Kreativitas!!! :D
Sumber
Belum ada tanggapan untuk "Kumpulan Menu Navigasi Blog"
Posting Komentar