Warung Bebas

Senin, 22 Agustus 2011

Tutorial Blog : Cara Membuat Tooltips Yang Keren Di Blog Bagian 1







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">





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


0 komentar em “Tutorial Blog : Cara Membuat Tooltips Yang Keren Di Blog Bagian 1”

Posting Komentar