Cara membuat menu tooltip

Andilangodang – Cara membuat menu tooltip.

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.Berikut ini anda bisa lihat contoh menu tooltip di atas :



Sudah lihat,bagus kan....nah anda ingin caranya.berikut kami uraikan:

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan Klik tab Edit HTML. 

4.Cari kode </head> 

5.Copy paste kode berikut dan taruh di atas kode </head>

 ini Scriptnya : 

<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

7.Kemudian ke rancangan >>>buka Elemen laman>>>tambah Gadget. Masukan Script berikut dan taruh di dalamnya.

ini Scriptnya :

 <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>


8.Kemudian simpan Gadget anda..

catatan : - ULR ARTIKEL ANDA = Ganti dengan Url anda
             - JUDUL ARTIKEL ANDA = Ganti Judul artikel anda
             - ULR GAMBAR ANDA =Ganti dengan Url anda bisa di Photobucket.com
             - DISINI INFORMASI SINGKAT ARTIKEL ANDA = Ganti dengan informasi singkat 
DST....
anda,jangan terlalu panjang.

 ok,Selamat mencoba semoga berhasil....
Contoh pada Gambar di atas: 

[Sumber :Carabuatwebgratis]