Cara Membuat Efek Zoom Gambar Di Blog Yang Dimiliki

Membuat Efek Gambar di Blog, Memasang Efek Gambar di Blog. Efek Zoom pada sebuah gambar bila terkena kursor mouse di blog menambah daya tarik tersendiri bagi sebuah blog yang di kunjungi. Efek gambar tersebut bermacam-macam, ada yang berupa zoom secara detail pada gambar yang menampilkan efek seperti sebuah kaca pembesar, ada juga efek yang menampilkan pembesaran atau zoom pada keseluruhan gambar, ada juga zoom gambar dengan fariasi berputar 360 derajat pembesaran gambar. 

Penambahan efek ini banyak digunakan oleh blogger di blog yang mereka miliki. Daya tarik tersendiri pada efek gambar pada artikel membuat tampilan beda pada blog kita.

Pada artikel ini akan saya sharing zoom gambar dengan pembesaran dengan skala 1,5 dan zoom gambar dengan fariasi berputar pada gambar. Teman-teman ingin mencobanya..? Ikuti langkah-langkanya di bawah ini.

1. Efek Zoom Gambar Dengan Skala 1,5

Cara pembuatan efek ini sangat mudah. Silakan teman copy kode CSS di bawah ini.

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

Pastekan kode di atas tepat di atas kode ]]></b:skin> pada Edit HTML.

Pada proses ini sudah selesai foto pada artikel anda sudah bisa dizoom bila terkena kursor mouse. Lebih cantik bukan..? Untuk melihat hasilnya silakan lihat DEMO.

2. Efek Zoom Gambar Berputar

Untuk efek zoom gambar yang satu ini lebih cantik lagi, dengan berputar terlebih dahulu sebelum melakukan zoom. Pemasangannya juga gampang, ikuti langkahnya dibawah ini :

1. Copy kode script di bawah ini.

#seocips img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;} #seocips img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}

2. Pastekan kode script di atas dan letakkan tepat di atas kode ]]></b:skin> pada Edit HTML.
3. Untuk Kode Elemen pada gambar gunakan kode di bawah ini.

<div id="seocips">
<div style="text-align: center;">
<a href="http://miniblogger28.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxj3EKf3GEquQss0sPC2RP4RmMjouiTu7-yO86OpmA_PjSxUmgXMtLFC09Yg4O0C3doiCEFxbemoWxla526N7FvloxGUVCw4kdNbNQaf0gL_bNAZVwJuTOWwqfugu7GcMrpj25LUvm_g/s1600/foto+artis.jpg" height="199" width="320"/></a></div>

Keterangan Kode :
* Tukarkan tulisan warna merah dengan alamat URL Gambar.

4. Kode script yang di atas ditempatkan pada posting untuk memasang gambar dengan zoom berputar. Untuk hasilnya lihat pada DEMO.

3. Membuat Efek  Kaca Pembesar Di Gambar Pada Postingan

Yang satu ini efeknya juga cantik. Dengan mendekatkan kursor pada gambar, maka akan ditampilkan bagian-bagian gambar secara detail dan lebih jelas. Cara pemasangannya ikuti langkah-langkah di bawah ini:

1. Copy paste kode di bawah ini, dan letakkan tepat di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Catatan :
Apabila kode di atas sudah tersedia pada template, maka kode di atas tidak perlu di pasang lagi.

2. Kopy pastekan juga kode di bawah ini tepat di atas kode </head>

<script src="https://abitalita.googlecode.com/files/zoomlup.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
     $('#besarkangambar').perbesaran({
     sorotanu: 2,
     kisaranu: [2,10],
     anubesar: null,
     pembesaranu: [140,140]
    })
    })
    </script> 

3. Untuk membuat Efek Gambar, Copy paste kode di bawah ini pada postingan blog.

Keterangan :
1. id="besarkangambar" = kata besarkan gambar pada kode tidak boleh diubah karena merupakan perintah dari kode tersebut.

2. "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiusBWvleQT7woqnNl1bff5UYcgz_6LXrKkIBMU4zvjiLkFyzymFofdj27zCLogXtLYsTx0npmV6t1C_XcP11Uob8x-0ASQ_8eS8ELH5RsULAm7sgoLHFD0Fi_ojvCM_cDe7YP7Wjfpvw/s400/942366_1382182898667206_918520203_n.jpg" = tukarkan dengan alamat gambar yang dimiliki.

3. "height: 150px; width: 500px;" = merupakan tinggi dan lebar gambar.

Dengan mempercantik tampilan gambar pada posting, bukan hanya memberikan kepuasan bagi para pengunjung blog, tetapi juga bagi kita pemilik blog itu sendiri.

Demikian artikel singkat ini, jika ada manfaat silakan bergabung di blog ini.