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=http://lh4.ggpht.com/_viwZT63e0yQ/SyDP3dI6esI/AAAAAAAAAcY/ubwMTgUVBoY/full-smile_thumb%5B1%5D.jpg 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="http://lh4.ggpht.com/_viwZT63e0yQ/SyDP3dI6esI/AAAAAAAAAcY/ubwMTgUVBoY/full-smile_thumb%5B1%5D.jpg" 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=http://3.bp.blogspot.com/_9TJs-_3BlqY/SWk8cLr3uxI/AAAAAAAACp0/S-F5t8UvxW0/s75/Dewi+Persik+Pamer+Toket3.jpg></td><td width=34% align=center valign=top><img src=http://4.bp.blogspot.com/_bj8tnXfvl9Y/SzgQn2eqfyI/AAAAAAAABI0/gmvKCi9ybnM/s75/persik-11.jpg></td><td width=33% align=right valign=top><img src=http://3.bp.blogspot.com/_9TJs-_3BlqY/SWk8cLr3uxI/AAAAAAAACp0/S-F5t8UvxW0/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, 8-} 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:
<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>
Update (2 Des 2011)
Script ini sudah diupdate, dan sudah sesuai dengan browser terbaru, setelah sebelumnya trouble.
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.
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 :)
Untuk full otomatis tooltip, ikuti petunjuk Otomatisasi Tooltip, dengan otomatis, maka semua link, gambar, akronim akan otomatis memiliki tooltip tanpa menambahkannya secara manual.
date: (03 Desember 2011)
Script ini adalah induk dari beberapa widget otomatis yang mengandung tooltip, dan semua widget yang mengandung tooltip juga telah diupdate, maka jika Anda pernah menggunakan script lama dari widget yang lain yang mengandung tooltip, maka silahkan update sekalian. Widget-widget tersebut adalah:
1. Recent Posts Dengan Gambar dan Ringkasan Tooltip
2. Related Posts Dengan Gambar dan Ringkasan Tooltip
3. Otomatisasi Tooltip (Link, Gambar, Akronim)
Ditunggu masukannya, siapa tahu ada trouble dari kode diatas. Untuk diperbaiki. Terima Kasih :)
Info untuk pengguna script:
Anda yang menggunakan script yang ada di Warung Bebas mohon memberi vote (starred bawah Project Information) di halaman:
http://code.google.com/p/javascript-share/
Semua script widget yang di share buatan Warung Bebas semua diletakkan disitu. Ini bukan untuk kepentingan Warung Bebas sendiri, karena kalau yang digunakan sendiri disimpan di hosting berbayar, namun demi berlangsungnya keberadaan file hosting gratis di googlecode tanpa batasan bandwidth tersebut.
Karena dulu Warung Bebas punya halaman seperti itu namun karena digunakan sendiri dalam jumlah load tinggi dan tidak ada starred dari user lain, dihapus oleh google dan dibanned untuk menggunakan layanan itu lagi, makanya halaman diatas itu menggunakan akun baru. Kalau sampai dihapus lagi, maka banyak dari widget blog kawan-kawan lain juga tidak akan berfungsi. Dan Warung Bebas tidak bertanggung jawab, atas kerusakan karena dihapusnya akun javascript-share di googlecode.
Jika Anda tidak ingin memberi vote sebaiknya download filenya dan gunakan hosting Anda sendiri, jangan langsung memanggil ke URL:
http://javascript-share.googlecode.com/files/nama_file.js
Dengan begitu maka lebih aman jika file terhapus, namun risikonya Anda tidak akan menikmati update (karena jika ada bug dan diperbaiki, file selalu diperbarui).
Terima Kasih.
Artikel dengan judul "Cara Pasang Tooltip Keren di Blog Paling Mudah" ini diposkan oleh Warung Bebas dalam kategori
Belajar Ngeblog, Internet, Tips/Trik, Tutorial, dan Widget Blog » saat ini ada 62 komentar, semoga bisa memberi inspirasi atau sekedar hiburan.
[Edit Entri]
| Status: |
Widget-Widget Blog Favorite » selengkapnya- Posting Video via Keyword (Best Widget) 5
- Video relevan disemua posting otomatis 4
- Sitemap Blogspot Seperti Wordpress Plugin 4
- TV Streaming Online Indonesia Multi Channel 3
- Radio Online Multi Channel Seluruh Indonesia 3
- Links Converter Script adf.ly encode ($$$) 3
- Otomatisasi Tooltip (Link, Gambar, Akronim) 2
- Related Posts Gambar dan Ringkasan Tooltip 2
- Recent Posts Gambar dan Ringkasan Tooltip 1
| Yang online | : | |
| Sitemeter | : | |
| Alexa Rangking | : |
muantab bro.. langsung sukses...
BalasHapussaya kok ga bisa ya bro? tulung itu copas script induknya bener ga di bawah tag body? udah di copas script induknya n copas contoh nya di widget tapu ga bisa2 kenapa ya?
BalasHapushttp://jawarablog.blogspot.com
@Mustofa: Pasti bisa, karena bukan hanya Anda pertama menggunakan ini... lihat contoh pemasang terbaru di www.musiclagu.com, mungkin masih pakai. dan amati kode di sourcenya.
BalasHapus@Mustofa: Gini aja, kalau kesulitan pasang manual untuk yg ingin dipasangi tolltip, pasangi juga related post di
BalasHapushttp://www.warungbebas.com/2010/10/widget-related-posts-dengan-gambar-dan.html
lihat apakah bekerja.
untuk yang related ane udah berkunjung juga gan, cuman kalo yang link ini ga berhasil apalagi yang related nantinya.... kok di blog ane ga bisa2 ya gan? udah di pasang 2 kali scriptnya tapi pas ane posting terus copas script yang ada di tabel itu hasilnya ga seperti punya agan.... kira2 di mana ya salahnya gan?
BalasHapusyang music lagu di mana tooltipnya gan?
BalasHapus@Mustofa: Justru mencoba pakai related post karena di scirpt itu sudah dibakukan kodenya, karena dugaan saya Anda salah masang kode yg dimasukkan ke postingan. Untuk musiclagu.com, tooltipnya ada di homepage, di gambarnya lagu...
BalasHapusMasa saya salah meletakkan kode scriptnya sih bos, sedangkan naronya cuman di bawah tag body tepat kan? udah ane paste di sana tapi masih ga berhasil, apa kalo ane pake trik related posting bakalan bisaberhasil juga yang tooltip lainnya?
BalasHapuskok selalu bacaan nya Your HTML cannot be accepted: Tag is broken: A yak
BalasHapusscriptnya tidak bisa. mohon bimbingannya. thanks
BalasHapusgimana caranya supaya link atau image dalam tooltip bisa di klik seperti di tooltip fb . mohon bantuannya..
BalasHapuswidgetnya menarik banget sob... namun kayanya ada yang beda pada saat membaca halaman yang langsung berisi script... atau mungkin template saya ya yang ga support... salah satu contohnya di alamat ini:
BalasHapushttp://agoescho.blogspot.com/2010/11/kode-html-untuk-memformat-teks-text.html
makasih banget... mohon bantuannya...
oya... lupa... mo minta bantuannya lagi nich... gimana ya caranya bikin header yang berubah-ubah warna gitu ya... trims...
BalasHapuskeren bos, tp rumet di htmlnya..heuheuhuehue
BalasHapusta' review dah blog inih, ternyata punya artikel yg gaya punya hohoho \:D/
di coba ahhh =)) =))
BalasHapusmantap gan
BalasHapusvisit ya gan http://www.facebook.com/an.marlis
http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif
BalasHapusSalam Kenal Gan,Tutorial yang menarik..,Tipnya udah saya coba,bisa sih :-bd ,maaf mau nanya,kok ga bisa otomatis kaya blog ini Gan ? :d
BalasHapus@Baru Belajar Ngeblog: Memang di blog ini bisa otomatis karena ada script lainnya yang masih terikat dengan script tooltip ini, namun tidak bisa dipasang sembarangan pada template, itulah sebabnya diatas itu hanya dasarnya saja. Asal kreatif pasti bisa otomatis.
BalasHapusContoh yang otomatis pada area tertentu seperti di:
http://www.warungbebas.com/2010/10/widget-related-posts-dengan-gambar-dan.html
disitu saya masukkan di script related post. Nah untuk otomatis keseluruhan area, tiap template kan gak sama?
Sebelumnya trimakasi udah dikasi solusi (:l ,script yang otomatis juga sudah saya pasang Gan,tapi tetap sama,untuk penampilan tooltipnya harus masukan kode dulu,cape juga kalau banyak,plase Gan kasi tau type template yang cocok buat otomatis tooltip,Gan Blog ini pake template jenis apa ? :d
BalasHapus@liu benz: Akan saya coba buatkan solusinya, kalau ada wakti tentunya :)
BalasHapus@liu benz & @Baru Belajar Ngeblog: Sudah dibuatkan Gan! :) silahkan dilihat di:
BalasHapushttp://www.warungbebas.com/2011/02/otomatisasi-tooltip-link-gambar-akronim.html
muantabbbbb bro.... ini yang aku cari... :-bd
BalasHapusdi IE kok g jalAN gan?
BalasHapus@info kesehatan: :D iya, di IE ternyata gak jalan....
BalasHapussaya banyak belajar dari anda..
BalasHapusmuantap gan\:d/
BalasHapusgan mu tanya nih......kalu code body letaknya di sebelah mana ya.?di cari2 ko ga ada ya...tolong dong di kasih tau,.......
BalasHapussip,,,deh,,,izin copas ya,,
BalasHapusGan.
BalasHapusKlo Tooltip untuk link dalam artikel agar ada Deskripsi dan Gambar otomatis sesuai artikel ada gk ??
Misalnya :
Seperti Popular Post di Blog ini.
Yang Di lengkapi dengan Foto + Deskripsi, atau seperti 'Download MP3 Holy Quran' yang ada di sidebar yang juga di lengkapi dengan gambar & Deskripsi.
Tapi ini link dalam artikel bukan widget, ada gk ?? tolong buat donk gan.
pliss yaa.. :(
gan gambar nya cuma itu aja ya..
BalasHapusvisit blog ane ya gan..
MesotheliomaTreatments
Mas warnanya kok gak bisa berubah ya?! Padahal Kode Warnanya sudah aku rubah
BalasHapusMantap ...aku suka banget....:)
BalasHapusluar biasa widget ini
BalasHapusuntuk script induknya saja yang update atau semuanya gan..???
BalasHapusijin sedot ya..
BalasHapusMantap kang.. Work tuh..
BalasHapusterima kasih mas sangat membantu.
BalasHapuskapan-kapan kunjungi blog saya mas. hehhe
terima kasih atas informasinya yang sangat bermanfaat dan bermutu sekali, salam kenal, and visit me back
BalasHapusmas kalo untuk wordpress nya gmna mas ??
BalasHapus@dguelo.com: Ya sama saja bos, :) tiap halaman web kan pasti ada kode:
BalasHapus< body >
biasanya di header.php pada file2 template WP aktif. Kalau pakai self hosting tidak bisa explore, kan mending pake gratisan kayak blog ini bos.... :P
Maaf mas saya mau nanya, kira2 - kira apa tooltip ini nantinya tidak akan memberatkan loading blog ya ?
BalasHapusterima kasih..
@Jefry: Kalo ingin ringan, jangan posting gambar, jangan pasang script, jangan pasang iklan, pasti ringan :), template jangan ada gambar blass juga.
BalasHapusDari keseluruhan blog warung bebas ini 80% beban loading disebabkan oleh script macam2 iklan luar dan gambar, ini sudah di tes.
Internet masa kini memang kudu cepat, kalo gak jangan buka situs entertaint kayak youtube dll, buka situs berisi tulisan doang saja.
Kalau bicara tooltip diatas, coba download file scriptnya ini:
http://javascript-share.googlecode.com/files/wb_tooltips.js
dan perhatikan berapa ukurannya..., tidak sampai 3,5kb. Bandingkan dengan script berikut ini yg justru bawaan blogger yg ada di paling bawah tiap blog di blogspot:
http://www.blogger.com/static/v1/widgets/4000939711-widgets.js
Belum lagi script iklan lain yang selalu memanggil script induk ukuran besar dan proses yang rumit dan berat... so, masih takut berat gara2 script? jangan masang apapun attribute kalau gitu :D
rasanya pengen pasang tertarik juga, cuma keliatannya ribet bikin pusing. mungkin nda biasa kali gan ya hehehehehe.
BalasHapuscari kode body gak ketemu gan..? posisinya dimana ya di atas atas diakhir ?
BalasHapusDitengah di HTML template blogspot, cari saja pake CTRL+F
Hapuskayaknya senasib neh mas herdi... nyari body nya ngak ketemu, pake ctrl+F ngak ada juga. letak persisnya setelah kode apa gan?
Hapusapa karena ngak sengaja sempet ane rubah2 yah?
tolongin dong gan.. butuh banget tooltip.
tengqiyu gan sebelumnya..
Gak mungkin gak ada body, karena itu syarat utama, apalagi kalau blogspot, kalau tidak ada kode itu pasti template tidak mau disimpan. Pasti salahnya pada kata untuk Ctrl+F. Karena ada kemungkinan tag body memiliki attribute. misalnya onload dll. Berikut ini beberapa bentuk tag body:
Hapus<body>
<body onload=... >
<body style=... >
dll attirbute.
Nah jadi sebaiknya cari dengan:
&alt;body
Jadi dengan pembukanya saja...
Haduuh salah masukkan karakter lagi :((
HapusIni diulang komen diatas.
===
Gak mungkin gak ada body, karena itu syarat utama, apalagi kalau blogspot, kalau tidak ada kode itu pasti template tidak mau disimpan. Pasti salahnya pada kata untuk Ctrl+F. Karena ada kemungkinan tag body memiliki attribute. misalnya onload dll. Berikut ini beberapa bentuk tag body:
<body>
<body onload=... >
<body style=... >
dll attirbute.
Nah jadi sebaiknya cari dengan:
<body
Jadi dengan pembukanya saja tanpa penutup, kalau cara ini tidak ketemu juga saya jadi penasaran juga, silahkan contact us, nanti dari balasan email, kirimkan copy template Anda, karena saya juga jadi ingin tahu keanehan seperti ini.
nah, itu dia. alhamdulillah.. akhirnya ke jawab juga. sebenrnya ane mau ngasih tahu itu (ada kalimat lain setelah body) tapi ane copy HTMLnya di komentar in i ngak bisa2 di tolak terus.
Hapusini HTMLnya kayak gini:
<body oncontextmenu
makasih gan elmunya..
ane coba dulu
alhamdulillah... berhasil gan
Hapussemoga Tuhan memberikan pahala yang banyak buat gan....
tapi kalo boleh minta elmunya satu lagi gan. mau nambahin keterangan kayak contoh diatas bagaimana caranya gan, jadi bukan cuman gambarnya doang yang muncul.
maaf neh gan ngrepotin..
Lho, contoh atas yang mana? diatas itu tiap contoh kan sudah ada kode HTMLnya? tinggal edit sesuai gambar dan keterangannya. Bingung saya baca pertanyaan ini. :-/ :-/ :-/
Hapusijin copaas bang....
BalasHapushttp://dhantt.blogspot.com
Copas kok minta ijin...
HapusBagus ini.. ijin untuk pasang bos...
BalasHapusNice blog !! thanks for sharing with us.
BalasHapusEmaar MGF Gurgaon Greens
Nice info, thanks for sharing ...... Salam dan terima kasih.
BalasHapusI’m lucky that I discovered this internet web site, just the proper information that I was looking for!
BalasHapusapa gue salah copy or pasang script ya kang ?
BalasHapustapi utk template baru dr blogspot kayaknya gak mempan tuch!
Yang berhasil sudah banyak, asalkan tidak membuang/mengubah bagian yang tidak dibahas diatas, pasti bisa. Untuk template blogger baru maksudnya yg dinamic view? kalau dinamic view memang mungkin bermasalah karena memang terdiri dari javascript data semua bukan HTML tag, perlu penanganan khusus.
HapusDi tempatku berhasil Gan. Terima kasih banyak. Sebenernya pengin juga sih tooltip otomatis keterangan/gambar. Tapi ribet kali ya? hehe.
BalasHapusGak ribet kok, tinggap paste kode dan semua otomatis. :)
Hapus