Follow me @kenchito_21 / Klik Burung twitter biru,selalu kunjungi kenchito-21.blogspot.com Cara membuat Top Navbar

Senin, 21 Januari 2013

0 Cara membuat Top Navbar


Click gambar untuk Memperbesar
Cara memasang nya cukup mudah ..
  1. Ke Template
  2. HTML
  3. Edit HTML
  4. Lalu Code ]]></b:skin>  , untuk mempermudahnya kalian bisa menekan CTRL+F pada Keyboard
  5. Jika Sudah ketemu pastekan code di bawah ini tepat di atas nya
.topnav{float:center; font-size:11px; margin:0 auto; width:980px; background:black; border:1px dashed #080; position:relative; left:-0px; top:10px; -moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0}
.topnav ul{height:20px; list-style:none outside none; margin:0 auto; padding:5px 0 12px 40px}
.topnav li{float:left; margin:0; font-size:13px; margin-right:5px}
.topnav li a{color:green; display:block; text-decoration:none; float:left; padding:5px 10px}
a.home{color:red !important; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #901af5; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #901af5; box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #901af5}
.topnav li a:hover{color:#0f0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #0f0; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #0f0; box-shadow:0 0 20px rgba(0,0,0,0.9) inset,0 0 5px #0f0}
.nav_topb{width:30px; height:30px; background:url()no-repeat left top; left:-12px; position:relative; top:89px}
.botnav{float:left; font-size:11px; margin:0 auto; width:980px; background:transparent; border:1px solid #0f0; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px}
.botnav ul{height:20px; list-style:none outside none; margin:0 auto; padding:5px 0 12px 40px}
.botnav li{float:left; margin:0; font-size:13px; margin-right:5px}
.botnav li a{color:blue; display:block; text-decoration:none; float:left; padding:5px 10px}
.botnav li a:hover{color:#901af5; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 20px rgba(0,0,0,0.9) inset,0 0 5px #901af5; -webkit-box-shadow:0 0 20px rgba(0,0,0,0.9) inset,0 0 5px #901af5; box-shadow:0 0 20px rgba(0,0,0,0.9) inset,0 0 5px #901af5}
b.home{color:#0e1ef3 !important; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #0e1ef3; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #0e1ef3; box-shadow:0 0 5px rgba(0,0,0,0.9) inset,0 0 5px #0e1ef3}
 
6.  Lalu cari lagi Code <body> untuk mempermudahnya kalian bisa menekan CTRL+F pada Keyboard
    7.  Jika sudah ketemu pastekan Code ini di tepat di bawah nya

<div class='topnav'>
<ul>
<li><a href='http:Sopyan-7.Blogspot.com'>Sopyan S</a></li>
<li><a href='http://www.blogger.com/profile/01001272153087337721'>My Profil</a></li>
<li><a href='http://www.facebook.com/sopyan.a7x'>My Facebook</a></li>
<li><a href='http://sopyan-7.blogspot.com/search/label/Mp3'>Mp3 Script</a></li>
<li><a href='http://sopyan-7.blogspot.com/search/label/Mp3'>Sopyan-7</a></li>
<li><a href='http://sopyan-7.blogspot.com/search/label/Mp3'>Mp3 Script</a></li>
</ul>
</div>
     8.  Lalu simpan template .. Check blog anda , akan ada menu navbar atas

NB : Untuk yang berwarna Hijau : Kalian bisa ganti dengan Judul yang kalian mau
        Untuk yang berwarna Biru : Kalian bisa ganti Link tersebut sesuai dengan judul nya

Credit By : www.sopyan-7.blogspot.com
Shared : kenchito-21

0 Comments

Bagaimana Pendapat Anda ?