Simple Navbar dengan Efek Blur

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.
~xD


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.
Mission Complete .Arigatou Gozaimasu :)


Simple Navbar dengan Efek Blur

Komentar

  1. hover dikasih efek text-shadow ya bro keren , kreasinya selalu unik

    BalasHapus
  2. Akhirrnyaaaaa...
    Requestku diproses juga...

    Mmuuach mmuach...
    *cipok kematian buat Anes

    wkwkwk...

    Ane coba ya :v

    BalasHapus
  3. Balasan
    1. Gak mungkin kk,,
      semua blog pasti ada

      coba aja taruh diatas < / body >
      maksudnya sama kok

      Hapus
  4. @dicky.==" wah ga waras nih. yweslah~xD
    @lucky.masa ga ada?==a
    @Syndicate OS thx gan

    BalasHapus
  5. nice work buddy

    thumbnail demo buttonnya dong ganti,
    gak mirip sama sekali sama tombol soalnya,

    ~keep designing

    BalasHapus
  6. @Johanes djogan

    mas, kalo navbarnya taruh diaatas gimana mas???

    BalasHapus
  7. Komentar ini telah dihapus oleh pengarang.

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template