When it comes to BlogSpot design, we use jQuery and CSS3 to develop advanced widgets and plugins for the specific functionality that already exists in Blogger. BlogSpot has many excellent features. One of the impressive features is magnifying glass effect that offers zooming functions in tiny objects like images and texts to draw attention to a particular part of an image.

Check out: How to Add Automatic Page Scroll Widget to Blogger

You might have seen product images on E-commerce sites they use magnify plugins to see the product images in detail. The plug-in brings the actual size of the image on mouse hovering that lets a user enlarge the small photos without affecting the image quality.

How Does Magnify Glass Effect Works in Blogger?

A small piece of jquery and CSS3 makes your little images large and readable on hover. The plugin does not make your entire picture large at once, but it magnifies the parts of photos where we point the mouse. It contains a set of jQuery plugin that makes your images large.

Steps to Create Magnify Glass Effect in Blogger

Before you jump to the steps, it is highly recommended to backup your theme.

1. Login to your BlogSpot Dashboard
2. Go to the Theme > Edit HTML
3. Press Ctrl + F to activate the theme search bar
4. Type </body> in the search bar and press Enter key
5. Past the given jQuery just above the </body>

<script type='text/javascript'> // Magnifying Glass copyright www.knigulper.com: eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('$(C).B(l(){4 d=0;4 f=0;$(".3-5").q("D","E(\'"+$(".3-a").n("h")+"\') A-F");$(".3-G").z(l(e){j(!d&&!f){4 b=x y();b.h=$(".3-a").n("h");d=b.8;f=b.6}o{4 i=$(g).N();4 9=e.O-i.s;4 7=e.H-i.p;j(9<$(g).8()&&7<$(g).6()&&9>0&&7>0){$(".3-5").M(m)}o{$(".3-5").I(m)}j($(".3-5").J(":K")){4 w=v.u(9/$(".3-a").8()*d-$(".3-5").8()/2)*-1;4 r=v.u(7/$(".3-a").6()*f-$(".3-5").6()/2)*-1;4 k=w+"c "+r+"c";4 c=9-$(".3-5").8()/2;4 t=7-$(".3-5").6()/2;$(".3-5").q({s:c,p:t,L:k})}}})})',51,51,'|||knigulper|var|large|height|my|width|mx|small|image_object|px|native_width||native_height|this|src|magnify_offset|if|bgp|function|100|attr|else|top|css|ry|left|py|round|Math|rx|new|Image|mousemove|no|ready|document|background|url|repeat|magnify|pageY|fadeOut|is|visible|backgroundPosition|fadeIn|offset|pageX'.split('|'),0,{})) </script>

6. Now find the </style> and add the following CSS right below the </style>

<style type='text/css'> * {margin: 0; padding: 0;} .knigulper-magnify {width: 300px; margin: 50px auto; position: relative; cursor: none} .knigulper-large {  width: 195px; height: 195px;  position: absolute;  border-radius: 100%;  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),  0 0 7px 7px rgba(0, 0, 0, 0.25),  inset 0 0 40px 2px rgba(0, 0, 0, 0.25);  display: none; } .knigulper-small { display: block; } </style>

7. Finally, add the HTML code where you want to create the magnifying glass effect

<div class="knigulper-magnify"> <div class="knigulper-large"> </div> <img class="knigulper-small" src="https://4.bp.blogspot.com/-uuUN9NGNDbs/WdkLSItGJUI/AAAAAAAACxE/sajbq3v7I5sgxiPbOhVe6ylC1TQRC003gCLcBGAs/s1600/magnify-glass.jpg"/>   </div>

8. Replace the blue text with your image URL and click Save Theme

Now your plugin is ready to work for your Blogger images.