Customize Blogger Lightbox For Image

Do you activate lightbox feature on your blogger blog? If you do, here i tell you a secret to customise it the way you want. You can change the background, button, or realy just shape it any style you want like make it rounded cornered, give border, etc.

And, however, the good news is that the code used for its lightbox doesn't make use of javascript code, but it's completely made of CSS code. Sure you're glad to know that, you can easily understand that language, can't you?

How To Customize Blogger Lightbox?

It's easy, realy. All what you have to do in order to be able to customize the lightbox is just to replace the default code in your template with the code that i'm going to tell you, and the code is not realy too long here, it's just some lines of CSS code. Let's get down to it..

1. Go to Edit HTML tab on your blogger
2. Find the following tag in your template: ]]></b:skin>
3. Copypass the following code right above it:

/* BLOGGER LIGHTBOX */

/* Background Color */
.css_lightbox_bg_mask {background-color: #ffffff !important; background-image: url(http://www.example.com/image/background-lightbox.png) !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(http://www.example.com/image/close-button.png) no-repeat !important; width: 24px !important; height: 24px !important;}

/* Thumbnails Bar Color */
.css_lightbox_filmstrip {background-color: #eeeeee !important;}

/* Text Color */
.css_lightbox_attribution_info, .css_lightbox_attribution_link {color: #000 !important;}

/* Index Info (number of images) */
.css_lightbox_index_info {color: #666666 !important;}

4. Save your changes and you're done.

Customize The Lightbox The Way You Want

- / * Background Color * /, this is where you can change the background color and LightBox background color, you can use an image for that. And the "opacity: (0.8) important!" is for background transparancy, the lower value it is the more transparent the background will be.
- /* Close Button */, is where you can change the "close button".
- /* Index Info (number of images) */, is where you can change the text color of images (#666666).

You can style the border roundedness, shadow, or whatever the content is, use your imagination for that.