Bismillah
Sobat bingung apa itu dan bagaimana kegunaannya, nah menurut saya pribadi Membuat Efek Zoom Pada Gambar adalah keuntungan 40% dari blog yang mungkin dapat menyempurnakan gambar apabila bentuk dari gambar itu kecil, tutorial ini menggunakan kode jQuery maka efek yang ditampilkan pun cukup bagus dan indah dan berikut tutorialnya

Membuat Efek Zoom Pada Gambar

Langkah 1
Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2
Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya
/* Zoom Image
------------------------------- */
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;
}
Langkah 3
Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya
<!-- Zoom Image code script -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://koderator.googlecode.com/files/zoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document.body).imageZoom();
</script>
Langkah 4



Semoga bermanfaat, selamat mencoba dan semoga berhasil

Labels:

18 Komentar:

Blogger Nor Azmi Abdi F said on April 21, 2012 at 8:40 PM 

bro, gimana caranya nambah elemen baru di samping header, udah gua cari2 caranya malah kode htmlnya yang gak ada diblog gua, mogon penerangan bro ;;)

Blogger Muhammad Irham said on April 22, 2012 at 9:12 AM 

@Nor Azmi Abdi Fyang mana gan :-/

Blogger Muhamad Zaid said on May 19, 2012 at 3:07 PM 

kang, kalo zoom yang kayak di blog agan gimana caranya?

:-/

Blogger Muhammad Irham said on May 20, 2012 at 4:51 AM 

@Muhamad Zaid blog yg mana?

Blogger Raden Chopin said on May 21, 2012 at 4:20 PM 

This comment has been removed by the author.

Blogger Raden Chopin said on May 21, 2012 at 4:29 PM 

gan di blog saya gambarnya double ..

Anonymous gerai pelangsing said on May 23, 2012 at 3:11 AM 

ada demonya ngga gan?

Blogger Emzeth zaid said on May 28, 2012 at 8:15 AM 

@Muhammad Irham yang di blog ini gan, kalo yg di atas ane terapin efeknya beda...

Blogger Muhammad Irham said on May 28, 2012 at 2:55 PM 

@Emzeth zaid emang di blog ini ada efek zoomnya?, saya kok ngk ngrasa pernah menerapkannya n di kompi saya kok ngak nampak?

Blogger View Images Official Account said on May 28, 2012 at 6:43 PM 

@Muhammad Irham yang kalo klik gambar trus ada efek fullscreen nya bro. hehe, namanya bukan efek zoom ya? sori2...

minta tutorialnya dong

Anonymous Sigodang Pos said on June 10, 2012 at 2:04 AM 

Asyik ni, akhirnya dapat juga tutorialnya.

Blogger Rhiezky Ramadhan said on June 15, 2012 at 4:18 PM 

keren gan.
:))

Blogger Muhammad Irham said on June 15, 2012 at 8:54 PM 

@View Images Official Account kalo itu emang dari bloggernya sob, asal artikel ngak copas n upload fotonya dari posting langsung pasti kalo diklik akan ngefek sendiri

Blogger Rudy Hartono said on June 29, 2012 at 11:22 PM 

makasih infonya sangat bermanfaat sekali, nice posting

Blogger Blogger Pemula said on July 12, 2012 at 5:11 PM 

sob udah saya praktekkin, tp kok gambarnya ga ngezoom ya?

Blogger Royan Sableng said on July 26, 2012 at 4:57 PM 

tak coba dulu gan

Blogger Wildan ITCx said on August 21, 2012 at 4:00 PM 

berhasil bro

kunjungan balik nya yh >>> www.itcxgresida.blogspot.com

Blogger dzikrul akbar u know said on February 12, 2013 at 9:39 PM 

izin copas htmlnya ya??

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger