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://ko2-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.ko2.blogspot.com'>Modify by Blogger Tutorial</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://la0-blogspot.googlecode.com/files/wb_tooltips.js'/>
<script src='http://ko2-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!!!
0 comment:
Post a Comment