Assalamualaikum wr wb pagi sob hari ini saya akan kembali membuat artikel tentang Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery,
efek zoom ini memberikan efek zoom lembut engan tombol close di pojok kanannya buat kalian yang mau memasang efek zoom ini silahkan liat ccontohnya di bawah ini.
ya kira-kira contohnya sperti gambar di atas,dan yang mau yau caranya liat dibawah ini
Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery
Bagai mana sob mudah dan praktis kan ya mudahan kode ini berjalan dengan baik dan sesuai keinginan anda.
terimakasih telah berkunjung ke blog saya yang sederhana ini semoga blog kalian dan blog saya jadi tambah sukses,dan jangan lupa tinggalkan pesan di kotak komentar,sampai bertemu sob di artikel selanjutnya.
efek zoom ini memberikan efek zoom lembut engan tombol close di pojok kanannya buat kalian yang mau memasang efek zoom ini silahkan liat ccontohnya di bawah ini.
ya kira-kira contohnya sperti gambar di atas,dan yang mau yau caranya liat dibawah ini
Cara Memberikan Efek Zoom Gambar di Blog dengan JQuery
- masuk ke dasbor blogger
- klik menu template> edit html
- cari kode ]]></b:skin> dan pastekan kode di bawah ini tepat di atasnya
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;
} - kemudian cari lagi kode </head> dan taruh kode dibawah ini diatas kode </head>
<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>
<script type="text/javascript">
jQuery(document.body).imageZoom();
</script> - setelah itu pratinjau template kamu kalau tidak ada kesalahan simpan template kamu
Bagai mana sob mudah dan praktis kan ya mudahan kode ini berjalan dengan baik dan sesuai keinginan anda.
terimakasih telah berkunjung ke blog saya yang sederhana ini semoga blog kalian dan blog saya jadi tambah sukses,dan jangan lupa tinggalkan pesan di kotak komentar,sampai bertemu sob di artikel selanjutnya.
Views:
