Cara Membuat Tooltip Preview Image Dengan jQuery

Walaupun dah ketinggalan jauh ama teman-teman blog lainnya tapi gak masalah!
Sekarang Blog Oto Website akan membahas tentang Cara membuat tooltip Preview Image Dengan jQuery.
Sebelumnya sobat udah pada tau kan apa itu Tooltip? oke kalo belum tau saya akan beri sedikit penjelasannya agar sobat tau dan bisa mengerti apa maksud Tooltip.

"Tooltip adalah sebuah pesan kotak atau box kecil yang tampil ketika cursor/penunjuk mouse diarahkan ke suatu elemen pada halaman website.
Tooltip berguna untuk memberikan penjelasan atau deskripsi pada sebuah link, gambar atau bagian-bagian tertentu website lainnya."
itulah sedikit penjelasan tentang Tooltip.

Banyak blog lain bilang bahwa Tooltip adalah balon kata kalo menurut saya pribadi Tooltip bukanlah balon kata karna Tooltip dan balon kata berbeda.
Mungkin suatu saat nanti saya akan menjelaskan dan share tentang balon kata kepada teman-teman tapi karna ilmu saya yang belum sampai situ maka saya tidak berani menjelaskannya sekarang, bisa-bisa saya salah menjelaskan atau bahasa kerennya sok tau.
Tooltip sendiri ada beberapa versi di antaranya Tooltip image, dan Tooltip semua link dan image.
Dan kali ini saya akan membahas tentang Tooltip image di blog ini yang saya berjudul Cara membuat tooltip Preview Image Dengan jQuery.

Sekedar info kemarin blog ini pernah membahas tetang Efek Memutar Dan Membesar Pada Gambar Saat Di Sorot Mouse.

Untuk lebih jelasnya tentang Tooltip Preview Image Dengan jQuery sobat bisa lihat atau arahkan cursor sobat ke gambar berikut.

Hehehe . . . sori sob, kalo gak bisa karna saya tidak memasang Tooltip Preview Image di blog O.W, mendingan sobat lansung aja ihat demonya sendiri dan arahkan cursor pada gambar seperti di atas!

Demo

Udah pahamkan maksudnya, sekarang mari kita bahas cara memasang dan menerapkannya di blogger sobat.

1. Masuk ke akun blogger sobat.

2. Pada Dasbor klick Rancangan ➨ Edit HTML.

3. Jangan lupa Centang Expand Template Widget ➨ Bckup dulu templatenya untuk berjaga-jaga bila terjadi kesalahan.

4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu sekarang sobat copy kode berikut dan paste atau letakkan di atas kode tadi.

#preview{ position:absolute; border:5px solid #A9A9A9;-webkit-box-shadow: 2px 2px 10px 8px ; box-shadow: 2px 2px 10px 8px ; border-radius:10px; background:#64950;border-radius:10px; padding :15px; display:none; color:#fff;}

6. Selanjutnya sobat cari kode </head> lalu letakkan kode berikut di atasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.js' type='text/javascript'/> <script src='http://otowebsite.googlecode.com/files/image_priview.js' type='text/javascript'/>

NB : Hapus kode warna hijau jquery 1.2.3 jika di template sobat sudah terinstal atau sudah ada kode tersebut.

7. Simpan Template.

Untuk menerapkan Tooltip Preview Image, sobat harus memakai kode pemanggil, kode pemanggilanya adalah :

<a href="Url gambar yang akan menjadi priview" class="preview"><img src="Url gambar yang ada di postingan"></a>

Keterangan : Ganti teks warna merah dengan Url gambar sobat sendiri.

Nah selesai dah !

Bagaimana apakah sobat berhasil menerapkannya ke blog sobat? Silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas!