Membuat ' Expando Image Effect'.

Sekiranya anda tidak mengetahui apa itu ' Expando Image Effect ' ?

Sila lihat demo di sini. Letakkan cursor pada imej untuk melihat kesannya.

1. Sign in akaun blogger anda.

2. Pilih LAYOUT --> EDIT HTML.

3. BACKUP TEMPLATE anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada EXPAND WIDGET TEMPLATE seperti screenshot di bawah ini.

5. Cari kod ini.

</head>

6. Copy kod di bawah dan letakkan di atas kod tadi.

<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 src='http://h1.ripway.com/syamzone/Expand Image.txt ' type='text/javascript'>

/* Expando Image Script &#169;2008 John Davenport Scheuer

as first seen in http://www.dynamicdrive.com/forums/

username: jscheuer1 - This Notice Must Remain for Legal Use

*/

</script>

7. Save Template.

8. Untuk menggunakan 'Expando Image Effect' dalam artikel / post terbaru. Gunakan kod di bawah dan gantikan url imej berwarna biru kepada Url imej anda.

<center>

<img class="expando" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwdKwX-qCiQuwCJ2-Q4eTdpuQmUOMAcpuBuvP_a5FAAvAaHAM-Ze71CUbbDVDJPbXx73p5v-pmD7k2d2jnZq0KLrRUMsaxKD1K9gv3XBSzwiqngGqUW-LOb3Woo6X3vGByD0KIldRKtbZB/s400/angry_boy_cartoon.gif" border="0" width="200" height="200" />

</center>

9. Setiap kali anda mengupload imej gunakan url imej yang berwarna biru sahaja. Lihat contoh di bawah.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KXEN4Dq5rWh6oijrvWUVaM-VRkEjt1a6hB_Uec75hLnqO0s6lcCKLLTTu5rUjS3QEoOnWcu3TmhXCH-xBSwYYury8UwkCqrfoKealb4iCcvlu9Cuj1nIedV1FbDwOK84UONfljQZtYI/s1600-h/Show+All+Posts+Screenshot.bmp"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 267px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KXEN4Dq5rWh6oijrvWUVaM-VRkEjt1a6hB_Uec75hLnqO0s6lcCKLLTTu5rUjS3QEoOnWcu3TmhXCH-xBSwYYury8UwkCqrfoKealb4iCcvlu9Cuj1nIedV1FbDwOK84UONfljQZtYI/s320/Show+All+Posts+Screenshot.bmp" border="0" alt="" id="BLOGGER_PHOTO_ID_5355028411484323586" /></a>

Perhatian !!! Anda boleh mengubah saiz imej dengan menggantikan height dan width 200 yang berwarna biru mengikut kesesuaian imej anda.

Rujukan Dynamic Drive.