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.
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...
Artikel dengan judul "Otomatisasi Tooltip (Link, Gambar, Akronim)" ini diposkan oleh Warung Bebas dalam kategori Belajar Ngeblog, Informasi, Internet, Katalog Online, Tips/Trik, Tutorial, Widget Blog » saat ini ada 49 komentar, semoga bisa memberi inspirasi atau sekedar hiburan. [Edit Entri]
| Komentar FacebookSembunyikan | Selalu TampilkanJangan Pernah Tampilkan | Status: |
Widget-Widget Blog Favorite » selengkapnya- Posting Video via Keyword (Best Widget) 5
- Aplikasi Bomb Like Facebook Script Lengkap 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 | : |
Wah Trimakasih Baanyak Gan,Maaf sudah merepotkan,oke saya akan coba,sekali lagi Thanxs ^:)^
BalasHapusMantap 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 ? :-/
BalasHapusmantap mas sumpah... sudah kupasang di SerbaSeru.com :)
BalasHapus@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!
BalasHapusuups 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 :))
BalasHapusagar text keterangan dan gambarnya tertooltip jg bagaimana :-/ ???
@liu benz: Sepertinya maksud pertanyaannya terjawab dari update diatas... (saya update loh!) di blockquote bawah:
BalasHapusYang 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 :((
Mungkin Maksud Juragan Kalou mau dicostumse seperti itu,harus dilakukan secara manual,begitu ya Gan :))
BalasHapusmaaf sudah bikin Master Juragan Bingung Jelasinnya :d
@Liu Benz: Yups teknik manual, tapi diperintahkan write ke template agar otomatis. untuk di blogspot, pakai perintah bersayarat
BalasHapusb:if.....
dan susunan asli dari bentukan blogger kita ubah sesuai dengan cara penggunaan tooltip manual, nah... otomatis kan?
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...
BalasHapusma'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...
BalasHapuskayaknya perlu dicoba neh mas.. mudah2an tidak ada kesalahan pemasangan, anyway.. bikin form comment kayak ini caranya gmn mas? kerennn...
BalasHapus@MangDe: :D form komen bawaan blogger toh?
BalasHapusWaduh kang..masih ga bisa nich.. apa kira2 crash dengan script ballon tips di template ku itu? thx :)
BalasHapussusah bos ane menyerah tutorialnya kurang lengkap
BalasHapusmaaf sebalumnya
Ilmu yang luar biasa... mantap dan praktis untuk pemula seperti saya, senengnya tinggal pakai..., aku minta ya ... makasih banyak
BalasHapusGan, scripnya nggak berjalan. Udah semua aku pasang scriptnya. Dari induknya sampai anak-anaknya. Ada solusi??
BalasHapusmantap gan... dah ane pasang di blog ane.
BalasHapusmantao abis gannn
BalasHapuscara pasang tooltip biar ada descriptionnya gimana gan?, toling kasing linknya tutorialnya di ainisastra.com ya gan, perlu banget
BalasHapusThanks sob infonya, tapi kok di blog saya gag bisa ya, padahal sudah mengikuti tutorial yang agan buat.
BalasHapusThanks sebelumnya.
Thanks sob.
BalasHapus@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 :((
BalasHapusdi tunggu untuk trik2 selanjutnya.. :-bd
Hapusmantap bgt,,,tapi panjang jd bingung,,,hehe
BalasHapusGini Gan
BalasHapusuntuk 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 :)
@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.
BalasHapusScript 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....
Kapok ane gan, berulang ulang ane coba, Pake kode induk-nye ... Mohon pencerahan sekali lagi gan...
BalasHapusKe email ane - acw.owner@gmail.com
T'rima kasih banyak yee gan ... :)
salam.
Ane coba beberapa kali gak berhasil bro. Apa scriptnya perlu di convert agar "sesuai" dengan format XML-nya blogspot ya?
BalasHapusMohon pencerahannya bro. Thx.
malah g jadi bosss...di update.yg lama aja malah jadi..kog...
BalasHapus@Dhanalova: :) pasti salah pemasangan kodenya sampeyan, gara-gara komentar sampean ini sampe aku coba lagi di halaman HTML kosongan, dan ternyata bekerja baik kok.. :)
BalasHapusgak mau keluar tooltips nya..
BalasHapusAlhamdulillah berhasil dengan sempurna... :D
BalasHapusbagaimana kalau kita ingin buat tootip dari suatu KATA (tanpa link), dan kalau kita sorot ke sana, akan keluar gambar saja, tanpa kata.
BalasHapussaya tunggu solusinya sob ...
@Lukman Khakim: Lihat referensi pemasangan di:
BalasHapuswww.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>
bos...
BalasHapusminta tooltip yg nampilin cuplikan posting gitu, kayak read more otomatis
trus summarynya bisa di atur suka ati...
@ijal: Caranya silahkan lihat di:
BalasHapuswww.warungbebas.com/2010/10/cara-pasang-tooltip-keren-di-blog.html
Disitu dijelaskan tag HTML-nya, dan bisa menampung tag HTML apa saja.
Masih blm paham gan hehehehe. maklum newbie 100% wkwkwkwk
BalasHapusMuantab bos.. langsung jadi...
BalasHapushttp://panoramakerinci.blogspot.com/
thanks 4 infonya.langsung ane pasang...
BalasHapusBoleh bertanya...? bagaimana kalo tooltip hanya akan ditampilkan pada postingan saja tidak pada widget gan..!
BalasHapus{center}{u}UNTUK PERTANYAAN SEJENIS SEMOGA TIDAK TANYA LAGI{/u}{/center}
HapusTutorial 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}
gk bisa mas ! script yang pertama udah aku taruh di bawah no induk tetep aja gk bisa (ERROR) tolong, pencerahannya !
BalasHapusahlan-s.blogspot.com
Kok nomer induk segala?
HapusSaya 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...
thanks you gan..mantap nih..
BalasHapusbookmark dulu ah..:x
Mantap gan..,udah dipasang diblog ane dan berhasil....Terima kasih.
BalasHapusmantab gan berhasil aku praktekin di blog demoku mohon izin untuk aku share....
BalasHapusmakasih bos tutorialnya manfaat banget ni.. ijin coba bos
BalasHapuskok ga bisa gan..?
BalasHapusMantap. tengkiu sob
BalasHapus