ZigZagLap Tooltip part II
Tooltip zigzaglap asli punya omgubhugreyotdan bagi yangbelum-belumbisa menggunakanya berikutcara 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>
- 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 . 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 .
- Cari kode .
- Copy dan pastekan Javascript-2 di atas kode .
- 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
http://erickvand.com