Home » » Cara Membuat Efek Zoom Gambar Di Blog Yang Dimiliki

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="http://3.bp.blogspot.com/-JEOtataXgO0/VPu--RdbwPI/AAAAAAAAA3s/qcZRqe3AjlY/s1600/foto%2Bartis.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. "http://4.bp.blogspot.com/-DFkP2trbFX8/Ud5ythmyXVI/AAAAAAAABbw/z186GJl0CCE/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.

12 komentar:

  1. keren mas, cuma ingin menambahkan sedikit, karena dalam link URL-gambar ada kode height dan width. agar tampilan gambar responsive, mas tambahkan saja kode ini dalam CSS diatas

    #seocips img {width:320px;height:199px}

    lalu ubah format dimensi gambar menjadi /s320 atau sampai ketemu posisi center gambar, tujuannya agar muat gambar saat loading tidak berat.

    oh ya satu lagi CSS,HTML dan js itu berbeda fungsi mas, karena mas sebutkan kode script disana, tetapi kode yang terlihat saat dibuka adalah CSS elemen.

    ReplyDelete
    Replies
    1. Terima kasih buat mbak Devy Indriani atas kritikannya, karena kritik dan saran memang saya butuhkan demi perbaikan dan perkembangan blog ini.
      Salam sukses selalu...

      Delete
  2. menurut ane, blog keknya ga perlu pake macam2 efek karena akan memperlambat loading

    maaf telat kunbalnya :)

    ReplyDelete
    Replies
    1. Memang benar mas, tetapi terkadang untuk beberapa posting terkadang kita memerlukan beberapa efek untuk menunjang tampilan sebuah posting. Dan untuk memperkecil file kode kita bisa menggunakan kompres html, CSS dan lainnya..
      terima kasih mas kritik, saran dan kunjungannya..

      Delete
  3. keren mas hasilnya, saya coba dulu ya :D

    ReplyDelete
  4. Terima kasih udah mampir ,as ibrahim.. silakan dicoba...berhasilbaik mas waktu aku sendiri coba.. lihat ja di DEMO

    ReplyDelete
  5. Mantap nih tipsnya gan, boleh di coba nihh ;)

    http://myapotekacemaxs.com/

    ReplyDelete
    Replies
    1. silakan dicoba mas... tingkat keberhasilannya 100%.. sudah saya coba ..

      Delete
  6. keren gan, izin praktek :-)

    http://agunk14.blogspot.com/

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  8. kerenlah... dan berhasil... makasih mas muhamad....
    boleh koreksi ke blog ane....

    ReplyDelete

* Komentarlah yang sopan dan tidak mengandung sarah.
* Jangan gunakan Kotak Komentar dengan promosi produk serta usaha yang anda miliki. Silakan gunakan sarana Review Produk dan Jasa di blog ini. Maaf, akan dihapus.
* Terima kasih atas kunjungan, komentar dan partisipasi yang diberikan.

.