Membuat Drop Down Menu Ala Widget Subscribe

Membuat Drop Down Menu Ala Widget Subscribe
Brikut Inspirasi Awal saya he he, maaf yah :

 

Di situ Drop Downnya Berupa Animasi dan Gambar Bukan Text Seperti CSS biasa makanya itu unik buat di jadikan menu... berikut Tutornya yah... silahkan yang berminat atau yang sekedar membaca silahkan saya sambut dengan senyuman


Untuk membuatnya silahkan lihat kode di bawah ini:

<script type="text/javascript">

function showDiv(objectID) {

var theElementStyle = document.getElementById(objectID);

if(theElementStyle.style.display == "block"){

theElementStyle.style.display = "none";

}else{

theElementStyle.style.display = "block";}

}

</script>

<style type="text/css">

#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}

#TW-feed li ul {display:none;position:absolute;background-color:#ffffff;padding:3px;border:1px solid #cccccc;}

#TW-feed li {font-weight:bold; color:#EC8132;}

#TW-feed ul li {padding-bottom:3px;}

</style>

<div onmouseover="showDiv('TW-Pop');return false;" onmouseout="showDiv('TW-Pop');return false;">

<ul id="TW-feed">

<li>Menu

<ul id="TW-Pop">

<li><a href="http://www.clixsense.com/?2360995"><img style="border: 1px solid ; width: 100px; height: 20px;" src="http://www.clixsense.com/Ad/clixsense5.gif"/></a>

</li>

<li><a href="http://bux.to/?r=buxtoade"><img style="border: 1px solid ; width: 100px; height: 20px;" src="http://bux.to/images/top.png"/></a>

</li>

<li><a href="http://www.kios-pulsa.com/?id=daftar" target="new" title="Pulsa murah, dan server Stabil">Kios Pulsa</a>

</li>

<li><a href="http://kumpulblogger.com/signup.php?refid=8486" target="new" title="Dibayar Rupiah per Klik">Kumpul Blogger</a>

</li>

<li><a style="font:9px Verdana, Arial, Helvetica, sans-serif; width:100px;" href=" http://www.indoptc.com/?r=contoh">INDOPTC</a></li>

</ul></li></ul></div>

Silahkan Copy Paste Kode Tersebut dengan menambahkannya Pada Widget HTML kita, dan beberapa hal yang perlu/mungkin mau di ganti:
#ffffff : adalah warna Bacground Drop Drown
border:1px merupakan Tebal Border Menu dan Silahkan Ganti Warnanya yang ini #cccccc dan sesuaikan dengan blog kita,
Ganti Url yang Garis bawah warna Biru sesuai dengan Link tujuan.

Jika ingin menambahkan Menu Silahkan Copy Paste Kode terakhir yang ada backgrounya warna biru muda.....dan tempatkan di bawah kode tersebut..... 

Seandanya Menunya gak menggunakan Gambar Silahkan Hapus dari Tag  <a href= sampai dengan </a> dan Ganti dengan Teks...

 Ini Contoh Hasilnya di [dunia-Blogger] ketika Cursor di Arahkan Ke Logo Blogger.

Selamat Mencoba, Semoga Berhasil, Ini Juga Bisa di Gunakan Untuk Menampilkan Link Teman, Iklan, dan Lainnya sehingga Ruangan Blog kita semakin luas,  Silahkan lihat di blog ini di bagian Iklan... kurang lebih seperti itu, silahkan ber-experiment dengan menggunakan kode blink, marquee, dan lainnya semoga bermanfaat..!!

.	Related Post