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=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnY57DFEPnH7QQIM1GjWNAdfmuL0t1FBW8uooAyhOJc5aYRTsk2vJtPtUiE5UkNxxTjtugkCPR6TvynIF1LEsbVbbwRw7SSEkUhw7hQxvCof6E34mjdQPQ8woT837PTYU0gSldpB1ChaDv/s75/Dewi+Persik+Pamer+Toket3.jpg></td><td width=34% align=center valign=top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11f41KBtSwiJDHhG8OhH5N6LFf3E6u-mouvAFNp94pOjwZkDFm91YHSb_kudaCUkJhHapBS3SLNsFoIyIPKVv0_oYMgOHXccg6IvXBUnWpAGobnX8JPuG5ooG2U53-emPJFdm1WY12Vcy/s75/persik-11.jpg></td><td width=33% align=right valign=top><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnY57DFEPnH7QQIM1GjWNAdfmuL0t1FBW8uooAyhOJc5aYRTsk2vJtPtUiE5UkNxxTjtugkCPR6TvynIF1LEsbVbbwRw7SSEkUhw7hQxvCof6E34mjdQPQ8woT837PTYU0gSldpB1ChaDv/s75/Dewi+Persik+Pamer+Toket3.jpg></td></tr></table><center>Mantab Gan!</center>')" onmouseout="tooltip.hide()"><strong>Koleksi Foto Dewi Persik</strong></a> |
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.
Script ini sudah diupdate, dan sudah sesuai dengan browser terbaru, setelah sebelumnya trouble.
Informasi Update
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>Untuk full otomatis tooltip, ikuti petunjuk Otomatisasi Tooltip, dengan otomatis, maka semua link, gambar, akronim akan otomatis memiliki tooltip tanpa menambahkannya secara manual.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 :)
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)
Widget Related Posts Dengan Gambar dan Ringkasan dalam Tooltip Keren
Cara membuat atau memasang widget Related Posts with thumbnail dilengkapi ringkasan artikel otomatis plus gambar dalam tooltip yang keren. Wah susah sekali menjelaskannya, 
maksudnya seperti contoh yang ada dibawah nanti. Widget ini khusus untuk blog yang menggunakan blogger.com / blogspot.com baik yang custom domain maupun tidak. Pemasangannya mudah dan kodenya gak ribet. 
Tips mempercantik blog kali ini adalah lanjutan dari Cara Pasang Tooltip Keren di Blog Paling Mudah, dan insyaAllah akan terus dilanjutkan pada widget lainnya. Kenapa disebut kelanjutan? karena kalau hanya memasang fasilitas tooltip saja, kita harus manual agar ada bagian yang memiliki tooltip, dan widget yang sekarang ini adalah otomatis. Dan widget ini tentu saja tergantung pada pemasangan tooltip, kalau tidak memasang kode tooltip, ya tidak keluar nanti kelebihannya.
Terinspirasi oleh kemudahan linkwithin.com akhirnya membuat sebuah script yang mudah untuk dipasang, dan memiliki kunggulan dibanding widget related post with thumbnail-nya linkwithin. OK deh sudah dulu nggedabrush-nya,
langsung saja lihat contohnya dibawah ini: Widget tidak dipasang dihalaman ini, untuk melihatnya silahkan buka CONTOH TAMPILAN WIDGETSudah lihat? Mau pasang? OK, ikuti saja caranya dibawah ini:
. Cukup induk kodenya saja, kode-kode diatasnya itu pemasangan manualnya saja.Kalau kode tooltip sudah dipasang, pastikan bahwa setting feed blog Anda diatur ke PENUH. Perhatikan gambar berikut ini:
Sudah? Sekarang buka edit HTML blog Anda, lalu centang Expand Template Widget. Temukan (Ctrl+F) kode berikut:
<data:post.body/>Kadang kode itu muncul dua kali karena Anda pernah melakukan edit, nah pasang saja disalah satunya, kalau nanti gak muncul widgetnya coba pindah ketempat satunya lagi
malas ngasih solusi, karena bisa berlainan tiap template. Sudah ketemu kode diatas? kalau sudah pasang saja kode dibawah ini dibawahnya.<!-- Related Posts with Thumbnails Tooltip s:-->
<b:if cond='data:blog.pageType == "item"'>
<div id='wb-related-posts-gbr'><a id='wb_relatedposts_tt' href='http://www.warungbebas.com/2010/10/widget-related-posts-dengan-gambar-dan.html'>Related posts with thumbnail</a></div><script src='http://javascript-share.googlecode.com/files/wb_relatedthumbs_tt.js'></script>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults = 5;
var jmlringkasan = 200;
var setwarna = "#dde";
var setwarnahuruf = "#333";
var JudulWidget = "You might also like:";
</script>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=wb.$_wbrelpostgbr&max-results=5"'/>
</b:loop>
</b:if>
<!-- Related Posts with Thumbnails Tooltip e:-->Pasang dulu apa adanya, salah dikit aja dalam edit gak akan keluar widgetnya!. Kalau sudah berhasil keluar, silahkan diedit kode yang berwarna diatas. Penjelasannya berikut ini:
| Kode | Pengaturan Untuk | keterangan |
|---|---|---|
var maxresults=5; | Batas maksimal yang dikeluarkan. Sesuaikan dengan lebar template Anda | Jika mengubah angka 5 ini, ubah juga kode dibawahnya yang berwarna sama. yaitu kode: ... &max-results=5" ... |
var jmlringkasan=200; | Jumlah huruf yang akan ditampilkan dalam ringkasan di tooltip | - |
var setwarna="#dde"; | Warna dari garis pemisah, garis tepi gambar dan warna saat onmouseOver | - |
var setwarnahuruf="#333"; | Warna Huruf dibawah gambar, atau judul artikelnya. | - |
var JudulWidget="You might also like:"; | Judul widgetnya. | - |
Yang diganti hanya karakter yang diberi warna lain diatas itu ya.. yang lain jangan. Kalau sudah, silahkan sekarang disimpan template Anda. Dan lihat hasilnya.
Oya kode <data:post.body/> diatas itu sering diapit tag P seperti dibawah ini:
<p><data:post.body/></p>Kalau seperti diatas, maka letakkan dibawahnya, setelah penutup </p>. Halah...
sudah ngerti kan? ini hanya pemasangan awal, nanti bisa kamu pasang dimana terserah, pindahkan saja sekaligus experiment. Sesuaikan saja letaknya, asal dibackup template XML-nya kan gak masalah.Cukuplah petunjuknya, kalau ada trouble silahkan bilang dikomentar untuk dilakukan perbaikan. Masukannya ditunggu, dan sampai jumpa di belajar template lain kali lagi...
Masih kesulitan? minum 
dulu aja ...
0 komentar:
Posting Komentar