Postingan kali ini,saya mau share Simple Navbar dengan Efek Blur yang berasal dari Blog akb yang merupakan blog saya sendiri.karena ada banyak request yang minta di kasih tau cara memasang'a ywes saya kasih nih.
~xDUntuk menggunakan Navbar ini,pertama buka blogger => rancangan => edit HTML lalu masukan css dibawah ini diatas kode </b:skin>
#nav {
float:left;
width:100%;
overflow:hidden;
background: -moz-linear-gradient(top, #25272C 0%, black 99%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#25272C), color-stop(99%,black));}
#nav li{
float:left;
display:inline;
list-style:none;
line-height:13px;
margin-right:1px;
color:#ddd;}
#nav ul:hover, #nav li a {color: transparent;text-shadow: 0px 0px 3px white;}
#nav li a:hover, #nav li a.selected{
color:#fff;}
#nav li a {
float:left;
font-size:16px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-decoration:none;
text-shadow: 0px 0px 1px white;
padding:15px 15px 25px 15px;
-webkit-transition: all 0.5s ease-in-out;}
#nav li a span{
font-size:11px;
letter-spacing:2px;
font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
text-shadow: 0px 0px 2px white;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;}
#nav li a:hover span, #nav li a.selected span{
color:#9E1C16;
text-shadow: 0px 0px 2px #9E1C16;}
Kemudian masukan pula kode html dibawah ini,dimanapun kamu mau.poko'a
diantara kode <body> dan </body> (#Didalam)
<div id='nav'>
<ul>
<li><a href='http://#'>TRIK Blog<br/><span>CSS3</span></a></li>
<li><a href='http://#'>BRUSHER<br/><span>PHOTOSHOP</span></a></li>
<li><a href='http://#'>ANIME TEMPLATE<br/><span>Blogger</span></a></li>
<li><a href='http://#'>VIDEO<br/><span>NarutoShippuden</span></a></li>
<li><a href='http://#'>VIDEO<br/><span>Bleach</span></a></li>
<li><a href='http://#'>SOUNDTRACK<br/><span>Anime Music</span></a></li>
<li><a href='http://#'>J-Music<br/><span>Japan Music</span></a></li>
<li><a href='http://#'>K-Music<br/><span>Korean Music</span></a></li>
</ul>
</div>
Ganti Tanda Pagar "#" Dengan Alamat Link kamu dan juga jangan lupa mengganti nama linknya.
Setelah itu simpan.
Mission Complete .Arigatou Gozaimasu :)
Komentar
Posting Komentar