Cara Pasang Tooltip Keren di Blog Paling Mudah

Cara memasang tooltip di blog dengan cara sangat simple/sederhana. Bisa digunakan untuk blog dengan platform apa saja, kecuali yang gak boleh memasang kode javascript seperti wordpress.com. Untuk blogspot, Wordpress CMS di self hosting, Joomla dan lain mesin blog lainnya bisa digunakan. Tooltip ini sangat ringan dan kecil sekali ukuran kodenya, dan sudah disetting flexible, kalau sudah mepet kebatas kanan monitor, maka akan berada disebelah kiri.

Tooltip semacam ini sangat membantu dalam mempromosikan sesuatu, baik itu sebuah postingan menarik maupun iklan-iklan tertentu semacam iklan affiliasi dan lain sebagainya. Contoh misalnya dibawah ini:

Dipasang Pada	Contoh	Kode HTML
Tag A (anchor/link)	Download Mp3 Alqur'an	<a href="http://www.warungbebas.com/2010/09/download-mp3-alquran-30-juz-lengkap.html" onmouseover="tooltip.show('<b>Download Mp3 Alquran</b><br>by Abdul Rahman Ibn Abdul Aziz as-Sudais an-Najdi')" onmouseout="tooltip.hide()">Download Mp3 Alqur'an</a>
Tag IMG (gambar)		<img style="cursor:help" onmouseover="tooltip.show('<center><b>Burung Terbang</b><br><img src=http://dns.warungbebas.com/imagesarea/icon-n-bg/emailbirth.gif><br>Ini burung yang terbang gak brenti-brenti, hehe...</center>')" onmouseout="tooltip.hide()" src="http://dns.warungbebas.com/imagesarea/icon-n-bg/emailbirth.gif" alt="burung" border="0"/>
Tag A dengan IMG		<a rel="nofollow" href="http://adsensecamp.com/?ref_id=1639" onmouseover="tooltip.show('<b><u>Iklan PPC Google Adsense Indonesia</u></b><br><br><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk33NUi0vROAiY11oODOt2_tDK0MUL8tKf5z-alsyYBNsPpE0v49OhIB3GCP5xFQNKOTc-1kzpJ0xdyGyfg81XMtdGJa8ZL4e51KVSvP5_pw0V8tghRMHiaqm9K49-hdxe-pWEKwIpyac/ align=left class=float-left-albri-over>Program iklan PPC yang mudah diikuti bagi para pemula, maksudnya blogger pemula, karena tidak ada persyaratan yang menyulitkan, tinggal daftar dan pasang. Lumayan daripada blognya gak ada hiasan iklannya, kalau ada yang melakukan klik maka Anda akan mendapat rejeki.')" onmouseout="tooltip.hide()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk33NUi0vROAiY11oODOt2_tDK0MUL8tKf5z-alsyYBNsPpE0v49OhIB3GCP5xFQNKOTc-1kzpJ0xdyGyfg81XMtdGJa8ZL4e51KVSvP5_pw0V8tghRMHiaqm9K49-hdxe-pWEKwIpyac/" alt="Iklan PPC" border="0"/></a>
dll, Model Expert lain	Koleksi Foto Dewi Persik	<a href="http://www.warungbebas.com/2010/01/foto-foto-dewi-persik-bugil.html" onmouseover="tooltip.show('<center><b><u>Koleksi Foto Hot Dewi Persik</u></b></center><table width=100%><tr><td width=33% valign=top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOV4QtkYsXt6GHSu5yn2DCMR7NzBKyISglUZ9EIpM-WPiAFNjonBZUIRDwxcSu7-WA-YrkmxfEjVMwNj_JIFa2nZ5cd40mgFxthZ0j4hc4HMpoP9qQ4St44gUx5sHcbe4j8Z-VCDV1pTNA/s75/Dewi+Persik+Pamer+Toket3.jpg></td><td width=34% align=center valign=top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB81aWVRxp1_9h77Fl_Prk6JTKCldyVLoduQ_CoTC77yutQuVVE_D5qL6nGya1aGWRFtUCVuI6HT3BHZI9U5M3WQ5fMrRF1XcaGlFoIxs5VPJB2RZf6tG0G9-6eu0Lhdmy1J9Phgpqe8R6/s75/persik-11.jpg></td><td width=33% align=right valign=top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOV4QtkYsXt6GHSu5yn2DCMR7NzBKyISglUZ9EIpM-WPiAFNjonBZUIRDwxcSu7-WA-YrkmxfEjVMwNj_JIFa2nZ5cd40mgFxthZ0j4hc4HMpoP9qQ4St44gUx5sHcbe4j8Z-VCDV1pTNA/s75/Dewi+Persik+Pamer+Toket3.jpg></td></tr></table><center>Mantab Gan!</center>')" onmouseout="tooltip.hide()"><strong>Koleksi Foto Dewi Persik</strong></a>

Diatas hanya contoh saja, intinya bisa dipasang dimana saja, dan isi dari tooltip bisa menerima tag HTML apa saja. dan bisa dikombinasi sesuai keinginan dan kreatifitas kita. Hanya satu yang menjadi pantangan, yaitu karakter (") dan ('). Kalau ada karakter dua jenis tanda petik itu bisa amburadul deh..

Jika mau memasang di blog Anda mudah sekali, tinggal copy kode dibawah ini:
Kode Induk Tooltip:
<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>

Jika warna tooltip kurang sesuai dengan selera, silahkan diutak-atik kode warna biru diatas. Tapi awalnya lebih baik pakai itu saja.

Note: Link pada Kode Induk Tooltip diatas tidak akan terlihat di blog Anda, dan jangan dibuang karena tidak akan bekerja scriptnya.

Letakkan tepat dibawah <body> di template blog Anda. Beres dah..., lalu buat postingan atau dipasang di sidebar apapun yang ingin Anda pasang, kalau kesulitan pertama kali bikin silahkan dicopas kode salah satu ditabel atas lalu edit sesuai keinginan, pasang di blog. Ingat ya..., tepat dibawah <body>, bukan dibawah </body>

Pada cara pemasangan tooltip kali ini untuk obyek yang dipasangi tooltip masih manual, nanti akan dilanjutkan bagaimana dengan widget yang melakukan otomatisasi tooltip, kalau manual kan capek, Anda lihat semua tooltip di Warung Bebas ini, semua itu otomatis, kalau manual satu-satu bisa termehek-mehek.
InsyaAllah akan segera dilanjutkan tips tambahannya, dan semua urut, artinya pada widget selanjutnya akan terkait dengan kode tooltip ini. Yang sudah terposting untuk yang otomatis lihat di Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip

Ditunggu masukannya, siapa tahu ada trouble dari kode diatas. Untuk diperbaiki. Terima Kasih

Facebook Twitter Google+ Linkedin Digg