.jpg)
Tooltip yang mampu menampilkan gambar dengan kode posting paling sederhana ini masih menggunakan jQuery-1.3.2.min.js. Javascript pembentuk tooltip dibangun dengan memanfaatkan fade effect, blink effects, text-shadow serta box shadow. Penggunaan kode yang sederhana diharapkan mampu mengurangi kepadatan kode di ruang posting atau widget. Selain itu kode yang teramat praktis ini membuat semua blogger akan dengan amat mudah menggunakannya.
Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px. Sampeyan bisa melihatnya dalam DEMO berikut ini :
Untuk membuat tooltip agar mempunyai tampilan menarik dan terlihat atraktif, kita juga memanfaatkan kode css sebagai pembentuk box tooltip. Tooltip didesain mampu menampilkan gambar dalam tiga variasi ukuran. Yang pertama dengan ukuran lebar (width) 200px, yang kedua 400px dan yang terbesar dengan ukuran gambar 600px. Penggunaan ukuran maksimal 270px dilakukan dengan pertimbangan bahwa sebuah gambar dalam tooltip dengan lebar 600px adalah sebuah ukuran yang sudah teramat besar. Karena ketinggian gambar dibuat dalam bentuk otomatis, maka apabila gambar mempunyai perbandingan 2:3 untuk width dan height, maka gambar akan terlihat dalam ukuran 600px x 900px. Sampeyan bisa melihatnya dalam DEMO berikut ini :
Link Dalam Bentuk Teks
Arahkan cursor di atas gambar dan tunggu!
Langkah penggunaan tooltips
- Login to BloGGeR : Tuliskan User Name/Nama Pengguna atau Email Address dan lanjutkan dengan menuliskan Password/Kode Rahasia (Sandi). Setelah semua tertulis dengan benar, KLIK Login.
- Dasboard/Dasbor : Halaman pertama yang terlihat setelah login adalah Dasboard/Dasbor. Di sini ada beberapa link dengan fungsi yang berbeda. KLIK link Design/Rancangan.
- Design/Rancangan: KLIK link Edit HTML
- Edit HTML : BackUp Template dengan cara KLIK Download Full Template/Download Template Lengkap, kemudian Save/Simpan file Template di Folder PC.
- Find HTML Code : Cari kode <head>.
Letakkan jquery-1.3.2.min.js dan javascript tooltip dan link kode css tooltip di atasnya. Bentuknya akan seperti ini : - Save Template/Simpan Template : KLIK SAVE Template/Simpan Template.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://image-on-tooltip.googlecode.com/files/jqtt-gubhugreyot.js" type="text/javascript"></script>
<link href='http://image-on-tooltip.googlecode.com/files/jqtt.css' media='screen' rel='stylesheet' type='text/css'/>
<head>Cara menggunakan kode HTML tooltips untuk posting atau di widget
Gambar dalam tooltip dengan ukuran (width) = 220px
Untuk menggunakan kode pertama ini, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 200px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.Contoh :
<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1"><img src="thumnail.jpg" width="100" /></a> <a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt1">Teks Link (misalnya Gambar-1)</a>
Gambar dalam tooltip dengan ukuran (width) = 430px
Untuk menggunakan kode kedua, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 400px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.Contoh :
<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt2"><img src="thumnail.jpg" width="125" style="border:5px outset blue;" /></a> <a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt2">Teks Link (misalnya Gambar-2)</a>
Gambar dalam tooltip dengan ukuran (width) = 640px
Untuk menggunakan kode ketiga, sampeyan harus menggunakan gambar minimal berukuran lebar (width) sebesar 600px karena ukuran sebesar ini yang akan di tampilkan di tooltip. Untuk link-nya bisa menggunakan gambar atau teks.Contoh :
<a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt3"><img src="thumnail.jpg" width="150" style="margin:10px 5px;border:4px solid green;" /></a> <a href="image.jpg" title="Tuliskan teks yang akan ditampilkan di tooltip di sini!" class="jqtt3">Teks Link (misalnya Gambar-3)</a>
Catatan/Keterangan :
- image.jpg merupakan gambar yang akan ditampilkan di tooltip. Image ini berukuran besar di atas 300px sesuai kategori tooltip (berdasar class : jqtt1, jqtt2 atau jqtt3.
- thumnail.jpg adalah gambar dalam ukuran lebih kecil yang akan ditampilkan di posting atau widget blog. thumbnail.jpg sebaiknya berukuran malsimal 200px (width atau height) karena nantinya gambar/image (image.jpg)besar ditampilkan lewat tooltip.
- Link dalam bentuk tertulis dapat juga dipergunakan seperti tertulis di atas (gambar-1 s/d gambar-3).
- Width dan style pada kode html bisa dilakukan banyak perubahan tergantung selera pengguna. width dan height sesuai dengan ukuran thumbnail (thumbnail.jpg).
- Gambar dalam Tooltip ini tidak akan membebani blog karena setiap gambar di tooltip hanya akan dimunculkan ketika link tersentuh cursor.
- Untuk membuat bentuk tooltips yang berbeda silahkan rubah kode css tooltip.
- image.jpg harus diganti dengan URL image yang akan ditampilkan di tooltip. Gambar ini berukuran besar (lebih besar dari thumbnail.jpg). Width atau height (tinggi atau lebarnya) sebaiknya lebih dari 300px sehingga fungsi tooltip image ini benar-benar maksimal. Pada intinya penggunaan media viewer seperti tooltip image adalah agar kita dapat menampilkan image dengan ukuran besar akan tetapi loading atau beban blog tetap terjaga (ringan). Mengapa bisa demikian? Yah ... karena image di tooltip kan tidak langsung ikut terloading ketika blog dibuka. Yang ikutan loading si thumbnail.jpg itu saja yang berukuran kecil. Lha karena ukurannya kecil maka jadinya blog juga tetap enteng, gitu, lhoh!!!!
- Tuliskan teks yang akan ditampilkan di ... dst silahkan diganti dengan teks yang menerangkan tentang image atau teks lain yang dirasa tepat untuk ditampilkan di tooltip.
- thumbnail.jpg berupa image miniatur dari image.jpg. Jadi pada intinya setiap akan memfingsikan image on tooltip harus ada dua buah image. image.jpg yang berukuran besar dan thumbnail.jpg yang berukuran kecil.
- width="..." adalah lebar (width) thumbnail.jpg. Rubah nilainya untuk disesuaikan dengan ukuran thumbnail yang anda gunakan.
- style="margin:10px 5px;border:4px solid green; ... dst adalah tambahan kode untuk memperindah thumbnail. Silahkan rubah atau tambah dengan kode yang lain untuk membuat thumbnail terlihat lebih menarik.
- Teks Link (misalnya Gambar-3) digunakan apabila thumbnail tidak digunakan. Jadi artinya yang terlihat di halaman blog berupa teks. Teks ini ketika dicocor cursor akan memunculkan image tooltip.
- Semua yang dibutuhkan sudah sangat lengkap dan tinggal pakai oleh karena itu aku hanya berharap semoga tooltip ini bisa langsung berfungsi dengan sempurna!
Contoh xHTML lengkap Image on Tooltip
Gunakan kode berikut untuk percobaan! xHTML ini sudah lengkap dengan image dan thumbnail serta style untuk mempercantik thumbnail. Dengan kode ini akan menghasilkan seperti tooltip yang di bawahnya!<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEwFYkSTol8h-BtNUr5GCnA1oB4f9dOpx-Y2Lmr7oxMrN5Oe0oW6V_yTBtgDiRBB0ykormPX_2eFhZKkQc8KI80H4D66J1J2A7g_xB_2ilk0aSZGZQ2XX-YdobczJFS4qStMXtSFxSRoM/" class="jqtt2" target="_blank" title="Gadis bule ini dulu teman main semasa kecil ku. Aku dan dia suka main tanah yang dilobangi trus kita guyur pakai air kencing berdua"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAUyrTZcEjuAv29ES6sKvhd6_ab2VdglcJKqApyivr_1y0vLjp9PNlOpmqPqgYkirNIU6BMr77ajdInLJD2HRxdBBy3kFZFjSkNvuFPUCDLLyhW2rtVPciKErXFHFNUjt5A48p-nkS4y8/s200/th_gadisku-001-gubhugreyot.jpg" width="150" height="120" style="padding:5px;background:#eee;border:2px solid #555;border-radius:6px;float:left;margin:5px 10px 5px 0;box-shadow:2px 2px 2px #000;" /></a>
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » January, 09, 2012» Happy Blogging - gubhugreyot «
mas aku dah coba kok ngak jalan yach, ada yang salah di mana yach kira-2 ?
BalasHapusMas .
BalasHapusGmna cara buat ganti kata" .
Kan saya promosi in blog lewat facebook .
Dengan cara .
- Klik tautan
- Tulis website
- Kan udah keluar tuh gambar n website nya .
- Eh punya saya malah kata-kata nya aneh .
- Kolo punya sampeyan malah kata-kata nya bagus
- Contoh : Panduan blogger,Tutorial blogger DLL.
- Tolong yo mas bantu blog saya .
Thx .
maz kok gk bisa toltip nya!!!!.....
BalasHapusMaz gimana cara aku bikin toltip yg maz pake di blog maz ini..yg ada petunjuk nya gitu..
ini srenshoot nya maz
http://3.bp.blogspot.com/_BGDhxsVUJhU/TS3sUaquFUI/AAAAAAAAA5Q/07NJG0wODXY/s1600/cats.jpg
gan apa text yg berwarna merah semua harus di ganti ?
BalasHapusgan kaseh yg lebih spesifik dong ... maaf agan pro ... link foto nya harus gmn penerapan nya al nya punya ane tampilan nya kebelakang bukan kedepan ky punya agan ?
BalasHapusjelas tidak jalan karena cssnya disembunyikan oleh admin cek here
BalasHapushttp://modifikasiblog-modifikasi.blogspot.com/2013/03/tooltip-buat-gambar-image-preview.html