ZigZagLap Tooltip part II

Tooltip zigzaglap asli punya om 

gubhugreyot
dan bagi yang belum-belum bisa menggunakanya
berikut cara praktis...

DEmO

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

<script type="text/javascript">
$(".GRzigzag a[title]").myGRzigzagtips({effect: 'bouncy'});
$(".GRzigzag img[title]").myGRzigzagtips({effect: 'bouncy'});
</script>

Cara Membuat ZigZagLap Tooltip

1. Login ke blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
6. Cari kode . 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.
7. Copy dan pastekan Javascript-1 di bawah kode .
8. Cari kode .
9. Copy dan pastekan Javascript-2 di atas kode .
10. 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>

<div class="GRzigzag">
<a href="URL" title="Tuliskan teks tooltip di sini!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDe5n8pZrhPS8XGL4zn9B6GO1zHQx8U9d79jJD-Wfd59mzs5ZXRMKLfrJaPEAPY9xYNg3PsRUuzQd3UwaRaISK8M70tyM4hAusHCQ9DThBheU0ehnhRoomFavrlOdO6xgYh93xY7FmDu0/s220/36_2_34.gif" width="100" height="90" /></a>
</div>

sumber gubhugreyot