How to Create Magnifying Glass Effect In BlogSpot

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 Scroller 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.

Demo
Click here

How Does a Magnifying Glass Widget Work?

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

Steps to Create Magnify Glass Effect in BloSpot Images:

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

1. As ever, 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 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>

Note: If you are having trouble searching </style>, then feel free to add the given code just above the ]]></b:skin> to your theme.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIx-KCc1uwsmsP81fhHfmruhYzLUZl0N0myyhOidjF7XSO2ciwak68obFrJx6kVNNiFZtHAeZvkT1dSAaycgCx2yw6tE1LJlfWO2MY5_BTpZVjzSzq47XI0JrC_3TuRJTnnV1kfPg5ef01/s1600/magnify-glass.jpg"/>   </div>

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

Now your widget is ready to work for your Blogger images. Let me know if you have any question regarding the Magnifying glass widget.

Share this post