Bagaimana untuk cutomize Lightbox Image dalam Blogger

Anda boleh mengubah gaya Lightbox mengikut keperluan yang anda inginkan. Dalam artikel ini, kami akan menunjukkan kepada anda Bagaimana untuk menyesuaikan Lightbox Image dalam Blogger.

Sebelum kita mula bekerja dengan tutorial kami, kami telah berkumpul kedua-dua screenshot di bawah  bagaimana Lightbox anda akan muncul sebelum dan selepas menggunakan tutorial ono. Ia sudah tentu akan kelihatan lebih anggun .

Sebelum:

Selepas:

Perkara pertama yang perlu anda lakukan adalah untuk Log in ke Akaun Google anda dan pergi ke Blogger Template  >>  Edit HTML. Cari kode ]]></b:skin> dan pastekan kode yang diberikan diatas kode yang anda cari tadi.

/* MBL 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;
border-top:1px solid #d2d2d2!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;
}

Penting:
Anda juga boleh mengubah warna mengikut kehendak anda....
untuk kode warna boleh Klik Disini


Klik "Save Template" dan anda telah berjaya disesuaikan Lightbox imej anda dengan teknik CSS dengan mudah.