Saturday, 20 October 2012
Simple Navbar dengan Efek Blur
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 :)
About Author // Supri Blogger Mania
Hanya seorang anak biasa yang bermimpi untuk menjadi sukses dalam hidup ini.bukan orang pinter,tapi ingin selalu berusaha untuk menggapai impian dengan kerja keras dan usaha. mencoba sesuatu yang baru,mempelajarinya dan mengembangkanya dengan kreatifitas sendiri.dalam hidup ini pula,cuma ingin mencari banyak teman untuk berbagi,sharing dan mencari kebahagiaan.tetapi walaupun berat dan menerima rasa sakit,aku tidak akan pernah menyerah
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
