Kalo belum tau gak papa, sekarang aku mau share cara bikinnya untuk blogger mania. Biasanya kan image blogger mania semuanya bisa kelihatan jelas ketika di klik, karena terdapat url imagenya. Nah, sekarang, blogger dapat melihatnya dgan jelas tanpa harus meng-klik image tersebut. Dengan modal mengarahkan pointer mouse ke arah gambar, anda bisa melihat image dalam ukuran sebenarnya (tergantung ukuran serta kualitas image tersebut).
Untuk preview saya udah sediain, lihat effect pada gambar berikut:
Nah pada gambar di atas itu sudah di masukkan class supaya image tersebut menjadi besar.
Untuk effect seperti di atas, yang perlu anda lakukan adalah download file JS berikut dan upload ke dalam file hosting anda:
Lalu, masukkan ke bagian <head> template anda dengan kode berikut:
<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"></script>
Jangan lupa mngganti Expando.js dengan url file yang anda upload tadi.
Lalu untuk mendapatkan effect seperti di atas, anda perlu menambahkan class="expando" di setiap image. Contoh:
<img class="expando" border="0" src="IMAGE_URL" width="100" height="75">
Tapi ingat, file image tersebut ketika pemasangannya harus di resize. Misalnya file asli mempunyai width="400" dan height="200", maka anda harus mengubahnya menjadi width="200" dan height="100"
.
Saya rasa itu sudah cukup.
0 Berkomentarlah dengan sopan, jangan spam:
Posting Komentar