Postingan kali ini saya akan men-share sebuah tutorial cara membuat menu dropdown horizontal tanpa edit html, wuih,,,enak khan g ush ribet" edit html segala, hanya buat widget baru trus dimasukkin deh kodenya,
Ok gan jangan berlama-lama lagi langsung saja kita simak tutorial di bawah ini...cekidot...!!!
1. Log in ke blog anda
2. Klik Rancangan / Layout
3. Klik Tambah gadget
4. Pilih html/javascript
5. Kopy paste kode di bawah ini
Code :
<style>/* ================================================================Editing: SysteM Of BloG=================================================================== */#menu {list-style-type:none; margin:5px; padding:0;}#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:200px; height:3em; z-index:100;}#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}#menu li a, #menu li a:visited {text-decoration:none;}#menu li dd {display:none;}#menu li a:hover {border:0;}#menu li:hover dd, #menu li a:hover dd {display:block;}#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}#menu dl {width: 200 px; margin: 0; padding: 0; background: #c9ba65;}#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #b60000; border-bottom:1px dashed darkred; border-top:1px dashed gray; text-align:center;}#menu .one {background: #000; border-top:5px dashed #b60000;}#menu .two {background: #000; border-top:5px dashed #b60000;}#menu .three {background: #000; border-top:5px dashed #b60000;}#menu .four {background: #000; border-top:5px dashed #b60000;}#menu .one dt {background: black;}#menu .two dt {background: black;}#menu .three dt {background: black;}#menu .four dt {background: black;}#menu dd {margin:0; padding:0; color: #000; font-size: 1em; text-align:center;}#menu .one dd {border-bottom:1px dashed darkred;}#menu .two dd {border-bottom:1px dashed darkred;}#menu .three dd {border-bottom:1px dashed darkred;}#menu .four dd {border-bottom:1px dashed darkred;}#menu dd.last {border-bottom:1px dashed darkred;}#menu dt a, #menu dt a:visited {display:block; color:green;}#menu dd a, #menu dd a:visited {color:darkred; text-decoration:none; display:block; padding:4px 5px 4px 20px; width: 170px ;}#menu .one dd a {background:black; color:green;}#menu .two dd a {background:black; color:green;}#menu .three dd a {background:black; color:green;}#menu .four dd a {background:black; color:green;}#menu .one dd a:hover {background: #665; color:#000;}#menu .two dd a:hover {background: #665; color:#000;}#menu .three dd a:hover {background: #665; color:#000;}#menu .four dd a:hover {background: #665; color:#000;}
<ul id="menu"><!-- drop down menu start --><li><!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]--><dl class="one"><!-- Alter the links with your own --><dt><a href="Link kepala Anda Disini">Nama Link Kepala</a></dt><dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]--><dl class="two"><dt><a href="Link Anda Disini">Nama Link Kepala</a></dt><dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href= "Link Anda Disini" >Nama Link drop down</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]--><dl class="three"><dt><a href="Link Anda Disini">Nama Link Kepala</a></dt><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><!--[if lte IE 6]><a href=" #Link "><table><tr><td><![endif]--><dl class="four"><dt><a href="Link Anda Disini">Nama Link Kepala</a></dt><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd><dd><a href="Link Anda Disini">Nama Link drop down</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul><!-- end of drop down menu -->
Note :
- Kode 200 adalah kode lebar, menu atas dan kode lebar menu drop down nya, sobat bisa sesuaikan dengan lebar blog masing-masing.
- Kode 170 adalah Lebar menu drop down nya. . . . . .sobat sesuaikan bila ingin merubah lebar menu atasnya.,
- Kode #Link ganti dengan link, atau tidak usah anda ganti juga tidak apa2,
- Ganti kode "Link Anda Disini" dengan Link yang akan anda gunakan.
- Ganti kode "Nama Link drop down" dengan Nama Link Nya
- Ganti kode "Nama Link Kepala" dengan Nama Link Nya juga,
Tidak ada komentar:
Posting Komentar