Pages

Rabu, 31 Agustus 2011

Membuat menu navigasi drop down di blog





Pada postingan kali ini chandra akan memberikan tutorial tentang bagaimana cara membuat menu navigasi drop down,yah mungkin saja bisa membantu sobat semua yang pusing dan tidak tau bagaimana cara membuat nya...
haha
langsung saja kita mulai ke study kasusnya..
ikuti step-step brikut:
1. Login ke Blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Jangan Lupa sobat backupd dulu template blog sobat,klik Download Template Lengkap
5. Silakan copy kode di bawah ini :

#NavbarMenu{background:#ffffff; width:960px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:#000000; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
6. Setelah itu sobat cari kode berikut ]]></b:skin>
7. Setelah ketemu simpan kode yang sudah di copy tadi dan paste kan tepat di atas ]]></b:skin>
8. Selanjutnya silakan hapus kode menu navigasi anda sebelumnya yang berada di bawah
9. Setelah itu ganti dengan kode berikut :
<div id="outer">
<div id="NavbarMenu">
<div id="NavbarMenuleft">
<ul id="nav">
<li><a href="http://kevinchandra.blogspot.com/">Home</a></li>
<li><a href="http://www.blogger.com/post-create.g?blogID=2717218258204524824#">Trik</a>
<ul>
<li><a href="http://kevinchandra.blogspot.com/">Komputer</a></li>
<li><a href="http://kevinchandra.blogspot.com/">Windows</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=2717218258204524824#">Tips</a>
<ul>
<li><a href="http://kevinchandra.blogspot.com/2011/07/kumpulan-tips-blogspot.html"&gt;Tips Blogspot</a></li>
<li><a href="http://kevinchandra.blogspot.com/search/label/Kesehatan">Kesehatan</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=2717218258204524824#">Tutorial</a>
<ul>
<li><a href="http://kevinchandra.blogspot.com/2011/08/tutorial-mudah-blog.html">Tutorial Blog</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=2717218258204524824#">Peralatan</a>
<ul>
<li><a href="http://kevinchandra.blogspot.com/search/label/Widget">Widget (smiley) &nbsp;&nbsp;»</a>
<ul>
<li><a href="http://kevinchandra.blogspot.com/2011/08/kirim-sms-gratis-di-internet.html">SMS Gratis</a></li>
<li><a href="http://kevinchandra.blogspot.com/2011/06/pasang-widget-dafar-isi-scrool-ajaib.html">Scrool Ajaib</a></li>
<li><a href="http://kevinchandra.blogspot.com/2010/12/menampilkan-status-onoff-yahoo-di-blog.html">Status YM</a></li>
</ul>
</li>
<li><a href="http://kevinchandra.blogspot.com/2010/08/kumpulan-kode-warna-rgb-dan-hexadecimal.html">Kode kode Warna</a></li>
</ul>
</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=2717218258204524824#">Zona Aneh</a>
<ul>
<li><a href="http://www.blogger.com/kevinchandra.blogspot.com">Unik</a></li>
<li><a href="http://kevinchandra.blogspot.com">Gila</a></li>
<li><a href="http://kevinchandra.blogspot.com">Hiburan</a></li>
</ul>
</li>
<li><a href="http://kevinchandra.blogspot.com/2010/12/free-link-exchange.html">Link Sahabat</a></li>
<li><a href="http://kevinchandra.blogspot.com/post-create.g?blogID=2717218258204524824#">[ Kontak Admin ]</a></li>
</ul>
</div>
</div>
</div>

Keterangan
Buat yang text berwarna hijau itu sobat ubah dengan alamat url blog sobat...
nah kalau text yang berwarna hijau tua itu untuk menampilkan text pada menu tersebut..
sedangkan untuk merubah background dari menu navigasi drop down,sobat ganti aja tulisan yang berwarna merah yang ada di step ke 5..
Kalo gambarnya kurang jelas sobat bisa lihat demonya Disini
semoga bermanfaat..
kalau masih belum paham silahkan sobat poskan komentarnya...



2 komentar:

  1. pusingggg banget brader..
    hehehehe

    BalasHapus
  2. kalo pusing cara memahaminya,tinggal copas aja sob script di atas tinggal pake langsung jadi..
    kalo di pahami baik baik pasti bisa..
    haha..

    BalasHapus

 
[tutup]