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;
- Masuk ke blogger;
- Klik Perancangan lalu klik Edit HTML;
- Carilah kode ]]></b:skin>
- 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;
}
- Selanjutnya cari kode </head>
- 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>
- Langkah terakhir adalah simpan template sobat. Semoga berhasil
Artikel terkait :
18 Komentar "Membuat Effek Zoom Gambar di Blog", Baca atau Masukkan Komentar
menarik nih.tapi sulit copy kodenya.kan saya blogger mobile.kayaknya blogger mobile tidak akan sebaik blogger lainnya.makasih atas infonya.
bagus juga ni buat mempercantik blog..
makasih om berhasil. keep posting!!!
thanks very nice
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 :)
sip
wah.. itu tinggal di copy paste kan? di blog saya tidak jalan bos.. masalahnya dimana ya?
wah tutornya sangat bermanfaat ni s0b,,,salam kenal ya s0b,,http://blogku--inspirasiku.blogspot.com
thanks ya kk sCrip-y !!
http://bully-404.blogspot.com/
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
@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.
keren tips nya udah saya pasang di blog saya pak.makasih yah infonya
visit my blog http://jamtangankanan.blogspot.com
keren dah tutorialnya gan :)
visit to my blog http://www.mockdmerchandise.co.cc/
mantra manjur gan, tutorial'a dah diterapkan d blog ane. :)
terima kasih atas tutorialnya
kira-kira membuat loading blog menjadi agak berat nggak ini?
keren nih gan... makasih banyak nih gan
makasih banyak tutorial ini berfungsi, dan sangat saya butuhkan terimakasih.
Post a Comment