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>
Coba lihat hasilnya pada halaman blog anda, pasti akan muncul tooltip yang sangat keren. Selamat mencoba!!!
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'/>5. Paste kode dibawah ini diatas kode </body>
<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'>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>6. Terakhir simpan templatenya
Coba lihat hasilnya pada halaman blog anda, pasti akan muncul tooltip yang sangat keren. Selamat mencoba!!!
keren banget :)
ReplyDeletemakasih sob
Delete