
Zoom Effect To An Image Demo
How To Add Zoom/Spectacular jQuery Inner Zoom Effect to an image to blogger
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
</head>
- Now Paste the Code shown below just before/above it
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
<script src='http://js.howtouses.com/blogger/imagezoomeffect.js' type='text/javascript'/>
<script src='http://js.howtouses.com/blogger/imagezoomeffect.js' type='text/javascript'/>
Now How To Add Zoom Effect
- To Add This Effect You Have To Add This Code To The Image
class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"
In a regular image it would look like this
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxLd5zRuwIH15MHxwE5HJCIl0PsH17IvT5tdgweBjvurOjsSHz3xvcA1xbXPgWm2QJDl_s3A07cGpe4FbR4CSv9VNxNOgyfyPLxAsub4HtD5Kx0q8dNRTl509cQrjO-AdB0Cc7BY3hPw/s1600/large.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfxLd5zRuwIH15MHxwE5HJCIl0PsH17IvT5tdgweBjvurOjsSHz3xvcA1xbXPgWm2QJDl_s3A07cGpe4FbR4CSv9VNxNOgyfyPLxAsub4HtD5Kx0q8dNRTl509cQrjO-AdB0Cc7BY3hPw/s1600/large.jpg"/></a>
And for blogger image it would look like this
<div class="separator" style="clear: both; text-align: center;"><a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s1600/best-nature-full-hd-wallpapers-17.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOcZT3Ctc_2fyBpAgZJG60oRBUsePspMWeH5zE-CkS6pGGd3l4jlZ1FJ0kEU4gRUq72yHb2U4XtHbGxEJes7Z9TwwZ60gLet5xisf9mA11xdGXEptdubFbX7AMkbQBCs1CTSqEbpaFdI/s1600/best-nature-full-hd-wallpapers-17.jpg"/></a></div>
No Comments
Click to Add a New Comment