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

Tooltip Otomatis Beberapa kawan blogger ada yang bertanya bagaimana melakukan otomatisasi tooltip seperti di blog Warung Bebas ini, ;;) sebenarnya pusing juga jawabnya, sampai akhirnya ada waktu membuatkan scriptnya dan melalui pemikiran memeras otak. ~x( Kenapa meres otak? karena berusaha agar bisa menyatu dengan semua model template/theme. Pakai akal menambahkan komponen div baru deh akhirnya. Tapi InsyaAllah bisa bekerja baik.

Dengan script ini, maka semua link (anchor), akronim, dan gambar akan diberi tooltip otomatis. Jika link ada titlenya, maka tooltip akan berisi title, jika tidak ada, maka text-anchornya yang menjadi tooltip, bahkan untuk link yang berupa gambar, juga akan jadi tooltip berupa gambar. Begitu juga dengan gambar, jika gambar mengandung title, maka tooltip akan muncul berupa gambar dan title, jika tidak maka muncul gambarnya saja.

Update: (02 Des 2011)

Script ini sudah diupdate, dan sudah sesuai dengan browser terbaru, setelah sebelumnya trouble.

Informasi Update

Manfaatnya tentu saja untuk daya tarik, dan terbukti disini bahwa mampu meningkatkan pageviews sampai 50% lebih tinggi. Coba saja Anda lihat PV (Page Views) Warung Bebas yang terekam disini », bandingkan dengan Page Views blog Anda (perhatikan persentase Average Per Visit).

Yang ingin memasang di blog ikuti petunjuk dibawah, sesuaikan dengan kemampuan Anda.

Pemasangan Umum:

1. Pasang dahulu script tooltip. Ikuti petunjuk di Cara Pasang Tooltip.

2. Masukkan kode berikut ini tepat dibawah kode Kode Induk Tooltip yang sudah dipasang di petunjuk yang ada di Cara Pasang Tooltip (dibawah <body>).

<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'></script><!-- pembuka warungbebasautotooltip --><div id="warungbebasautotooltip">

3. Masukkan kode berikut ini tepat diatas </body> (penutup body), dan simpan template Anda.

</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

4. Lihat blog Anda, sudah berhasil atau tidak. Oya, dengan cara ini, karena perintah kode dilakukan di akhir body, maka script ini baru akan bekerja setelah halaman terbuka sempurna.

Pemasangan Custom (Advance Blogger Only):

Sama saja intinya dengan yang diatas, namun hanya penjelasan tambahan, karena cara diatas itu script ini diterapkan pada seluruh body HTML sedangkan jika menggunakan custom Anda bisa mengaturnya sendiri. Perhatikan kode tag div berikut:

<div id="warungbebasautotooltip">

Dan perhatikan juga:

<script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>

Warna Merah diatas sebenarnya adalah pengaplikasian script pada tag div dengan ID warungbebasautotooltip yang dimasukkan sebagai tambahan, Anda bisa menggantinya dengan ID tertentu yang sudah ada di template Anda tanpa memasang div tambahan tadi. Dengan begini, maka script bisa diaplikasikan untuk area tertentu saja, dan pemanggilan script pada beberapa ID juga bisa dilakukan.

Catatan:

Script ini akan membuat semua link dan image (gambar) menjadi memiliki tooltip. Tapi terkadang ada bagian tertentu kita tidak ingin muncul tooltip, untuk membuat link dan image tertentu tidak menjadi tooltip, Anda perlu menyisipkan class dengan nama "fsnott" pada bagian tersebut. Perhatikan kode berikut ini:

<a href="http://www.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html">Cara Pasang Tooltip</a>

Kode diatas akan memiliki tooltip dengan isi "Cara Pasang Tooltip" untuk membuang tooltip kode harus diubah menjadi:

<a href="http://www.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html" class="fsnott">Cara Pasang Tooltip</a>

Ini berlaku untuk link dan image (gambar), untuk gambar yang tidak ingin muncul tooltipnya, tambahkan juga kode class="fsnott".

Yang perlu diperhatikan lagi adalah, bahwa jika ingin tampilan tooltip custom, misalnya kayak popular posts disini, maka itu dimasukkan kodenya dengan cara yang ada di Cara Pasang Tooltip, hanya saja kalau disini otomatisasinya langsung diinject ke template. Kalau tidak mengerti, silahkan dilihat source code halaman ini, Anda akan menemukan bahwa susunan link anchor di popular posts tersebut tidak standar lagi.

Jika sebuah link, gambar, akronim dll yang sudah dipasangi kode secara custom, seperti petunjuk pemasangan di Cara Pasang Tooltip, maka akan diabaikan oleh script auto tooltip ini. Dan yang muncul adalah yang tooltip custom tersebut.

Script tooltip otomatis ini bisa bekerja di platform apapun, jadi bukan hanya blogspot. Sesuaikan saja dengan mesin blog Anda. Ngomong-ngomong kok diatas pake gambar anak niup balon ya? ;)) maklum asal comot gambarnya...

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

50 komentar terhadap "Otomatisasi Tooltip (Link, Gambar, Akronim)"

  1. Wah Trimakasih Baanyak Gan,Maaf sudah merepotkan,oke saya akan coba,sekali lagi Thanxs ^:)^

    BalasHapus
  2. Mantap Gan :-bd ,sory ada satu pertanyaan lagi Gan,Masih Bingung sedikin,link gambar atau link yang ditunjuk yang keluar tooltip,sedangkan untuk keterangan gambar dan gambar yang ada pada link tdk tampil,agar tampil bagaimana caranya Gan ? :-/

    BalasHapus
  3. mantap mas sumpah... sudah kupasang di SerbaSeru.com :)

    BalasHapus
  4. @liu benz: Coba deh baca pertanyaan sampean? ;)) bingung gak jal? lebih jelas dong maksudnya, meski harus ngetik pertanyaan lebih banyak... :) kalau disingkat mbulet gak ngerti maksudnya gan!

    BalasHapus
  5. uups sory Master,Maksud saya link yang ditunjuk (contoh "Free download")nah link atau postingan yang dibuat kan ada Judul="Free Download" dan di dalam postingan tersebut ada text keterangan dan gambar,yang saya maksud "text keterangan dan Gambarnya" tidak Terlihat pada saat ditunjuk kursor,yang tertooltip cuma Judulnya aja="Free Download" itu :))
    agar text keterangan dan gambarnya tertooltip jg bagaimana :-/ ???

    BalasHapus
  6. @liu benz: Sepertinya maksud pertanyaannya terjawab dari update diatas... (saya update loh!) di blockquote bawah:

    Yang perlu diperhatikan lagi adalah, bahwa jika ingin tampilan tooltip custom, misalnya... dst...

    jadi otomatisnya bukan karena script autotooltip ini, tapi di inject di template... caranya sama dengan manual, tapi otomatis, halah ! susah nih jelasinnya :((

    BalasHapus
  7. Mungkin Maksud Juragan Kalou mau dicostumse seperti itu,harus dilakukan secara manual,begitu ya Gan :))
    maaf sudah bikin Master Juragan Bingung Jelasinnya :d

    BalasHapus
  8. @Liu Benz: Yups teknik manual, tapi diperintahkan write ke template agar otomatis. untuk di blogspot, pakai perintah bersayarat

    b:if.....

    dan susunan asli dari bentukan blogger kita ubah sesuai dengan cara penggunaan tooltip manual, nah... otomatis kan?

    BalasHapus
  9. mas, yg kode induk tooltip kalau qw pasang di blog aqw memang bisa, tapi saat qw coba yg otomatis seperti anjuran tutorial di atas koq gak jalan ya..?? kira kira apa yg salah dengan template saya.. haduh .. bingung saya maz... mohon diajarin ya mas saya.. thank's...

    BalasHapus
  10. ma'af maz,, koment yg di atas itu sa'at saya kurang sabaran dikit.. ternyata tadi gak bisa gara gara script yg terakhir qw taruh di bawah script page nav makanya gak jalan, tapi setelah qw taruh di atas scipt page nav tooltipnya bisa jalan.. makasih mazz...

    BalasHapus
  11. kayaknya perlu dicoba neh mas.. mudah2an tidak ada kesalahan pemasangan, anyway.. bikin form comment kayak ini caranya gmn mas? kerennn...

    BalasHapus
  12. Waduh kang..masih ga bisa nich.. apa kira2 crash dengan script ballon tips di template ku itu? thx :)

    BalasHapus
  13. susah bos ane menyerah tutorialnya kurang lengkap

    maaf sebalumnya

    BalasHapus
  14. Ilmu yang luar biasa... mantap dan praktis untuk pemula seperti saya, senengnya tinggal pakai..., aku minta ya ... makasih banyak

    BalasHapus
  15. Gan, scripnya nggak berjalan. Udah semua aku pasang scriptnya. Dari induknya sampai anak-anaknya. Ada solusi??

    BalasHapus
  16. mantap gan... dah ane pasang di blog ane.

    BalasHapus
  17. cara pasang tooltip biar ada descriptionnya gimana gan?, toling kasing linknya tutorialnya di ainisastra.com ya gan, perlu banget

    BalasHapus
  18. Thanks sob infonya, tapi kok di blog saya gag bisa ya, padahal sudah mengikuti tutorial yang agan buat.
    Thanks sebelumnya.

    BalasHapus
  19. @semua: Maaf, ^:)^ banyak script yang error setelah pindah hosting ke hostgator dari bluehost, banyak kebijaksaan yang diterapkan berbeda, jangankan script yang disharing, yang digunakan sendiri saja perlahan-lahan baru ketemu mana yang gak berjalan dan perlu perubahan dan pengubahan hak akses... jadi maaf deh kalau ada yang gak bisa, belum sempat meneliti yang error :((

    BalasHapus
  20. mantap bgt,,,tapi panjang jd bingung,,,hehe

    BalasHapus
  21. Gini Gan
    untuk nampilin tooltip yang berisi cuplikan artikel gimana ya pengembangannya
    bingung ni ane, dan tentunya otomatis juga :)
    tlg bantuannya bisa kirim ke email ane ya Gan, ditunngu :)]
    blankroot@null.net
    Thanks ya Gan :)

    BalasHapus
  22. @lazyfooly: Maaf gan pertanyaannya terlalu berat, apalagi lebaran ini :) maaf ya, yang jelas dibuat format manual, lalu dibuatkan script tambahan yg bikin otomatis pasti menyatu asalkan memenuhi syarat tooltip. Jadi sebenarnya dua script beda.

    Script tooltip tugasnya hanya menampilkan tooltip, nah script pembuat susunan itu akan membuat kode dimana akan ditampilkan oleh tooltip.

    Penerapannya beda2 tiap template dan kondisi, makanya kubilang berat pertanyaannya....

    BalasHapus
  23. Kapok ane gan, berulang ulang ane coba, Pake kode induk-nye ... Mohon pencerahan sekali lagi gan...

    Ke email ane - acw.owner@gmail.com

    T'rima kasih banyak yee gan ... :)

    salam.

    BalasHapus
  24. Ane coba beberapa kali gak berhasil bro. Apa scriptnya perlu di convert agar "sesuai" dengan format XML-nya blogspot ya?

    Mohon pencerahannya bro. Thx.

    BalasHapus
  25. malah g jadi bosss...di update.yg lama aja malah jadi..kog...

    BalasHapus
  26. @Dhanalova: :) pasti salah pemasangan kodenya sampeyan, gara-gara komentar sampean ini sampe aku coba lagi di halaman HTML kosongan, dan ternyata bekerja baik kok.. :)

    BalasHapus
  27. gak mau keluar tooltips nya..

    BalasHapus
  28. Alhamdulillah berhasil dengan sempurna... :D

    BalasHapus
  29. bagaimana kalau kita ingin buat tootip dari suatu KATA (tanpa link), dan kalau kita sorot ke sana, akan keluar gambar saja, tanpa kata.

    saya tunggu solusinya sob ...

    BalasHapus
  30. @Lukman Khakim: Lihat referensi pemasangan di:

    www.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html

    untuk text tanpa link misalnya seperti ini kodenya:

    <span onmouseover="tooltip.show('ISI TOOLTIPS')" onmouseout="tooltip.hide()" >text</span>

    BalasHapus
  31. bos...
    minta tooltip yg nampilin cuplikan posting gitu, kayak read more otomatis

    trus summarynya bisa di atur suka ati...

    BalasHapus
  32. @ijal: Caranya silahkan lihat di:

    www.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html

    Disitu dijelaskan tag HTML-nya, dan bisa menampung tag HTML apa saja.

    BalasHapus
  33. Masih blm paham gan hehehehe. maklum newbie 100% wkwkwkwk

    BalasHapus
  34. Muantab bos.. langsung jadi...
    http://panoramakerinci.blogspot.com/

    BalasHapus
  35. thanks 4 infonya.langsung ane pasang...

    BalasHapus
  36. Boleh bertanya...? bagaimana kalo tooltip hanya akan ditampilkan pada postingan saja tidak pada widget gan..!

    BalasHapus
    Balasan
    1. {center}{u}UNTUK PERTANYAAN SEJENIS SEMOGA TIDAK TANYA LAGI{/u}{/center}

      Tutorial diatas hanya mudahnya saja jadi diterapkan pada seluruh body, tapi bisa diatur khusus dipostingan atau dimanapun. :) Perhatikan berikut ini:

      {c}<div id="warungbebasautotooltip">
      <!-- Semua disini akan diterapkan tolltip -->
      </div>
      <script>wb.$_auto_tooltip("warungbebasautotooltip")</script>{/c}
      Kode diatas itu akan menerapkan auto tooltip pada area div dengan ID {u}warungbebasautotooltip{/u}, karena diatas diletakkan pada tag HTML paling luar (setelah pembuka) dan (sebelum penutup) body, maka diterapkan pada seluruh area halaman.

      Jika ingin pada area postingan saja, maka perintahkan saja pada ID div yang membungkus posting di blog kamu, cari nama IDnya. Kalau kesulitan menentukan, maka untuk mudahnya seperti berikut ini

      1. Cari di template kamu kode:

      {c}<data: post.body/>{/c}
      Kode diatas bisa muncul lebih dari satu kali, coba saja salah satu atau salah semua. ;))

      2. Lalu bungkus dengan div ID diatas, jadi akan seperti ini:

      {c}<div id="warungbebasautotooltip">
      <data: post.body/>
      </div>
      <script>wb.$_auto_tooltip("warungbebasautotooltip")</script>{/c}

      3. Selesai.

      Untuk {u}warungbebasautotooltip{/u}, itu ID yang bisa disesuaikan namanya, dan harus tidak sama dengan ID yang sudah ada diblog kamu.

      {block}NB: penerapan diatas bisa diulangi lebih dari sekali, pada area2 berbeda dalam halaman yang sama. Caranya sama, tiap ID panggil juga dengan javascript dibawahnya.{/block}

      Hapus
  37. gk bisa mas ! script yang pertama udah aku taruh di bawah no induk tetep aja gk bisa (ERROR) tolong, pencerahannya !

    ahlan-s.blogspot.com

    BalasHapus
    Balasan
    1. Kok nomer induk segala?

      Saya cek ke blog ahlan-s.blogspot.com dan saya find (ctrl+F) dengan "warungbebasautotooltip" tidak ada di sourcenya. cari pake "wb.$_auto_tooltip" jg gak ada, lalu bagaimana bisa kerja scriptnya? lah petunjuk diatas tidak dilakukan...

      Hapus
  38. thanks you gan..mantap nih..
    bookmark dulu ah..:x

    BalasHapus
  39. Mantap gan..,udah dipasang diblog ane dan berhasil....Terima kasih.

    BalasHapus
  40. mantab gan berhasil aku praktekin di blog demoku mohon izin untuk aku share....

    BalasHapus
  41. makasih bos tutorialnya manfaat banget ni.. ijin coba bos

    BalasHapus

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