Membuat menu Tooltips

Membuat menu Tooltips,,Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link atau kita bisa gunakan menu ini sebagai daftar artikel, menu ini juga dilengkapi dengan tooltip yang berisi gambar dan informasi singkat tentang artikel atau link lain yang ada pada daftar tersebut. Cara membuat menu ini sangat mudah, yang kita perlukan hanya kode HTML dan beberapa kode CSS, tanpa menggunakan Javascript.

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

   <style type='text/css'> .tooltp a:link,a:visited{ display:block; float:left; color:#FFFFFF; border:1px solid #ffffff; background-color:#004478; width:220px; min-height: 45px; text-align:left; padding:5px; text-decoration:none; } .tooltp a:hover,a:active { color:#004478; background-color:#B3C0EF; padding:5px; } .tooltp li{ display:block; color:#FFFFFF; border:1px solid #ffffff; background-color:#8797D3; width:245px; min-height: 58px; padding:4px; text-decoration:none; } .tooltp li:hover,li:active { border:1px solid #5867A0; background-color:#5867A0; } a.tooltp { position:relative; z-index:24; text-decoration:none; } a.tooltp span{ display: none; } a.tooltp:hover span.muncul { display: block; position:absolute; float:left; top:-6px; width:200px; border:2px solid #5867A0; border-top-width:134px; border-right-width:5px; border-bottom-width:5px; font-style:italic; color:#004478; background-color:#E9EEFF; margin-left:244px; padding: 10px; } .tooltpimg{ display: block; position:absolute; float:left; top:-128px; margin-left: -9px; width:215px; height:119px; border:2px solid #ffffff; } </style>  
6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget pada halaman depan blog anda. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

   <div class="tooltp"> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR) ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> </div>  

Catatam :

• Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda :

     <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li>    

5. Simpan.

Selamat mencoba ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih. 

sumber   http://www.carabuatwebgratis.com/2011/06/cara-membuat-menu-tooltip.html