How To Add a Custom jQuery Lightbox To Blogger

This tutorial will show you how to replace it entirely with a rlly cool jQuery Lightbox plugin that is very popular among bloggers.
What this lightbox does is to display larger versions of the s that will pop up into a larger box when we click on them and lets us to sily navigate through a set of s using the previous and next buttons.


Adding jQuery Lightbox to BloggerStep 1. From your Blogger Dashboard, click on Template > Edit HTML


Step 2. Click anywhere on the ar and press the CTRL + F to open the srch box.
Paste the following tag inside the srch box and hit Enter to find it:
]]></b:skin>Step 3. Choose a style from below and just above the ]]></b:skin> tag, paste the CSS :

Lightbox with white background:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}
#jquery-lightbox a img{border:none;}
#lightbox-container--box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}
#lightbox-container-{padding:10px;}
img#lightbox- {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}
#lightbox-container--box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}
#lightbox-nav-btnPrev{left:10%;float:left;}
#lightbox-nav-btnNext{right:10%;float:right;}
#lightbox-container--data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;}
#lightbox-container--data{padding:0 10px;color:#555;}
#lightbox-container--data #lightbox--details{width:70%;float:left;text-align:left;}
#lightbox--details-caption{font-weight:bold;}
#lightbox--details-current{display:block;clr:left;padding-bottom:1.0em;}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}Lightbox with dark background:

#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}
#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none;}
#lightbox-container--box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-{padding:10px;}
img#lightbox- {max-height: 540px;max-width: 940px;}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}
#lightbox-container--box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:10%;float:left}
#lightbox-nav-btnNext{right:10%;float:right}
#lightbox-container--data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0}
#lightbox-container--data{padding:0 10px;color:#fff}
#lightbox-container--data #lightbox--details{width:70%;float:left;text-align:left}
#lightbox--details-caption{font-weight:bold}
#lightbox--details-current{display:block;clr:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}Step 4. Now find the </hd> tag and just above it, add the following scripts:

Lightbox with white background:
<script src='http://ajax.googlpis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.google.com/svn/trunk/custom-lightbox-for-blogger.js' type='text/javascript'/>Lightbox with dark background:
<script src='http://ajax.googlpis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script src='http://helplogger.google.com/svn/trunk/custom-lightbox-for-blogger-black.js' type='text/javascript'/>Step 5. Click on the Save template button.

Now we need to disable the original Blogger lightbox so that it doesn't interfere with this one that we just added. Go to Settings > Posts and comments and on the right side you will see the "Showcase s with Lightbox" section. Select "No" and click on the Save settings button on the upper right side.


Now view your blog and click on any to see the lightbox in action.