AndiNonymous: Simple Navbar on bottom Page with effect blur

hello gay !! *eh sorry ! maksud gue guys !!

sekarang gue mau ngasih trik jadul sebenernya , namun ada pepatah "old but gold" gak tau pepatah dari siapa yang penting itu lah :v .. Demo bisa diliat sendiri dibawah Footer blog ini ..

Css

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

Html

<div id='nav'>

<ul>

<li><a href='http://#'>TRIK Blog CSS3</a></li>

<li><a href='http://#'>BRUSHER PHOTOSHOP</a></li>

<li><a href='http://#'>ANIME TEMPLATE Blogger</a></li>

<li><a href='http://#'>VIDEO NarutoShippuden</a></li>

<li><a href='http://#'>VIDEO Bleach</a></li>

<li><a href='http://#'>SOUNDTRACK Anime Music</a></li>

<li><a href='http://#'>J-Music Japan Music</a></li>

<li><a href='http://#'>K-Music Korean Music</a></li>

</ul>

</div>

Note :

Simpan Css diatas kode ]]></b:skin >
Simpan HTML diatas kode </body> atau dibawah kode <body> *jangan pernah bilang kalau kode <body> gak ada ! gue gaplok lo !
ganti warna sesukamu
dan jangan lupa ganti tanda # yang ada di kode HTML dengan Link mu

Sekian tutorial nya , semoga bermanfaat . dan terimakasih kepada bang jo !

Source : Blog Johanes

AndiNonymous

Simple Navbar on bottom Page with effect blur

0 komentar:

Posting Komentar