Dua Kalkulator Kehamilan Puisi Lucu & Romantis Kalimat/Ungkapan Indah Ucapan Selamat Malam Romantis Kata-2 GalauKoleksi Kata-Kata Gombal Mukio
Download Ringtone Lucu Gokil
Curhat Cewek Tentang Cowok
Punya Pacar vs LDR vs Jomblo
Alat Membuat Tulisan Gaul Alay
Alat Membuat Tulisan Terbalik
Daftar Semua Kategori:X
X
Ramalan Zodiak Hari Ini Kata Mutiara Cinta Kompilasi Lagu Nostalgia Cara Download Video Youtube Status Facebook LucuKumpulan SMS Cinta Romantis

Cara Pasang Tooltip Keren di Blog 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) burung <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 Iklan PPC <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.

Informasi Update

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>

Cara Pasang Tooltip Keren di Blog 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.

Update: (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.

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

62 komentar terhadap "Cara Pasang Tooltip Keren di Blog Paling Mudah"

  1. muantab bro.. langsung sukses...

    BalasHapus
  2. saya 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?

    http://jawarablog.blogspot.com

    BalasHapus
  3. @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
  4. @Mustofa: Gini aja, kalau kesulitan pasang manual untuk yg ingin dipasangi tolltip, pasangi juga related post di

    http://www.warungbebas.com/2010/10/widget-related-posts-dengan-gambar-dan.html

    lihat apakah bekerja.

    BalasHapus
  5. 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?

    BalasHapus
  6. yang music lagu di mana tooltipnya gan?

    BalasHapus
  7. @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...

    BalasHapus
  8. Masa 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?

    BalasHapus
  9. kok selalu bacaan nya Your HTML cannot be accepted: Tag is broken: A yak

    BalasHapus
  10. scriptnya tidak bisa. mohon bimbingannya. thanks

    BalasHapus
  11. gimana caranya supaya link atau image dalam tooltip bisa di klik seperti di tooltip fb . mohon bantuannya..

    BalasHapus
  12. widgetnya 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:
    http://agoescho.blogspot.com/2010/11/kode-html-untuk-memformat-teks-text.html
    makasih banget... mohon bantuannya...

    BalasHapus
  13. oya... lupa... mo minta bantuannya lagi nich... gimana ya caranya bikin header yang berubah-ubah warna gitu ya... trims...

    BalasHapus
  14. keren bos, tp rumet di htmlnya..heuheuhuehue
    ta' review dah blog inih, ternyata punya artikel yg gaya punya hohoho \:D/

    BalasHapus
  15. mantap gan

    visit ya gan http://www.facebook.com/an.marlis

    BalasHapus
  16. http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/77.gif

    BalasHapus
  17. Salam 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
  18. @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.

    Contoh 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?

    BalasHapus
  19. 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
  20. @liu benz: Akan saya coba buatkan solusinya, kalau ada wakti tentunya :)

    BalasHapus
  21. muantabbbbb bro.... ini yang aku cari... :-bd

    BalasHapus
  22. gan mu tanya nih......kalu code body letaknya di sebelah mana ya.?di cari2 ko ga ada ya...tolong dong di kasih tau,.......

    BalasHapus
  23. Gan.
    Klo 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.. :(

    BalasHapus
  24. gan gambar nya cuma itu aja ya..

    visit blog ane ya gan..
    MesotheliomaTreatments

    BalasHapus
  25. Mas warnanya kok gak bisa berubah ya?! Padahal Kode Warnanya sudah aku rubah

    BalasHapus
  26. untuk script induknya saja yang update atau semuanya gan..???

    BalasHapus
  27. terima kasih mas sangat membantu.
    kapan-kapan kunjungi blog saya mas. hehhe

    BalasHapus
  28. terima kasih atas informasinya yang sangat bermanfaat dan bermutu sekali, salam kenal, and visit me back

    BalasHapus
  29. mas kalo untuk wordpress nya gmna mas ??

    BalasHapus
  30. @dguelo.com: Ya sama saja bos, :) tiap halaman web kan pasti ada kode:

    < 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

    BalasHapus
  31. Maaf mas saya mau nanya, kira2 - kira apa tooltip ini nantinya tidak akan memberatkan loading blog ya ?
    terima kasih..

    BalasHapus
  32. @Jefry: Kalo ingin ringan, jangan posting gambar, jangan pasang script, jangan pasang iklan, pasti ringan :), template jangan ada gambar blass juga.

    Dari 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

    BalasHapus
  33. rasanya pengen pasang tertarik juga, cuma keliatannya ribet bikin pusing. mungkin nda biasa kali gan ya hehehehehe.

    BalasHapus
  34. cari kode body gak ketemu gan..? posisinya dimana ya di atas atas diakhir ?

    BalasHapus
    Balasan
    1. Ditengah di HTML template blogspot, cari saja pake CTRL+F

      Hapus
    2. kayaknya senasib neh mas herdi... nyari body nya ngak ketemu, pake ctrl+F ngak ada juga. letak persisnya setelah kode apa gan?
      apa karena ngak sengaja sempet ane rubah2 yah?
      tolongin dong gan.. butuh banget tooltip.
      tengqiyu gan sebelumnya..

      Hapus
    3. 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:

      &alt;body

      Jadi dengan pembukanya saja...

      Hapus
    4. Haduuh salah masukkan karakter lagi :((

      Ini 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.

      Hapus
    5. 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.
      ini HTMLnya kayak gini:

      <body oncontextmenu

      makasih gan elmunya..

      ane coba dulu

      Hapus
    6. alhamdulillah... berhasil gan
      semoga 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..

      Hapus
    7. 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. :-/ :-/ :-/

      Hapus
  35. ijin copaas bang....
    http://dhantt.blogspot.com

    BalasHapus
    Balasan
    1. Copas kok minta ijin...

      Hapus
  36. Bagus ini.. ijin untuk pasang bos...

    BalasHapus
  37. Nice info, thanks for sharing ...... Salam dan terima kasih.

    BalasHapus
  38. I’m lucky that I discovered this internet web site, just the proper information that I was looking for!

    BalasHapus
  39. apa gue salah copy or pasang script ya kang ?
    tapi utk template baru dr blogspot kayaknya gak mempan tuch!

    BalasHapus
    Balasan
    1. 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.

      Hapus
  40. Di tempatku berhasil Gan. Terima kasih banyak. Sebenernya pengin juga sih tooltip otomatis keterangan/gambar. Tapi ribet kali ya? hehe.

    BalasHapus
    Balasan
    1. Gak ribet kok, tinggap paste kode dan semua otomatis. :)

      Hapus

Links
About | Contact Us | Info Iklan | Privacy Statement | Disclaimer | Link to Us | Help | Whois | Ping  Sitemap
Copyright © 2009  Warung Bebas. Hosted on Blogger.Com Top
Warung Bebas