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
menarik nih.tapi sulit copy kodenya.kan saya blogger mobile.kayaknya blogger mobile tidak akan sebaik blogger lainnya.makasih atas infonya.
ReplyDeletebagus juga ni buat mempercantik blog..
ReplyDeletemakasih om berhasil. keep posting!!!
ReplyDeletethanks very nice
ReplyDeleteokey 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 :)
ReplyDeletesip
ReplyDeletewah.. itu tinggal di copy paste kan? di blog saya tidak jalan bos.. masalahnya dimana ya?
ReplyDeletewah tutornya sangat bermanfaat ni s0b,,,salam kenal ya s0b,,http://blogku--inspirasiku.blogspot.com
ReplyDeletethanks ya kk sCrip-y !!
ReplyDeletehttp://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
ReplyDelete@Boedhye Thejoe
ReplyDeleteSepertinya 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
ReplyDeletevisit my blog http://jamtangankanan.blogspot.com
keren dah tutorialnya gan :)
ReplyDeletevisit to my blog http://www.mockdmerchandise.co.cc/
mantra manjur gan, tutorial'a dah diterapkan d blog ane. :)
ReplyDeleteterima kasih atas tutorialnya
ReplyDeletekira-kira membuat loading blog menjadi agak berat nggak ini?
ReplyDeletekeren nih gan... makasih banyak nih gan
ReplyDeletemakasih banyak tutorial ini berfungsi, dan sangat saya butuhkan terimakasih.
ReplyDelete