NEWS
Loading...
  • Posted by : Johanes Djogan 2 Feb 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.
    ~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

    { 13 comments... read them below or Comment }

    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

    "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"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -