Efek zoom kaca pembesar pada gambar postingan artikel Blog
Halo sobat seocips. Pada kesempatan ini seocips akan membagikan tutorial bagaimana cara membuat efek zoom kaca pembesar menggunakan CSS3 dan Jquery pada gambar postingan blog, Setelah sebelumnya seocips juga telah membagikan cara membuat efek zoom berputar pada gambar blog.

Mungkin saja sobat tertarik untuk memasang efek seperti ini di blog, misalnya karena gambar yang di pasang terlalu kecil tapi memuat informasi berupa tulisan kepada pembaca. Atau misalnya sobat memiliki blog toko online.

Efek ini pertama kali saya lihat pada blog toko online dimana pemiliknya memasang efek ini pada gambar dagangannya untuk menampilkan lebih jelas produk/barang kepada pengunjung blog/web. Ok langsung saja cekidot...


Gimana keren gak? ini nih cara membuatnya:

Magnifying glass for image zoom using Jquery and CSS3

Kode CSS

Seperti biasa, masuk pada menu EDIT HTML template Blogger, dan letakan kode dibawah ini di atas ]]></b:skin> atau </style>.
* {margin: 0; padding: 0;}
.magnify {width: 200px; margin: 50px auto; position: relative;}
.large {
 width: 245px; height: 245px;
 position: absolute;
 border-radius: 100%;
 box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
 0 0 7px 7px rgba(0, 0, 0, 0.25),
 inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
 background: url('http://3.bp.blogspot.com/-o0RW1RJSpdI/VU2ZSn_rfPI/AAAAAAAAEsY/vk4IQAr8Us0/s1600/seocips-image-effect-demo.jpg') no-repeat;
 display: none;
}
.small { display: block; }
Ganti kode berwarna merah di atas dengan gambar anda

HTML

 Letakan dalam postingan ( mode HTML ) atau dimana saja .
<div class="magnify">
 <div class="large"></div>
 <img class="small" src="http://3.bp.blogspot.com/-o0RW1RJSpdI/VU2ZSn_rfPI/AAAAAAAAEsY/vk4IQAr8Us0/s1600/seocips-image-effect-demo.jpg" width="200"/>
</div>
Ganti kode berwarna merah di atas dengan gambar anda.

Javascript dan Jquery

Letakan saja misalnya diatas </head> atau </body> coba saja mana yang cocok.
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree1.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/seocips/seocips-script/prefixfree2.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/seocips/seocips-script/jquery-1.7.1.min.js" type="text/javascript"></script>
Untuk kode jquery berwarna merah di atas tidak usah dipasang jika sudah ada kode yang sama atau sejenis, atau dipasang jika efeknya tidak keluar.

Gimana hasilnya?
Sekian tutorial kali ini, selamat mencoba deh sob.
0 Komentar untuk "Cara membuat efek zoom kaca pembesar pada gambar Blog."