Posted by : Arief Hilman Nugraha Wednesday, January 16, 2013

Tooltips adalah kotak yang menampilkan informasi dari link anda ketika cursor mouse berada tepat diatasnya. Kali ini kita akan membuat sebuah tooltip seperti pada gambar disamping ini. Tooltip yang saya buat ini akan menampilkan informasi mengenai judul link dalam sebuah kotak. Jika sudah gak sabaran langsung saja dipraktekin...

1. Login ke blogger
2. Masuklah ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'>Created by Warung Bebas </a> <a href='http://www.blogtrikdantips.blogspot.com'>Modify by Blog Trik dan Tips</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px dashed #778899;background:#4db2b3}#ttcont{background:#e6fffa;color:#000000}"
};
//]]></script><script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb_tooltips.js'/>
<script src='http://blogtrikdantips-blogspot.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
5. Paste kode dibawah ini diatas kode </body>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>
6. Terakhir simpan templatenya

Coba lihat hasilnya pada halaman blog anda, pasti akan muncul tooltip yang sangat keren. Selamat mencoba!!!

{ 2 comments ... read them below or Comment }

Welcome to My Blog

Berlangganan Lewat Email

Subscribe via Email

Translate

Lagu

- Copyright © Arief Hilman Nugraha - Robotic Notes - Disponsori Oleh Blogger - Editing by Arief Hilman Nugraha -