Kumpulan Menu Navigasi Blog yang Keren

HI. Kawan-Kawan Kali Ini Saya Akan Mempost Menu Navigasi Blog Yg Keren

Taruh Code CSS Di Bawah Di Atas Code ]]></b:skin>

Style 1. Green Navigasi By : RVmalice




CSS

#greeNav{<br />height:40px;<br />margin-top:10px;<br />}<br />#greeNav-left{<br />float:left;<br />display:inline;<br />width:100%;<br />}<br />#greeNav ul{<br />position: relative;<br />overflow: hidden;<br />padding: 0px 0px 0px 5px;<br />margin-left: 15px;<br />margin-top: 1px;<br />margin-right: 15px;<br />text-transform: uppercase;<br />font-size: 20px;<br />height: 35px;<br />font-family: 'Squada One', cursive;<br />background: #292929;<br />border-left: 5px solid #393939;<br />border-right: 5px solid #393939;<br />-moz-border-radius: 20px;<br />-webkit-border-radius: 20px;<br />border-radius: 15px;<br />}<br />#greeNav ul li{<br />float:left;<br />list-style:none;<br />background:#191919;<br />height:50px;<br />margin-left:5px;<br />width:relative;<br />-moz-border-radius:5px 0 0 5px;<br />text-shadow: 0 1px 2px #191919;<br />}<br />#greeNav ul li a, #nav ul li a:visited{display:block; color:#ace43f; text-decoration:none; padding:6px;}<br />#topnav2 ul li a:hover{background-color: #90C529;<br />color: #191919;<br />display: block;<br />height: 50px;<br />-webkit-transition: all .4s ease-out;<br />-moz-transition: all .4s ease-out;<br />-o-transition: all .4s ease-out;<br />}<br />#greeNav ul li.home a:hover{background: url("http://i1180.photobucket.com/albums/x403/ilhamganteng99/HOME_32x32-32.png") no-repeat top left;<br />background-size: 22px;<br />background-position-y: 5px;<br />background-color: #191919;<br />color: #90C529;<br />display: block;<br />height: 40px;<br />-webkit-transition: all .4s ease-out;<br />-moz-transition: all .4s ease-out;<br />-o-transition: all .4s ease-out;<br />}<br />#greeNav li.home a {<br />background: url("http://i1180.photobucket.com/albums/x403/ilhamganteng99/HOME_32x32-32_IZ.png") no-repeat top left;<br />background-position-y: 5px;<br />padding-left: 27px;<br />background-size: 23px;<br />color: #191919;<br />padding-bottom: 1px;<br />background-color: #ACE43F;<br />height: 40px;<br />}</a>

 Jika Anda Memilih Green Navigasi Maka Ganti Code <div id="navigasi"> Dengan <div id="Greenav">



Style 2 SORA NO OTOSHIMONO Navigasi



#SNOnav {<br />float: left;<br />width: 100%;<br />overflow: hidden;<br />margin-top: 0px;<br />border-bottom: 10px solid #A8CABA;<br />background: rgba(0, 0, 0, 0.4);<br />padding-top: 5px;<br />padding-bottom: 5px;<br />}<br />#SNOnav li {<br />float: left;<br />display: inline;<br />list-style: none;<br />margin: auto;<br />color: #fff<br />-moz-border-radius: 60px;<br />-webkit-border-radius: 60px;<br />border-radius: 60px;<br />border-left: 9px solid #5D4157;<br />border-right: 9px solid #5D4157;<br />text-shadow: 0px 1px 1px black;<br />width: 81px;<br />height: 35px;<br />line-height: 35px;<br />margin-right: 10px;<br />text-align: center;<br />margin-left: 10px;<br />-webkit-transition: all 0.5s ease-in-out;<br />-moz-transition: all 0.5s ease-in-out;<br />}<br />#SNOnav li:hover {background:#5D4157;}<br />#SNOnav ul:hover, #nav li a {text-shadow: 0px 3px 1px black;}<br />#SNOnav li a:hover, #nav li a.selected{<br />color:#fff;}<br />#SNOnav li a {<br />font-size:12px;<br />font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;<br />text-decoration:none;<br />text-align: center;color:#fff;<br />-moz-transition: all 0.5s ease-in-out;<br />-webkit-transition: all 0.5s ease-in-out;}

  Contoh Jika Anda Memilih Green Navigasi Maka Ganti Code <div id="navigasi"> Dengan <div id="SNOnav">



                         Style 3 #Coming Soon


                         Style 4 #Coming Soon

                        Style 5 #Coming Soon


Sekarang Taroh Code Dibawah Ini Di Bawah Code  </body>

<div id='navigasi'><ul><li><a href='http://indraahmadrobani.blogspot.com/'>Home</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>GuestBook</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>Exchange</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>SiteMap</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>Disclaimer</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>About</a></li><li><a href='http://indraahmadrobani.blogspot.com/'>Stats</a></li></div></a>

 Ganti Code http://indraahmadrobani.blogspot.com/ Diatas Dengan URL Anda Ganti Juga Nama nya yaitu Home , Guest , Exchange , SiteMap , Disclaimer , About , Stats Dengan Name Yg Anda Inginkan

Jangan Lupa Komentar Ya ^_^





Artikel Terkait