Cách chỉnh sửa hiển thị ảnh ở chế độ hộp đèn cho blogger

Làm thế nào để hiển thị ảnh ở chế độ hộp đèn cho blogger - chế độ hộp đèn Lightbox

Gần đây, chúng tôi đã chỉ cho bạn làm thế nào để vô hiệu hóa hình ảnh hộp đèn , nhưng chúng tôi đã không nói về một cách để tùy chỉnh hình ảnh Lightbox trong blogger. Kể từ khi,blogger là một nền tảng linh hoạt , chúng tôi có thể ghi đè lên hộp đèn kiểu hiện có để tùy chỉnh và làm cho nó trông giống như trang web của bạn. Điều này cung cấp cho bạn đủ tự do để thay đổi phong cách của Lightbox theo nhu cầu mong muốn của bạn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn Làm thế nào để tùy chỉnh hình ảnh Lightbox trong Blogger.

Trước khi chúng tôi bắt đầu làm việc với các hướng dẫn của chúng tôi, chúng tôi đã tập hợp hai ảnh chụp màn hình dưới đây chứng minh rằng cách Lightbox của bạn sẽ xuất hiện trước và sau khi áp dụng tuỳ biến. Nó chắc chắn sẽ trông thanh lịch và tinh tế hơn. Trước khi:

Trước khi :

Sau khi :

Điều đầu tiên bạn cần làm là đăng nhập vào Tài khoản Google của bạn và đi đến Blogger >> Template >> Edit HTM L. Bây giờ trong các mẫu mã hóa tìm kiếm cho ]]> </ b: skin> tag và chỉ ở trên đó dán miếng sau của kiểu mã hóa. (Lưu ý: Trong CSS sau đây, chúng tôi đã bổ sung thêm ý kiến để giúp bạn xác định rằng làm thế nào bạn có thể tùy chỉnh các khía cạnh khác nhau của Lightbox của bạn như màu chữ, màu nền, nút đóng và vv).

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

Xin chúc mừng: Lưu mẫu bằng cách nhấn các nút màu da cam "Save Template" nằm ngay phía trên màn hình của bạn. Bây giờ bạn đã tùy chỉnh hình ảnh của bạn thành công Lightbox với kỹ thuật CSS đơn giản. Chúng tôi hy vọng hướng dẫn này có thể giúp bạn trong việc học như thế nào để tùy chỉnh một hộp ánh sáng hình ảnh trong blogger. Đừng cho chúng tôi biết nếu bạn đã sử dụng kỹ thuật này? Tại MyBloggerLab, chúng tôi có hộp đèn vô hiệu hóa vì nó cản trở trong khi một người đang đọc hướng dẫn dài. Tuy nhiên, những người có hình nền hoặc các trang web danh mục đầu tư có thể sử dụng nó tự do. Nếu bạn thích bài viết này, sau đó chia sẻ nó với bạn bè của bạn trên Facebook, Twitter và Google+.