Labels: jQuery
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
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
------------------------------- */
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;
}
Selanjutnya cari kode </head> kemudian sisipkan kode berikut diatasnya
<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>
Semoga bermanfaat, selamat mencoba dan semoga berhasil
18 Komentar:
Fadillah Abdi 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 ;;)
Muhammad Irham said on April 22, 2012 at 9:12 AM
@Nor Azmi Abdi Fyang mana gan :-/
Proinov said on May 19, 2012 at 3:07 PM
kang, kalo zoom yang kayak di blog agan gimana caranya?
:-/
Muhammad Irham said on May 20, 2012 at 4:51 AM
@Muhamad Zaid blog yg mana?
Unknown said on May 21, 2012 at 4:20 PM
This comment has been removed by the author.
Unknown said on May 21, 2012 at 4:29 PM
gan di blog saya gambarnya double ..
gerai pelangsing said on May 23, 2012 at 3:11 AM
ada demonya ngga gan?
Navi.id said on May 28, 2012 at 8:15 AM
@Muhammad Irham yang di blog ini gan, kalo yg di atas ane terapin efeknya beda...
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?
Emzeth Vi 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
Sigodang Pos said on June 10, 2012 at 2:04 AM
Asyik ni, akhirnya dapat juga tutorialnya.
Rhiezky Ramadhan said on June 15, 2012 at 4:18 PM
keren gan.
:))
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
said on June 29, 2012 at 11:22 PM
makasih infonya sangat bermanfaat sekali, nice posting
Blogger Pemula said on July 12, 2012 at 5:11 PM
sob udah saya praktekkin, tp kok gambarnya ga ngezoom ya?
royansableng said on July 26, 2012 at 4:57 PM
tak coba dulu gan
Unknown said on August 21, 2012 at 4:00 PM
berhasil bro
kunjungan balik nya yh >>> www.itcxgresida.blogspot.com
Unknown said on February 12, 2013 at 9:39 PM
izin copas htmlnya ya??
Post a Comment