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!


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!

Poskan Komentar Blogger Disqus

  1. terimakasih mas tutornya.. sangat bermanfaat,,
    Cek Balik ya mas Gagasan Wirausaha untuk TKI

    BalasHapus
  2. berguna tutorilanya gan.. makasih
    http://grosir-pakaianwanita.blogspot.com/

    BalasHapus
  3. caakkkkeeeppp ......

    jadi punya fitur baru deh

    BalasHapus
  4. terima kasih bgt ya gan, akhirnya ketemu juga,,,,

    BalasHapus
  5. mas keren sekali tutorialnya, ini yg saya cari-cari, tapi saya ada sedikit pertanyaan nih, urutanya gini =>link gambar preview=>gambar yg inigin ditampilkan=> pertanyaan saya gimana kalo mau menyisipkan link tujuan, soalnya kalo gambar di click pasti meluncur ke link preview gambar
    maklum ane newbie :>) (o)
    mudah2an fast respon
    reckyalamsyah7@gmail.com

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top