Minggu, 20 September 2009

Cara Membuat Tooltips Otomatis di Blog

17.49  dudal blog  No comments

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://jurus2ngeblog-blogspot.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'>Created by Warung Bebas </a> <a href='http://www.jurus2ngeblog.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://jurus2ngeblog-blogspot.googlecode.com/files/wb_tooltips.js'/>
<script src='http://jurus2ngeblog-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!!!

Posted in: ,

0 komentar:

Posting Komentar

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More