Cách Thêm Hiệu Ứng Popup Lightbox Cho Blog Đơn Giản

Cách Thêm Hiệu Ứng Popup Lightbox Cho Blog Đơn Giản

Chào các bạn đã đến với bài viết tiếp theo của mình về các tiện ích cho Blog. Hôm này, mình sẽ hướng dẫn các bạn Cách Thêm Hiệu Ứng Popup Lightbox Cho Blog Đơn Giản

Hiệu Ứng Popup Lightbox Cho Blog

Sự xuất hiện các lightbox tốt nhất là một tiêu điểm ấn tượng ban đầu hút mắt của website. Lightbox là một lớp phủ hay cửa sổ popup xuất hiện trên các trang web nó hiển thị một hình ảnh. Tính năng làm nổi bật hình ảnh và làm tối phần còn lại của trang, nhưng vẫn cho phép nhìn thấy nội dung xung quanh các cạnh. Lightbox là một cách tuyệt vời để hiển thị hình ảnh và các sản phẩm đặc trưng. Nó thường được sử dụng cho hình ảnh, form opt-in, video, slideshow,… Với lightbox trang web của bạn sẽ trở nên đẹp hơn và chuyên nghiệp hơn.

Các bước thực hiện

Với tình hình hiện nay, là số người sử dụng Template Median UI khá nhiều, nhưng có một bất cập đó là khi click vào hình ảnh trong bài viết thì Template này sẽ điều hướng thẳng tới Link nguồn ảnh. Vì vậy mình sẽ hướng dẫn các bạn cách thêm hiệu ứng Popup Light Box cho Template Median

Đối với Template Median UI

• Bước 1: Các bạn đăng nhập vào Blogger.com
• Bước 2: Các bạn chọn chỉnh sửa HTML và dán đoạn code dưới đây trước thẻ </body>

  <!-- Lightbox with Fancybox3 -->
<b:if cond='data:view.isSingleItem'>
  <link href='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  <script src='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js'/>
  <script>//<![CDATA[
    $('.postEntry img').each(function() {
      var img_link = $(this).attr('src')
      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
    })
    $('.tr-caption-container').each(function() {
      var caption = $(this).find('.tr-caption').text()
      $(this).find('a').attr('data-caption',caption)
    })
  //]]></script>
</b:if>
<!-- Lightbox with Fancybox3 -->

• Bước 3: Các bạn nhấn Lưu và tận hưởng thành quả nào!

Đối với các bạn sử dụng Tempalte Median, nếu như không được thì cần cài đặt lại chế độ Hộp đèn hình ảnh như hình bên dưới

Đối với các bạn sử dụng Template khác có thể sử dụng đoạn Code dưới đây

  <!-- Lightbox with Fancybox3 -->
<b:if cond='data:view.isSingleItem'>
  <link href='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css' rel='stylesheet'/>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
  <script src='https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js'/>
  <script>//<![CDATA[
    $('.post-body img').each(function() {
      var img_link = $(this).attr('src')
      $(this).wrap('<a href='+ img_link +' data-fancybox="gallery"></a>')
    })
    $('.tr-caption-container').each(function() {
      var caption = $(this).find('.tr-caption').text()
      $(this).find('a').attr('data-caption',caption)
    })
  //]]></script>
</b:if>
<!-- Lightbox with Fancybox3 -->

Như vậy qua bài viết này, mình đã hướng dẫn các bạn Cách Thêm Hiệu Ứng Popup Lightbox Cho Blog Đơn Giản. Nếu như có bất kì thắc mắc nào vui lòng comment bên dưới để được giải đáp nhé. Chúc các bạn thành công!!!