Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 04, 2013

Menambahkan Efek Zoom Pada Gambar di Blog

menambahkan efek zoom pada gambar di blog
Pada artikel saya yang lalu, saya sudah pernah membahas tentang bagaimana membuat efek gabungan aantara drop shadow dengan efek zoom pada gambar. Oleh karena mungkin ada blogger yang hanya ingin salah satu efek dari kedua efek tersebut saja yang dipasangkan pada gambar, maka kali ini saya hanya akan membahas tentang bagaimana cara menambahkan efek zoom pada gambar. Dengan menambahkan efek zoom pada gambar anda di blog, maka anda tidak perlu untuk mengklik gambar agar gambar menjadi lebih besar. Anda hanya perlu meletakkan mouse anda pada gambar, maka gambar tersebut akan membesar secara otomatis (fungsi zoom). Contohnya dapat anda lihat pada link demo di bawah ini.


Menambahkan Efek Zoom Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>
.TKBZoom img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.TKBZoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Step 3

Save Template

Step 4

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.
<div class="TKBZoom" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>
Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right".
Selamat mencoba!
Wassalam. 
 

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 12:42 AM

0 comments :

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.