.jpg)
Tooltips! Ah ..., aku sungguh sangat menyukai ini. Sebuah desain yang tidak saja bermanfaat bagi pengunjung, akan tetapi dia juga merupakan sebuah "barang berharga" yang mampu membuat sebuah blog terlihat lebih cantik, lebih keren serta mampu mencerminkan sebuah kesungguhan dalam "pribadi pengelola blog". Maaf..., itu hanya penilaian subyektif dari aku. Yang jelas bahwa toolttip memang menambah "gaya" dan "penampilan". Rasa suka akan tooltip ini membuat aku mencoba menuangkannya dalam beberapa posting. Yah ..., moga-moga saja memberi manfaat bagi para sobat blogger. Hanya perlu aku sampaikan bahwa posting "javascript tooltip-4" yang sudah aku terbitkan beberapa bulan yang lalu "tidak diperuntukkan bagi blogspot". E ..., barangkali saja ada yang ngeblog di luar blogspot dan tertarik untuk menggunakannya. O..., ya..., sebagai pelengkap koleksi tooltip, aku punya sebuah tooltip yang sangat menarik yang pada saat ini juga masih aku gunakan (23-Okt-10), mungkin sampeyan tertarik untuk memanfaatkan sebagai pelengkap blog. Silahkan coba untuk dibuat.
Update » Jemuah KLIWON, April, 06, 2012
Javascript ZigZagLap Tooltip
Javascript-1:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://gubhugreyot-javascript.googlecode.com/files/GRzigzaglaptooltip.js" type="text/javascript"></script>
Javascript-2:
<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>Cara Membuat ZigZagLap Tooltip
- Login ke blogger.
- Halaman Dasbor (Dasboard).
- Klik Rancangan (Design).
- Klik Edit HTML.
- Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
- Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
- Copy dan pastekan Javascript-1 di bawah kode <head>.
- Cari kode </body>.
- Copy dan pastekan Javascript-2 di atas kode </body>.
- Klik Simpan Template (Save Template).
Catatan :
Jika anda sudah menggunakan jQuery yang sama dalam blog, silahkan gunakan javascriptnya saja. Dalam satu blog hanya perlu satu jQuery saja!Cara Menggunakan Kode tooltip
Tooltip akan bekerja dengan memanfaatkan title yang berada dalam "tag a" atau "tag img". Sampeyan tak perlu menambahkan terlalu banyak kode lain. Satu kode tambahan yang di butuhkan adalah "tag DIV" yang menjadi wadah bagi "tag a" ataupun "tag img". Tooltip cantik ini bisa bekerja dengan baik di semua bagian blog, seperti di sidebar ataupun dalam posting. Cara menuliskan kodenya sebagai berikut:Dalam tag a (link berbentuk teks dan gambar):
Contoh penggunaan kode tooltip-1 :
<div class="GRzigzag"> <a href="URL" title="Tuliskan teks tooltip di sini!">Teks Link</a> </div>
Contoh penggunaan kode tooltip-2 :
<div class="GRzigzag"> <a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEige33SpuZ_8O5xsxG__BCLDBHkkMeaEZ8FvNJsvT29w4uXHiv1PLgx8LS9HxeBQxD_q19Bmng8DHW2go4Ce1pfcOgQE2FjZFF6MjjLczJM8Q_BsXJ-lm7wQ1SyAp1UfeA0sjZecwlypsc/s220/36_2_34.gif" width="100" height="90" /></a> </div>
Dalam tag img :
Contoh penggunaan kode tooltip-3 :
<div class="GRzigzag"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEige33SpuZ_8O5xsxG__BCLDBHkkMeaEZ8FvNJsvT29w4uXHiv1PLgx8LS9HxeBQxD_q19Bmng8DHW2go4Ce1pfcOgQE2FjZFF6MjjLczJM8Q_BsXJ-lm7wQ1SyAp1UfeA0sjZecwlypsc/s220/36_2_34.gif" width=".." height=".." title="Tuliskan teks tooltip di sini!" /> </div>
Tooltip untuk seluruh content :
Tooltip ini dapat sekaligus berfungsi bagi seluruh kontent berupa link dalam area tertentu (misalnya box posting) atau keseluruhan blog.Contoh penggunaan kode tooltip-4 :
<div class="GRzigzag"> Letakkan kode <div class="GRzigzag"> sebagai tag pembuka dan isikan seluruh konten berikut link, baik berupa tek link ataupun image link. Anda bebas menggunakan link dalam jumlah tak terbatas di antara kode <div class="GRzigzag"> dan </div> Cobalah ini sebagai contoh setelah anda menyimpan javascript dalam template. Anda bisa mencoba di box posting maupun melalui Add a Gadget.<br /> <a href="http://gubhugreyot.blogspot.com" title="Panduan dan tutorial blogger terlengkap. Dapatkan berbagai trik dan tip termudah untuk memodifikasi template, pasang widget, tooltip ... ">Tutorial, tips & trik blogger GR</a> Setelah link di atas, anda masih bisa menempatkan link lain di bawahnya. Silahkan tambah sebanyak yang anda butuhkan. Ya ... hingga tetes terakhir.... ha ..... <br /> <a href="http://gubhugreyot.blogdetik.com" title="Gambar spesial buat anda. Silahkan simpan buat bantal tidur!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEige33SpuZ_8O5xsxG__BCLDBHkkMeaEZ8FvNJsvT29w4uXHiv1PLgx8LS9HxeBQxD_q19Bmng8DHW2go4Ce1pfcOgQE2FjZFF6MjjLczJM8Q_BsXJ-lm7wQ1SyAp1UfeA0sjZecwlypsc/s220/36_2_34.gif" width="100" height="90" /></a><br /≶ Sudah dua link terpasang di atas, berupa teks link d an image link. Silahkan anda tambah sendiri di bawahnya. Yah ... anda bisa coba pasang lagi 100 buah link sebagai koleksi sekaligus biar ada lemburan! Ha... ha... ha....<br /> </div>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Jemuah KLIWON, April, 06, 2012
» Happy Blogging - gubhugreyot «
nuhun kang , , ,
BalasHapusakang, aku iri lihat tootip panjenengan di blog ini. apik!!
BalasHapusaku boleh minta css & javascriptnya gak??
kirim ya kang, indo_ina18@yahoo.co.id
tak tunggu lho...
matur nuwun sanget sak derengipun...........
wah tootip nya bagus kang
BalasHapusboleh minta kode css sama js nya gak?
buat perindah blog aku kang
kirim ke sini kang kalau boleh malang.injection@yahoo.com
aku udah pakek yang energy power saving dari akang bagus banget kang makasih atas share nya
http://keyremover32.blogspot.com
file di ziddu nya udah ngga ada...
BalasHapusyang ini juga ga keluar tooltipnya mas.... pemasanganya juga sudah sesuai dengan petunjuk diatas... mohon di cek blog saya trus kesalahanya dimana ?
BalasHapusterima kasih...
www.aandfx.blogspot.com
kang kok tidak bisa ya kang terus file ziddunya sudah di hapus gitu kang ...??
BalasHapusgimana kang caranya aku pengen kayak punya akang..??pliz kang buatin ....??
ziddunya ga bisa di download,reupload donk tolong
BalasHapuszigzaglap-tooltip 'dah update 08 jan 2012. Update posting lain terus jalan. Saat ini bru aku kerjakan yg bln maret 2010. Buih... melelahkan sekali update demo yg kodenya pada hilang!!! Sabar... sabar ... semuanya harap pada sabar! Hei ...siapa nih yg mo bantu update?!
BalasHapusSalam ....
gubhugreyot
Sini bang aku bantu hehehe, izin MengCopy gan,
BalasHapusminta izin aku pasang di blog ku kang...!! tooltip ini hanya khusus untuk template minima ya kang cos template ku yang dulu ngak bisa ..plis corecsi ke blog ku ..karinafotocollection.blogspot.com
BalasHapuskang ,,, kasi demo dunk.....
BalasHapusmasih binggung
Lha demonya itu .. tuh... tooltip yang dipakai di blog ini! Contohnya tooltip nyang di "Login ke Blogger". Klo mo banyak demo buka aja "Special Tutorials" dan semua link di menu sebelah kiri halaman. Oye?!
Hapuskang,,, punya saya kok ga bisa dipasang tooltip zigzag nya....
Hapuspadahal udah sesuai pentunjuk diatas....
apa karna beda template ???
silahkan cek blog saya
http://mr-cnblue.blogspot.com/#axzz1rW2QMZ5A
Ini yang jadi sebab tooltip nggak mo kerja:
Hapus<script src="http://andreykusanagi.googlecode.com/files/pop-up.js" type="text/javascript"></script>
Hapus scriptnya!
Blog kamu juga terlalu banyak menggunakan jQuery. Ada jquery.js, jquery.1.3.2. ,jquery.1.4 ,jquery.1.5 dan jquery.1.6
Satu blog cukup 1 jquery saja dan letakkan di bawah <head>
oh ya bener....
Hapusterlalu banyak jquery...
makasih kang ^,^
by : http://mr-cnblue.blogspot.com/#axzz1rW2QMZ5A
kang... bisa buat tooltip zigzagnya auto link ga ???
BalasHapuskalau satu2... merepotkan...
kalau auto kan lebih cepet... hehe :)
maaf gan saya sudah copy langkah1-2 bahkan langah ke 3 tapi kok tooltipnya gak bisa terbang?? mlm muncul gambar ketawa...
BalasHapusmaklum saya kurang paham
kaka, ni bisa pake jquery 1.7.1 ga? cz aq pake threaded comment n' harus pake jquery 1.7.1.
BalasHapusewoh kabeh bang...!!
BalasHapusnang sing dicedek'i cursor trus mluncur kesamping warna biru,iku yo'Opo ngawene...??