Membuat Effek Zoom Gambar di Blog

Sobat blogger mungkin masih sedikit yang tau tentang Membuat Effek Zoom Gambar di Blog, banyak kegunaan dari effek ini. Effek ini menggunakan jQuery, sehingga tampilannya akan lebih lembut dan halus. Ada kalanya kita melihat suatu gambar tutor yang tampilan gambarnya sangat kecil dan tidak jelas, Effek Zoom ini menampilkan gambar dengan ukuran sebenarnya, buat sobat yang penasaran, contohnya bisa sobat lihat di SudutPhoto. Jika sobat berminat, ikuti langkah-langkah berikut ini;

Membuat Effek Zoom Gambar di Blog

  1. Masuk ke blogger;
  2. Klik Perancangan lalu klik Edit HTML;
  3. Carilah kode ]]></b:skin>
  4. Kemudian sisipkan kode berikut ini tepat di atasnya:
/* Zoom Image www.wakrizki.net
------------------------------- */
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}
  1. Selanjutnya cari kode </head>
  2. Kemudian sisipkan kode berikut ini tepat di atasnya:
<!-- Zoom Image code script www.wakrizki.net -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://rizki-khaizir.googlecode.com/files/jquery.imageZoom.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>
  1. Langkah terakhir adalah simpan template sobat. Semoga berhasil

18 Komentar "Membuat Effek Zoom Gambar di Blog", Baca atau Masukkan Komentar

Ego Dafma Dasa said...

menarik nih.tapi sulit copy kodenya.kan saya blogger mobile.kayaknya blogger mobile tidak akan sebaik blogger lainnya.makasih atas infonya.

MustBhagoezt said...

bagus juga ni buat mempercantik blog..

Ady Yusanto said...

makasih om berhasil. keep posting!!!

christian sondegau said...

thanks very nice

Green KLOPERER said...

okey mksh sob atas infonya,,udah saya praktekin walapun kadang2 ada gambar yg ga zooom cuman bergeser tanpa ada perubahan ukuran untuk ukuran gambar tertentu :) n salam kenal jg,,kunjungan perdana :)

blog yusuf said...

sip

Tjhan Gai Yang ( YC3HDF) PIN BB :26B39683 said...

wah.. itu tinggal di copy paste kan? di blog saya tidak jalan bos.. masalahnya dimana ya?

Dony Untung Prabowo said...

wah tutornya sangat bermanfaat ni s0b,,,salam kenal ya s0b,,http://blogku--inspirasiku.blogspot.com

Mamura said...

thanks ya kk sCrip-y !!
http://bully-404.blogspot.com/

Boedhye Thejoe said...

maaf nih gan mau nanya ko waktu ngelik gambar buat zoom ko malah menu home horizontal gue menutup sebagian gambar gue mohon d bantu gan

MasTer Q said...

@Boedhye Thejoe
Sepertinya script ini sudah tidak berguna lagi buat blogger, karena saat ini blogger telah membuat script zoom image whit thumbnails sendiri, mereka telah update seperti waktu kita klik image di facebook. terima kasih buat sobat yang telah berkoment dan menggunakan script ini, tapi saran saya sebaiknya script ini dicopot saja. karena blogger saat ini telah support dengan zoom image.

Ngeblog yuk said...

keren tips nya udah saya pasang di blog saya pak.makasih yah infonya

visit my blog http://jamtangankanan.blogspot.com

Mockd Merch™ said...

keren dah tutorialnya gan :)

visit to my blog http://www.mockdmerchandise.co.cc/

Gudang Wisata said...

mantra manjur gan, tutorial'a dah diterapkan d blog ane. :)

om onny said...

terima kasih atas tutorialnya

Muhammad Irfan said...

kira-kira membuat loading blog menjadi agak berat nggak ini?

semewew said...

keren nih gan... makasih banyak nih gan

Muhammad Adam Hussein said...

makasih banyak tutorial ini berfungsi, dan sangat saya butuhkan terimakasih.

Followers