Gambar Thumbnail kali ini yang akan dibahas yaitu gambar thumbnail model Expando merupakan sebuah bentuk penyederhanaan ukuran gambar dari ukuran gambar yang sebenarnya, dan akan nampak gambar dengan sebenarnya jika "mouse" digeser kegambar tersebut. Silahkan sobat arahkan "mouse" ke gambar dibawah.
Jika sobat ingin membuat gambar thumbnail seperti diatas, yoo ayoo ikuti langkah berikut :
1. "Login" kedalam Blog sobat dengan menggunakan ID dan Password sobat
2. Pilih tab "LAYOUT/TATA LETAK", kemudian pilih juga "EDIT HTML"
3. Tandai Kotak Kecil yang bertuliskan "EXPAND WIDGET". Sebagai perhatian lebih baik sobat back-up template sobat dulu sebelum menambahkan kode atau merubah kode HTML caranya Klik tulisan "DOWNLOAD FULL TEMPLATE"
4. Cari Kode <head> kemudian copy kode dibawah dan letakan kedalam kode <head> atau persis dibawah <head>. Ini kodenya :
<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script type="text/javascript" src="expando.js">
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>
Ganti tulisan berwarna biru dengan dimana sobat menaruh file "expando.js" (tentunya di lokasi penyimpanan file sobat, semisal www.geocities.com). Ups maaf lupa neh saya, sobat belom punya file "expando.js" bisa sobat download disini, setelah di download sobat upload ke hosting penyimpanan file sobat.
5. Setelah proses paste kode diatas selesai selanjutnya klik "SIMPAN TEMPLATE / SAVE TEMPLATE"
CARA MENARUH GAMBAR EXPANDO
Cara menuliskannya kedalam widget / posting sobat dengan menuliskan kode seperti berikut :
1. Untuk Gambar Tanpa Link
<img class="expando" border="0" src="URL gambar.jpg" width="100" height="75">
Text berwarna merah jangan sampai terlewatkan / harus selalu dituliskan, text warna kuning ganti dengan URL Gambar dan untuk text berwarna hijau merupakan ukuran gambar tumbnail (bukan ukuran sebenarnya), sobat dapat menggantinya sesuai kebutuhan.
2. Untuk Gambar Dengan Link
<a href="URL Tujuan" target="_blank"><img border="0" alt="" src="URL Gambar" class="expando" width="80" height="20"/></a>
Jika sobat ingin Ebooknya saya mendapatkan ebook ini dari teman saya Pit-Onta sobat juga dapat download ebook Tutorial Membuat Gambar Expando atau dengan klik gambar sampul ebooknya.
Sumber Bahasan :
Sumber asli dari web Dynamicdrive.com dan mas Pit-Onta
Semoga bermanfaat.
wah menarik,unik dan patut di coba nih
weeekkksss... mantab, sampe kaget saya tiba2 bisa gede gt gambar nya... hehehe.. btw, blog ini gak dofollow bos saya cek.. keep share