Sabtu, 06 Oktober 2012

Cara Membuat Link Dengan Efek Tooltip


Kali ini Saya akan membahas cara membuat link dengan efek tooltip secara otomatis ketika link disentuh oleh cursor.
Tooltip adalah deskripsi dari sebuah tulisan atau link, untuk memperindah dan memperjelas saja.
Tooltip yang Saya bahas ini sudah secara otomatis terkait pada link yang ada di blog atau web.
Tanpa banyak basa basi langsung saja lihat cara membuatnya di bawah ini ↓



Cara membuatnya :

  • Login ke blogger.com, jika sudah,
  • Pilih Template → Edit HTML → Expand Template Widget
  • Cari kode <body> agar mudah mencari tekan f3
  • Letakkan script di bawah ini, di bawah kode <body>


<script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</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 solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>

  • Setelah itu cari kode </body> dan letakkan script di bawah ini, di atas kode </body>


</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script>


  • Simpan dan lihat hasilnya

Selamat Mencoba !


Tidak ada komentar:

Posting Komentar