How to Fix Lightbox Effect for Blogger

Last week, I noticed a link to the updated Blogger interface at the top of the page. To tell the truth, I didnt like it at first.. and I couldn't work with it.. I changed it back to the old interface many times.. till I finally got used to it... I also used the new template designer to update My blogger design: colors, Background, Font..  etc.

Anyways, I then started to make a new post when I suddenly noticed... LIGHTBOX EFFECT IS NOT WORKING :O

yah it's normal as I have updated theblogger template , so I must re-followed the steps to add the LightBox effect from my previous post "How to add Lightbox effect to Blogger".. but it was still not working :(

here in this post I will show you How I fixed it using the same Script and CSS files in my previous post.

LightBox Effect

Instructions:

Step 1:
  Login to your Blogger with its new interface, and click on "Template" as it is shown below:

 Step 2:
    Click on "Edit HTML" button under you "Live on Blog" preview image:

Step 3:
   Click on "Proceed" button if prompted:

Step 4:
   In the "Edit HTML" box, search for "]]></b:skin>" and paste the following classes from the CSS File right before it:

/*start css lightbox*/      /* LightBox */      #jquery-overlay{position:absolute;           top:0;left:0;z-index:90;           width:100%;height:500px}      #jquery-lightbox           {position:absolute;top:0;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-image-box           {position:relative;background-color:#fff;            width:250px;height:250px;margin:0 auto}      #lightbox-container-image{padding:10px}      #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-image-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:0;float:left}      #lightbox-nav-btnNext{right:0;float:right}      #lightbox-container-image-data-box           {font:10px Verdana,Helvetica,sans-serif;            background-color:#fff;margin:0 auto;            line-height:1.4em;overflow:auto;            width:100%;padding:0 10px 0}      #lightbox-container-image-data           {padding:0 10px;color:#666}      #lightbox-container-image-data      #lightbox-image-details               {width:70%;float:left;text-align:left}      #lightbox-image-details-caption{font-weight:bold}      #lightbox-image-details-currentNumber               {display:block;clear:left;padding-bottom:1.0em}      #lightbox-secNav-btnClose{width:66px;float:right;            padding-bottom:0.7em}       /*end lightbox css*/

Step 5:

   Again, search in "Edit HTML" box but this time search for "</head>" and paste the following script tags right before it:

<!--Start lightbox --> <script src='http://lightbox-blogger.googlecode.com/files/jquery.min.js' type='text/javascript'/> <script src='http://lightbox-blogger.googlecode.com/files/lightbox.min.js' type='text/javascript'/> <!--End lightbox scripts -->