Hiện nay, đối với những người đang sử dụng hiệu ứng Lightbox của Blogger để xem các hình ảnh dưới dạng trình chiếu silder, bạn có thể tùy biến để thay đổi phong cách của mình một cách hoàn toàn khác với cách truyền thống của blogger và khác với mọi người. Bạn có thể thay đổi màu đen mặc định của màn hình, đường viền hoặc đổ bóng của hình ảnh và màu sắc của nền của hình thu nhỏ theo ý muốn của bạn.

Các bạn có thể xem các hình ảnh bên dưới trước va sau khi có sự thay đổi. (Ngoài ra bạn cũng có thể xem demo ngay tại bài viết này so với các bài viết khác bằng cách bấm vào hình và chú ý tới giao diện đã được thay đổi)
Trước khi thay đổi
Sau khi thay đổi
Sau khi thêm mã CSS giao diện của Lightbox đã thay đổi hoàn toàn từ màu nền, thanh hiển thị hình thu nhỏ, các cạnh của hình ảnh (đường viền), các văn bản xuất hiện trong nó và nút đóng.
Bấm vào hình để phóng to nếu bạn không nhìn rõ các hướng dẫn ở trên hình
Tất cả những gì chúng ta phải làm là ghi đè lên các thuộc tính có sẵn trong Lightbox của blogger như helplogger. đã từng hướng dẫn.

» Cách thay đổi giao diện hiệu ứng Lightbox của blogger

1. Đăng nhập vào blog.
2. Vào mẫu (Template) => Chọn chỉnh sửa HTML (Edit HTML).
3. Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>
/* 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: #333333 !important;
}
» Tùy chỉnh code:
  • image-url-address là link ảnh nền bên dưới hiệu ứng Lightbox, Hãy thay nó bằng link ảnh của bạn hoặc để trống nếu bạn thích.
  • image-url-address Là link ảnh icon đóng hiệu ứng link box, hãy thay nó bằng link ảnh của bạn.
  • #333333 là màu của văn bản trên phần ảnh thu nhỏ.
  • opacity: 0.8 là độ trong xuốt của phần nền nếu bạn muốn độ trong xuốt tăng lên hãy giảm chỉ số đó trong khoảng 0.1 đến 1.0
4. Lưu lại và kiểm tra kết quả nha.