Hiệu ứng Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup nhỏ để hiển thị kích thướ...
Hiệu ứng Lightbox cho ảnh chính là hiệu ứng mà khi các bạn nhấp vào một tấm ảnh nó sẽ hiển thị ra một cửa sổ popup nhỏ để hiển thị kích thước thật của ảnh đó từ việc sử dụng một plugin trong jQuery. Bài viết này mình sẽ hướng dẫn các bạn tích hợp hiệu ứng hộp đèn cho blog.
Bình thường, để thêm hiệu ứng hộp đèn cho blog, bạn chỉ cần làm như sau:
Đăng nhập Blogger ~> Vào Cài đặt ~> chọn Bài đăng và nhận xét ~> Tại cột Hiển thị hình ảnh với hiệu ứng Hộp đèn, chọn Có ~> Sau đó Lưu cài đặt.
Đó là bình thường làm như vậy thì sẽ tích hợp được hiệu ứng hộp đèn, tuy nhiên đối với những blog sau khi làm vậy vẫn không hiển thị hiệu ứng hộp đèn thì bạn làm thêm bước nữa:
Vào Mẫu ~> Chỉnh sửa HTML
Tìm đến thẻ <data:post.body/> (Đây là thẻ hiển thị nội dung bài viết)
Với những template mặc định thì <data:post.body/> thường được bao bởi thẻ div này:
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<data:post.body/>
</div>
Hiệu ứng hộp đèn mặc định của Blogger sẽ lấy theo classname cụ thể là post-body. Nguyên nhân blog của bạn không hiển thị được hiệu ứng hộp đèn là do template thiếu class='post-body'. Rõ rồi nhé, giờ bạn chỉ cần thêm class='post-body' bao quanh thẻ <data:post.body/> là xong:
<div class='post-body'>
<data:post.body/>
</div>
Làm xong thì Lưu mẫu lại và xem kết quả nhé.
Lưu ý: Hiệu ứng hộp đèn chỉ có thể hoạt động khi có js mặc định, vậy nên nếu bạn dùng thủ thuật xóa bỏ js mặc định của Blogger thì hiệu ứng hộp đèn sẽ không hoạt động.
COMMENTS