Showing posts with label effek. Show all posts
Showing posts with label effek. Show all posts
Friday, December 30, 2016
cara membuat effek zoom Gambar di Blog
cara membuat effek zoom Gambar di Blog
Membuat Effek Zoom Gambar di Blog

- 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
Go to link Download
Subscribe to:
Posts (Atom)