Kumpulan Menu Navigasi Blog yang Keren

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)

Demo (modification) | Demo (original)

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;
}

Style 2 # Sora No Otoshimono Navigation

Demo (Original)

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.ilhamization.com/'>Home</a></li><li><a href='http://www.ilhamization.com/'>GuestBook</a></li><li><a href='http://www.ilhamization.com/'>Exchange</a></li><li><a href='http://www.ilhamization.com/'>SiteMap</a></li><li><a href='http://www.ilhamization.com/'>Disclaimer</a></li><li><a href='http://www.ilhamization.com/'>About</a></li><li><a href='http://www.ilhamization.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.ilhamization.com/ dengan url yang kamu inginkan!
ganti Teks berwarna Hijau dengan Menu yang kamu inginkan!

Sekian tutorial Kumpulan Menu Navigasi Blog yang Keren ini semoga bermanfaat! XD
Salam Kreativitas!!! :D