How To Add Image Magnifier In Blogger Using Jquery Effect

Add This To Del.icio.us Tweet/ReTweet This Share on Facebook StumbleUpon This Add to Technorati Digg This

Magnifier Image effect is an awesome image effect that enlarge images or screenshot on both blogger or wordpress when mouse hover. Image effect makes images more special and beautiful. This is one of the most nice image effect and also worth for using on your blog. But how to add image magnifier effect in blogger ? Don't worry just follow the instruction step by step

View A Demo

• Go to Blogger Dashboard → Design → Edit HTML
• Backup your Template before making any changes to your blog
• Now Expand Widget Templates
• Find the code shown below using [ctrl+F]

Now find the following code

</head>

Now copy and paste the following code just before or above the just mentioned above

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript" src="https://rafiblog.googlecode.com/svn/magnify.js"> </script>

Now save the template

Now for showing effect on images just follow the below instraction just like this

<img class="magnify" style="width: 210px; height: 250px;" src="YOUR IMAGE URL" />

Enjoyed the article ? Please share if you like

Tweet

Magnifier Image effect is an awesome image effect that enlarge images or screenshot on both blogger or wordpress when mouse hover. Image effect makes images more special and beautiful. This is one of the most nice image effect and also worth for using on your blog. But how to add image magnifier effect in blogger ? Don't worry just follow the instruction step by step View A Demo Go to Blogger Dashboard → Design → Edit HTML Backup your Template before making any changes to your blog Now Expand Widget Templates Find the code shown below using [ctrl+F] Now find the following code </head> Now copy and paste the following code just before or above the just mentioned above <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  <script type="text/javascript" src="https://rafiblog.googlecode.com/svn/magnify.js"> </script> Now save the template Now for showing effect on images just follow the below instraction just like this <img class="magnify" style="width: 210px; height: 250px;" src="YOUR IMAGE URL" /> Enjoyed the article ? Please share if you like