Drop Down Menu Ala Widget Subscribe

Oleh Ade Sanusi

8.12.2008

Bagikan :

Tweet

Akhirnya Saya berhasil juga Ide saya untuk membuat menu ala [Widget Subscribe] Sebenanya sih dah ada 1 mingguan ide ini tapi belum ketemu ketemu pas Googling dan Hari ini [Senin 11 Agustus 2008] Ba'da Magrib saya sempat Chat Ma Mas [ Umar Khaliyf(fj_nine) ]  blognya di sini http://www.analogikan.web.id/ Sebelumnya sih Chat biasa, biasa lah sesama Blogger, gara garanya Blognya beliau gak bisa di buka eh taunya salah di Status YM nya mas Umar, yaitu kurang www pantesan aja gak berhasil-berhasil.... Ya udah deh Curhatnya disitu dulu yah... nah pas kemudain saya bertanya aja ke mas Umar tentang IDE yah lumayan lah kayaknya belum ada yang gitu he he... kalo Css Drop Down Menu ada di http://cssmenumaker.com/ dan itu biasa.. aja kayaknya he he yah nyari yang beda ja gitu.....


Nah saya bertanya tuh ke mas Umar dan beliau baik loh mau nyariin buat saya he he dan beliau juga sih udah posting di http://www.analogikan.web.id/2008/08/buat-menu-chiklet-menjadi-dropdown.html, tapi agak beda sih ma saya,  saya mah mang dari awal mau buat menu di blog saya kayak gitu.....,
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..!!

Tag : HTML dan Java Script, Tips and Trik