How to Customize Blogger Image Lightbox!

If you are blogging on Blogger platform then you can show your blog's images in light-box. There is an option in Blogger settings to showcase it's images in light-box. As a result of the image light-box, when you click any image on your blog that images will open in an overlay on top of your blog. If your post has multiple images, they will appear as thumbnails along the bottom.But sometimes you may have wanted to change the default design of blogger image light-box. If so, then you are in the wright post. In this post I am gonna show how to customize blogger image light box.

Above image is the example of the default Blogger Image Light-box. If you don't like this design then you can customize it on your own taste. The CSS code that I am sharing, by adding it to your blog you will be able to change the entire look of the modal window: Background Color, Border of the Image, The Bar showing the thumbnail, Text within it, Close button and the transparency. All you have to do is to overwrite the default design and change it with yours. Lets see how to do the trick.

Warning: Before doing any kind of customization on your site's HTML page, I will recommend you to backup your site Template. To know more about Template backup Read This Post.

Customizing  Blogger Image Lightbox:

• First Sign into your Blogger Account and go to Dashboard.
• Then click on Template and then click on Edit HTML button. You will land on the HTML page.
• Here in the HTML page find </head> tag and Paste the following code just Above it.

  <style>  
 /* Background Color */  
 .CSS_LIGHTBOX_BG_MASK {  
 background-color: #ffffff !important;  
 background-image: url(image-url-address) !important;  
 opacity: 0.8 !important;  
 filter: alpha(opacity=90) !important;  
 }  
 /* Images Border */  
 .CSS_LIGHTBOX_SCALED_IMAGE_IMG {  
 outline: 0px solid #fff !important;  
 -webkit-border-radius: 10px;  
 -moz-border-radius: 10px;  
 border-radius: 10px;  
 -webkit-box-shadow: 0px 0px 5px #000000;  
 -moz-box-shadow: 0px 0px 5px #000000;  
 box-shadow: 0px 0px 5px #000000;  
 }  
 /* Close Button */  
 .CSS_LIGHTBOX_BTN_CLOSE {  
 background: url(image-url-address) no-repeat !important;  
 width: 24px !important;  
 height: 24px !important;  
 }  
 /* Thumbnails Bar Color */  
 .CSS_LIGHTBOX_FILMSTRIP {  
 background-color: #eaeaea !important;  
 }  
 /* Text Color */  
 .CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {  
 color: #000 !important;  
 }  
 /* Index Info (number of images) */  
 .CSS_LIGHTBOX_INDEX_INFO {  
 color: #555555 !important;  
 }  
 </style>  

Customization: The blue Text explains to which Part the code belongs to. And you can modify the area of the lightbox from that part.

• * Background Color * - You can change the Background color of the Lightbox and also can replace the background color with an image from here. To replace the background color with an image just Replace this line image-url-address with your Image URL. Below that if you decrease the opacity: 0.8 value the background will become more transparent.
• * Close Button * - To change the icon for Close Button just Replace this line image-url-address with your icon Image URL.
• * Index Info (number of images) * - To change the text color of image, just change the #555555 value.

• Finally click on Save Template button to apply the design.

That's after customizing the image light-box, now view your blog and click on any image and see the result.

Stay with www.iTTimesbd.com for more IT related post