Tích hợp hiệu ứng hộp đèn (Lightbox) cho hình ảnh trong Blogger (Blogspot)

Hôm nay mình rất vui vì đã tích hợp được hiệu ứng hộp đèn cho blog của mình, nhờ sự giúp đỡ của Nera Rosa mà mình đã làm được ^^
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. Hiệu ứng hộp đèn nó trông như ảnh này nhé


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 ~> 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='&quot;post-body-&quot; + 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

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

10 Nhận xét

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

  1. Ông Dx ơi 2 cái thẻ này:
    <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    .................
    </div>

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    ....................
    </div>
    Nhiều người sửa hoặc thiết kế thường hay ăn bớt

    Trả lờiXóa
    Trả lời
    1. Nó quan trọng đối với công cụ tìm kiếm lắm đấy.

      Xóa
    2. hihi, vậy mới nói lấy ví dụ là temp mặc định :v

      Xóa
    3. ukm, nó là công cụ đánh dấu mà, giúp bot google hiểu được bố cục blog

      Xóa
  2. đã thử và hok thành công T.T thay tất cả các thẻ vẫn k đc

    Trả lờiXóa
    Trả lời
    1. quăng cái link blog ra đây xem nào :v

      Xóa
    2. http://clbgayviet.blogspot.com/

      Xóa
    3. Do bạn xóa bỏ stylesheet và file javascript mặc định của Blogger nên nó không hiện hiệu ứng hộp đèn.
      Để hiện thì bạn phải giữ lại file javascript mặc định, còn css mặc định thì có thể xóa cũng được.
      Bạn sửa lại như ban đầu đi rồi vào đây xem cách xóa css mặc định

      Xóa
  3. Cảm ơn bạn chia sẻ. Đã làm được và thành công... các bạn xem thử nhé => http://pandaboxes.blogspot.com/2018/05/bai-bien-maldive.html

    Trả lờiXóa
  4. Tranh thủ mua xe khi được giảm giá
    các bạn nhé

    Trả lờiXóa
Mới hơn Cũ hơn

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !