Membuat Gambar Membesar Tersentuh Cursor

Membuat Gambar Membesar Tersentuh Cursor Pada Blog atau Efek Gambar Zoom Pada Blog
Mungkin Bagi Para master Blog cukuplah Mudah Namun Dunia Afta Berbagi Untuk para pemula yang melihat gambar membesar saat terlewati cursor dan penasaran ingin bisa menerapkan pada blogya,,dan itu tidah salah bagi para Blogger Pemula telah tersasar kemari karena Dunia Afta akan berbagi pengalaman kepada Blogger pemula,Dan tidak mengurangi rasa hormat kepada para master mohon keritikanya bila postingan Dunia Afta kurang berkenan.
Sobat Afta sebelumnya Dunia Afta Berbagi
Cara Membuat Gambar Berputar Tersentuh Cursor Pada Blog Bila sobat Afta ingin menerapkan pada blog sobat atau hanya ingin sekedar melihat silahkan klik "DI SINI"
Dan lansung aja kita mulai tutorial 
Cara Membuat Gambar Membesar Tersentuh Cursor Pada Blog

1. Login ke Blogger
2. Pilih Rancangan > Edit HTML > Centang Expand Template Widget.Atau cadangkan Download

   Templete jaga jaga bila terjadi kesalahan
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
    (Gunakan CTRL+F untuk memudahkan pencarian)

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}


.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

4. Simpan /Save Templete

5.Selanjut nya memasukkan gambar yang ingin di zoom
  Dengan cara buat Entri baru atau New Entri dan Pastekan Code Dibawah ini Pada Halaman HTML
code

<div class="cayunhover">

<div class="separator" style="clear: both; text-align: center;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdKIZzMBuytSwG8-wOTx5K9xASZHpfP2f51KmeBFi3ldNVDcCW0ILXAomMt16kjGVWH_JbMvLTpttZ4qW8_l3A2lmxCDFjHNaMLC3u8ejU47mYKRYMkdxy_LNHMfYOiE5UMJR8DyrCEA/s1600/Allah+swt.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdKIZzMBuytSwG8-wOTx5K9xASZHpfP2f51KmeBFi3ldNVDcCW0ILXAomMt16kjGVWH_JbMvLTpttZ4qW8_l3A2lmxCDFjHNaMLC3u8ejU47mYKRYMkdxy_LNHMfYOiE5UMJR8DyrCEA/s320/Allah+swt.jpg" width="320" /></a></div></div>

Keterangan Code
# Ganti Yang warna Biru dan merah dengan dengan URL gambar anda

6.Terahir Post entri atau Pubikasikan postingan>>SELESAI >>dan lihat hasilnya

NAMUN
Code diatas digunakan untuk satu tujuan gambar,bila anda inginkan tujuan gambar lain dan akan muncul gambar lain maka ganti yang warna biru dengan url alamat gambar anda

Seperti contoh dibawah ini

<div class="cayunhover">

<div class="separator" style="clear: both; text-align: center;">

<a href=" https://lh5.googleusercontent.com/-UMVTEQCgXq4/Ud_ozYPYZuI/AAAAAAAABBY/BgefJLs0BmY/w1043-h364-no/a2.jpg " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdKIZzMBuytSwG8-wOTx5K9xASZHpfP2f51KmeBFi3ldNVDcCW0ILXAomMt16kjGVWH_JbMvLTpttZ4qW8_l3A2lmxCDFjHNaMLC3u8ejU47mYKRYMkdxy_LNHMfYOiE5UMJR8DyrCEA/s320/Allah+swt.jpg" width="320" /></a></div></div>

Untuk melihat hasilya silah kan sobat klik gambar maka sobat akan melihat gambar yang lain

Gambar Membesar Tersentuh Cursor ini juga bisa diterapkan untuk membuka halaman baru dengan cara memasuk kan LINK tujuan halaman,
Seperti contoh dibawah ini CODE diatas yang berwarna biru ganti dengan LINK halaman yang ingin anda tuju

<div class="cayunhover">

<div class="separator" style="clear: both; text-align: center;">

<a href=" http://duniaafta.blogspot.com/2013/07/indosiar-streaming.html " imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdKIZzMBuytSwG8-wOTx5K9xASZHpfP2f51KmeBFi3ldNVDcCW0ILXAomMt16kjGVWH_JbMvLTpttZ4qW8_l3A2lmxCDFjHNaMLC3u8ejU47mYKRYMkdxy_LNHMfYOiE5UMJR8DyrCEA/s320/Allah+swt.jpg" width="320" /></a></div></div>

Utuk melihat hasilnya silahkan Sobat Afta klik gambar maka sobat akan di bawa masuk kehalaman baru

Sekian dulu ya saya rasa Postingan Cara Membuat Gambar Membesar Tersentuh Cursor Pada Blog
Sudah selesai dan malam mulai larut mata pun mulai ngantuk,,saya ucapkan sampai jumpa lagi dan
selamat mencoba semoga berhasil