Sobat tentunya sudah tahu apa itu tooltips. Sebenarnya ada cara mudah membuat tooltips di blog. Script ini bisa digunakan pada blogspot maupun wordpress. Asal jangan wordpress yang Self Hosting. Selain itu tooltips ini mudah diaplikasikan dan ringan. Jadi tidak akan membebani blog sobat
Script tooltips akan dipasang pada bagian body blog sobat. sehingga nantinya tooltips akan keluar setelah blog selesai diloading. Sebenarnya banyak sekali penerapan tooltips yang bisa digunakan. tetapi karena saya masih tahap belajar, jadi hanya bisa mengaplikasikan tooltips otomatis saja
Untuk mencoba secara langsung silakan ikuti tutorial berikut:
1. Login ke Dasboard Blogger sobat
2. Masuk ke menu Rancangan > Edit HTML
3. Letakkan script berikut tepat dibawah kode <body>
<style>#wb_fs_linktooltip{display:none;visibility:hidden;}</style><a id='wb_fs_linktooltip' href='http://www.warungbebas.com/'>Warung Bebas</a><script type='text/javascript' src='http://dns.warungbebas.com/4you/wb_fs_scriptwidget.js'></script><script type='text/javascript'>wbwidget("widgetslinkkodemutooltip","panggiltoolcodingtipsstyle",7,4,17);wbwidget("widgetcodelinkkodemutooltip","callscripttoolcodingtips",10,4,20);</script> <style type='text/css'>#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}</style>
<script type='text/javascript'>wbwidget("widgetcodelinkkodemutooltip", "callscripttoolcodingtipsauto", 10, 4, 20)</script> <style type='text/css'>.fs_atrplusImg{max-width:125px;min-width:30px; padding:3px;border:1px solid #ccc;background:#f0f0f0;margin:3px 0 0 0;} .fsatrplusDiv{max-width:125px;} .fs_atrbks img{max-width:125px; margin:3px 0 0 0;}</style> <div id="warungbebasautotooltip">
<script type='text/javascript'>wbwidget("widgetcodelinkkodemutooltip", "callscripttoolcodingtipsauto", 10, 4, 20)</script> <style type='text/css'>.fs_atrplusImg{max-width:125px;min-width:30px; padding:3px;border:1px solid #ccc;background:#f0f0f0;margin:3px 0 0 0;} .fsatrplusDiv{max-width:125px;} .fs_atrbks img{max-width:125px; margin:3px 0 0 0;}</style> <div id="warungbebasautotooltip">
4. Selanjutnya letakkan script berikut tepat diatas </body>
</div><script type='text/javascript'>fs_atrplus('warungbebasautotooltip')</script>
5. Simpan template dan lihat hasilnya. Arahkan cursor mouse sobat pada link - link yang ada di blog sobat
Untuk pertanyaan seputar script ini silakan kunjungi Otomatisasi Tooltip (Link, Gambar, Akronim) yang merupakan pencipta script ini.
Silakan dicoba
Tidak ada komentar:
Posting Komentar