How to Customize Blogger Lightbox

How to Customize Blogger Lightbox

Today we provide you tutorial about Customize Blogger Lightbox for images. When you click on image in your site its show in browser so we p... 12:37:00 PM

Today we provide you tutorial about Customize Blogger Lightbox for images. When you click on image in your site its show in browser so we provide you lightbox settings to show images in lightbox. When you click your image a lightbox popup window will open and show current image in popup window without leave your post. You can also customize your lightbox like shadow of images and color of background.

How to Change Blogger Lightbox

You can customize your blogger lightbox with follow some simple steps:

Step 1

Go to Template > Edit HTML Button as shown in below picture.

Step 2

Find below code with help of CTRL + F

]]></b:skin>

Step 3

Copy and paste below code just before it:

 /* Blogger Lightbox
----------------------------------------------- */
/* 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;
}

Tips: Change image-url-address in red color with your image URL. You can also change opacity 0.8 means transparent of your background. Replace #555555 to change color of images.

Step 4

Click on save template.