Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Sunday, November 03, 2013

Tùy chỉnh giao diện hiệu ứng Lightbox của blogger

thay đổi màu đen mặc định của màn hình Lightbox, đườ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.

Chia sẻ:
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.

14 nhận xét:

  1. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Trong phần đầu có đó có thể bạn không để ý bạn ak.

      Delete
  2. Cho em hỏi một chút ngoài lề nhé anh, tại sao khi em thêm mô tả vào tùy chỉnh tìm kiếm thì bị lỗi nhãn, nó lung tung cả lên.

    Còn xóa đi thì không việc gì, em đang tức chết vì cái này à

    ReplyDelete
    Replies
    1. Em hãy áp dụng một bài có mô tả và đưa link bài viết đó để anh kiểm tra cho nha em :)

      Delete
  3. This comment has been removed by the author.

    ReplyDelete
  4. namkna ơi - anh có biết trang :http://www.itviet360.com/
    có cái logo làm như thế nào không,làm sao để cái nên vẫn nguyên màu ban đầu

    ReplyDelete
    Replies
    1. Dùng phàn mềm photoshop em ak. Nếu chưa có phần mềm đó trên máy em có thể dùng online TẠI ĐÂY

      Lưu ý file ảnh phải lưu dưới dạng .png và thiết kết trên nền trong xuốt nha./

      Delete
  5. anh cho em hỏi tí :
    Hiệu ứng lightbox của em nó vì sao không hoạt động - mặc dù em đã chuyển từ No qua Yes trong cài đặt bài viết rồi - nên chèn code gì vào trong tem mới được anh - nhờ anh qua check hộ em tí :
    site : http://xinh3d.blogspot.com/
    Thanks ạ

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Cảm ơn bạn
    http://www.angkorwatkhmerguide.com/2015/07/angkor-wat-heritage-of-humanity-and_5.html

    ReplyDelete
  8. Cảm ơn bạn
    http://www.angkorwatkhmerguide.com/2015/07/angkor-wat-heritage-of-humanity-and_5.html

    ReplyDelete
  9. great post , the way of explaining points is amazing , and i found your blog also very cool. keep it up

    7 Amazing Recent Posts Widgets for Blogger visit: www.mytrickspedia.blogspot.com

    ReplyDelete
  10. great post , the way of explaining points is amazing , and i found your blog also very cool. keep it up

    7 Amazing Recent Posts Widgets for Blogger visit: www.mytrickspedia.blogspot.com

    ReplyDelete