Selamat siang sobat farid Blog IT kali ini saya Berbagi Tutor lagi nhe sob yaitu Tooltip otomatis untuk semua link . Tooltip sudah banyak di bahas di banyak blog tetangga ,dan hampir semua blog menggunakan tooltip,seperti postingan sebelumnya yaitu tooltip dengan effec gambar kali ini pun yang akan kita bahas adalah masih seputar tooltip tapi dalam bentuk berbeda.,dan aku kira tooltip yang ini sangat simple kita sudah tidak perlu lagi menggunakan kode Title lagi karena semua yang mengandung link pasti akan keluar tooltip nya.sebagai contoh coba arahkan kursor ke semua link di blogku ini pasti tooltipnya akan keluar nah untuk cara pembuatanya ...youk kita langsung aja ..ke tempat kejadian perkara ...ha ha ha ha ha
- tentunya sobat harus logi dulu ke blogger.com
- lalu klik dasbor /dasboard yang tempatnya ada di Navbar yang tempatnya ada di kanan atas blog kita
- Lalu pilih Edit HTML (jangan lupa download lengkap dulu template )
- Cari kode <body>biar mudah gunakan Ctrl+F lalu taruh kode di bawah ini tepat tepat di bawah kode <body>
-
Berikut kode nya :
<script src="http://javascript-share.googlecode.com/files/wb.js"></script><a id='wb_ttauth' href='http://www.warungbebas.com'>Warung Internet</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:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}"
};
//]]></script><script src="http://javascript-share.googlecode.com/files/wb_tooltips.js"></script><script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><!-- pembuka warungbebasautotooltip --><div id="warungbebasautotooltip">
- Jika warna tooltip kurang sesuai dengan selera, silahkan diutak-atik kode warna biru diatas. Tapi awalnya lebih baik pakai itu saja. Yang warna biru itu untuk css, atau style, pengaturan background dan garis tepi, mungkin Anda ingin menyesuaikan dengan warna dasar template Anda, cari saja tutorial css yang mengandung kode biru diatas itu. Sedangkan yang ditandai warna merah itu adalah pengaturan untuk scriptnya, banyak kalau mau jelasin satu per satu, pokoknya coba-coba saja deh dan lihat efeknya kalau kamu ada waktu.
- Kemudian cari kode </body>lalu tempatkan kode di bawah ini tepat di atas kode </body> Berikut kodenya:
</div><!-- penutup
warungbebasautotooltip --><script
type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>
- Lalu Save template dan lihat hasilnya
oke selamat mencoba dan tunggu ection ection karina selanjut nya yach ..janagn lupa jika artikel ini bermanfaat kasih komentar yach
Sumber http://www.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html
2 Comments
