How to add lightbox jquery to add Effects on Images in Blogger

Hi friends, today I will tell you about jquery LightBox plugin that will give an amazing effect on your blogger’s images. This is very simple method which includes adding 3 things in your template 1^st is Lightbox jquery 2^nd is Some CSS rules and 3^rd is addling rel tag to your image so image can work with that jquery script.

How to add lightbox in Blogger Template

• Go to Blogger Dashboard 
• In SideMenu select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML
• Press Ctrl + F and search the code shown below

</HEAD>

• Replace it with

<script src='http://jquery-hosting-blogge.googlecode.com/files/lightbox.js' type='text/javascript'/></HEAD>

• Now time to add CSS rules
• Press Ctrl + F and search the code shown below

]]></b:skin>

• And replace it with

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(http://1.bp.blogspot.com/-B6R41EjOobU/TrZkBklKcrI/AAAAAAAAEk8/dBzVL1ojJSY/s1600/overlay.png); }

* html #overlay{
background-color: #333;
background-color: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40dZ1MCkjciRZqPSHKtjB6qVph84BSri1GQGGHdUbKHuMCRTT3YlDydABjdrjYmakMcRj6_CMUA-eH70Pf1eQgLhm4DZaMRMMeedFK0S_v9Tpt3_Z_eWqPGKPlixMAVq7oq0q21DDbPS7/s320/overlay.png", sizingMethod="scale");
}]]></b:skin>

Using the Lightbox in Your Post 

Wherever you want to make use of the Lightbox with your post’s image just add rel rel="lightbox" attribution to the image

For ex. <a href="image-url" rel="lightbox" title="lightbox"><img src="Address.of.image" width="150" Height="160"/></a>

Like it? Share it.