Ikuti @H_Des07
Kemudian masukan pula kode html dibawah ini,dimanapun kamu mau.poko'a
diantara kode <body> dan </body> (#Didalam)
Ganti Tanda Pagar "#" Dengan Alamat Link kamu dan juga jangan lupa mengganti nama linknya.
Setelah itu simpan.
Postingan kali ini,saya mau share Simple Navbar dengan Efek Blur yang berasal dari Blog Johanes.
Untuk 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.
Untuk Previewnya bisa sobat lihat DISINI