Add jQuery Image Zoom To Your Blogger Blog, its Awesome !
Here how to add Image Zoom with jquery effect in blogger.
Add The Css And Scripts
Step 1. In your Blogger Dashboard Click Design > Edit HtmlStep 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)
]]></b:skin>
Step 3. Copy And Paste The Following Code Directly Above ]]></b:skin>
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
Important - You may need to change the highlighted code above to suit your template.This sets the distance of the zoom image from the side of the page, see more on this in the Video Tutorial.
Step 4. Now Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code)
</head>
Step 5. Copy and paste the following piece of code Directly Above </head>
Important - The code highlighted in yellow is the main jQuery script, if you already have jQuery in your template don't add this.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/><script src='http://suyb.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
Step 6. Save Your Template, that's the jQuery and Css added now you just gotta add your images.
Adding The Image To Your Posts
When you upload a large image to Blogger it will often be re-sized to fit your posts.This is actually perfect as the re-sized image will be in your posts but the zoom will use the original size.The image code you upload will look as below and you simply add class="zoom" as highlighted :<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2S3GkEKDRR_C-DXJEDKJ-gOLgPiEV5rRja7iO8HjvySW-hoOHaZ_ybm9ULQnehwX5Zz_CVVFzYq1LMf0J_K4epdgo0P7tt0gIp-ersECOkfgEu1alDa9T9ndFyNbQWUUG3Xc1hVKX6zQ/s1600/large.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq2S3GkEKDRR_C-DXJEDKJ-gOLgPiEV5rRja7iO8HjvySW-hoOHaZ_ybm9ULQnehwX5Zz_CVVFzYq1LMf0J_K4epdgo0P7tt0gIp-ersECOkfgEu1alDa9T9ndFyNbQWUUG3Xc1hVKX6zQ/s320/large.jpg" width="320" /></a></div>
Anda baru saja membaca artikel yang berkategori
Blogger EN
dengan judul
Add Image Zoom effect with jQuery to blogger
. Anda bisa bookmark halaman ini dengan URL
https://sisatruk.blogspot.com/2013/01/add-image-zoom-effect-with-jquery-to.html
.
Artikel Terkait Blogger EN
Ditulis oleh:
Pramudya Ksatria Budiman
-
Rating : 4.5
Belum ada komentar untuk " Add Image Zoom effect with jQuery to blogger "
Post a Comment
Beri komentar anda.