How to Add Light box effect to Blogger

Light box is a simple and unobtrusive script used to overlay images on the current page. The Light box effect is useful when your post has many images or images with large sizes, by adding this helps people to save time browsing images in an simple way. We’ll see how to add Light box effect to Blogger (BlogSpot) blogs.

We are going to use the jQuery Light box plugin for Blogger. And before going into detail, you might want to see Light box in action (click on the image above to enlarge).

How to Add Light box effect to Blogger

• Login to your Blogger Dashboard.
• Go to Template –> Edit HTML.
• And search for below piece of code using Ctrl + F.

</head>

• Copy the below code and paste it above </head> tag.

<link href="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.css" media="screen" rel="stylesheet" type="text/css" />

1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
2. <script src="http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js" type="text/javascript"></script>

• Save your Template.

How to use this effect

To use light box effect where you want just add the “url of the full size image” highlighted in Red color and “url of its thumbnail” which is highlighted in orange color.

<a href="url of the full-size image"><img src="url of the thumbnail" /></a>

That’s it you’ve done with this. Happy Blogging…