Tips membuat menu mendatar drop down

Tips ini untuk teman teman blogger yang ingin membuat menu mendatar drop down. Seperti contoh gambar diatas, kita bisa dengan mudah menuju ke link yang ada di menu mendatar drop down. Nah saya tidak usah berlama - lama dan langsung saja kita membuatnya.

Langkah - langkah

Login ke Blogger >> Pilih RANCANGAN >> Pilih EDIT HTML (jangan lupa centangkan Expand Template Widget) >> dan jangan lupa mem-back up template blog teman - teman (caranya tinggal meng-klik DOWNLOAD TEMPLATE LENGKAP).
Cari kode berikut ]]></b:skin> (cara mudah mencari , tekan CTRL trus F (kotak pencari di PC/laptop teman-teman trus masukkan apa yang mau di cari)
Kalo sudah ketemu teman - teman tinggal copy/paste kode script dibawah ini tepat diatas ]]></b:skin>

#NavbarMenu{background:#000000; width:960px; height:32px; color:#000000; margin:0 auto; padding:0 5px; font:bold 12px 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 11pxArial, 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 11pxarial, 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;}

Ket.
- Kode script yang berwarna merah itu adalah warna dari menu mendatar drop down, dari font, juga background menu. teman - teman bisa mengubah warnanya sesuai dengan selera teman - teman.
Lanjut lagi, kalo sudah bagian yang nomor 3, cari lagi kode <body> dan tempatkan kode script dibawah ini tepat di bawah kode <body> .

<div id='outer'>
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>

<li><a href='http://www.shareapasaja.co.cc/' title='Kembali ke awal'>Beranda</a></li>
<li><a href='#'>Tips dan Trik</a>
<ul>
<li><a TARGET='_BLANK' href='http://www.shareapasaja.co.cc/search/label/TIPS%20DAN%20TRICK%20KOMPUTER'>TIPS DAN TRICK KOMPUTER</a></li>
<li><a TARGET='_BLANK' href='http://www.shareapasaja.co.cc/search/label/TIPS%20DAN%20TRICK%20MUSIC'>TIPS DAN TRICK MUSIC</a></li>
<li><a TARGET='_BLANK' href='http://www.shareapasaja.co.cc/search/label/TIPS%20DAN%20TRICK%20BLOG'>TIPS DAN TRICK BLOG</a></li>
<li><a TARGET='_BLANK' href='http://www.shareapasaja.co.cc/search/label/TIPS%20DAN%20TRICK%20INTERNET'>TIPS DAN TRICK INTERNET</a></li>
</ul></li>

<li><a href='#'>DOWNLOAD</a>
<ul>
<li><a href='http://www.shareapasaja.co.cc/search/label/MUSIC' target='_blank' title='Download Lagu lagu'>DOWNLOAD MUSIC</a></li>
<li><a href='http://www.shareapasaja.co.cc/search/label/Software' target='_blank' title='Download software'>DOWNLOAD SOFTWARE</a></li>
<li><a href='http://www.shareapasaja.co.cc/search/label/VIDEO' target='_blank' title='Download video'>DOWNLOAD VIDEO</a></li>
</ul></li>

<li><a href='#'>SEPUTAR INFO</a>
<ul>
<li><a href='http://www.shareapasaja.co.cc/search/label/INFO%20UNIK' target='_blank'>INFO UNIK</a></li>
<li><a href='http://www.shareapasaja.co.cc/search/label/INFO%20SEJARAH' target='_blank'>INFO SEJARAH</a></li>
<li><a href='http://www.shareapasaja.co.cc/search/label/PROFIL' target='_blank'>INFO PROFIL</a></li>
<li><a href='http://www.shareapasaja.co.cc/search/label/INFO%20LAEN' target='_blank'>INFO LAEN</a></li>
</ul></li>

<li><a href='http://www.shareapasaja.co.cc/2011/12/tukaran-link.html' target='new' title='tukaran link yuck'>LINK EXCHANGE</a></li>

<li><a href='http://www.blogspot.com'>LOG IN | LOG OUT</a></li>

</ul>
</div>
</form>
</div></div>
</div>

Ket.
- warna biru = Link yang berwarna biru, ganti dengan link blog teman - teman.
- warna merah = Link blogger.com yang kalau di klik akan menuju ke DASBOR BLOG, teman - teman juga bisa merubah nya dengan link blog tema - teman
- warna orange = warna judul di menu mendatar drop down. Teman - teman juga bisa merubahnya dengan judul yang teman - teman inginkan.
- warna hijau = warna dari title menu blog. teman - teman sesuaikan dengan judul menu mendatar teman - teman.
Kemudian klik SIMPAN TEMPLATE dan liat hasilnya.

Gimana mudah kan ?? sekian dulu tips dari SHARE APA SAJA.

Tips membuat menu mendatar drop down

0 komentar :

Posting Komentar