Wednesday, August 19, 2009

Tampilkan Gambar dengan Efek FancyZoom

Posted by dav On 12:30 AM
Efek yang dibuat Cabel Maxfield Sasser ini dirancang untuk menampilkan gambar layaknya animasi yang sering ditemukan pada Mac. FancyZoom's (Prancis berarti "raisin-determination") dirancang lembut, bersih hampir seperti efek pada Safari. Menurut informasi pembuatnya, efek ini terinspirasi dari efek LightBox. Makanya kalo diperhatikan efek ini akan menampilkan gambar dengan efek zoom (membesar) seperti efek LightBox. Tetapi efek FancyZoom versi 1.1 ini lebih bersih dan lebih lembut dalam menampilkan efek, bahkan beberapa blogger mengembangkan efek ini lebih baik.
Selain itu penerapan efek FancyZoom tidak serumit efek LightBox, dan tidak diperlukan modifikasi atau penambahan kode yang memusingkan. Jika penasaran silahkan lihat-lihat gambar yang ada pada artikel Hendriono Online.
Integrasi Efek FancyZoom
Langkah 1
Download script FancyZoom Versi 1.1 disini
Langkah 2
Login ke Blogger
Langkah 3
Masuk ke bagian "Tata Letak - Edit HTML"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan kode dibawah ini diatas kode langkah 4 (baca keterangan):
<script src='URL-ANDA/FancyZoom.js' type='text/javascript'/>
<script src='URL-ANDA/FancyZoomHTML.js' type='text/javascript'/>
Langkah 6
Cari kode dibawah ini:
<body>
Langkah 7
Tambahkan kode FancyZoom sehingga menjadi seperti dibawah ini:
<body onload="setupZoom()">
Langkah 8
Simpan template...

Modifikasi kode gambar pada artikel
Langkah 1
Upload sebuah gambar pada artikel
Langkah 2
Ubah mode "Tulis" menjadi mode "Edit HTML"
Langkah 3
Buanglah kode -h (warna merah) pada kode gambar, perhatikan contoh dibawah ini
<a onblur="try {parent.deselectBloggerImageGracefully();}catch(e) {}"href="http://2.bp.blogspot.com/AAAAB9g/s1600-h/image.jpg"><img style="cursor:pointer;" src="http://2.bp.blogspot.com/AAAAB9g/s400/image.jpg" alt="" id="BLOGGER_PHOTO_ID_XXXXX" border="0"></a>
Langkah 4
Terbitkan artikel...

Keterangan :
  • Lihat langkah 5 pada integrasi efek FancyZoom, ubah URL-ANDA dengan URL tempat anda menyimpan file yang telah di download pada langkah 1
Semoga berhasil dan silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)
,

Popular Posts