[blog]
Hướng dẫn cài đặt hiệu ứng Zoom ảnh cho blogspot bằng thư viện JavaScript thay cho hiệu ứng hộp đèn mặc định của blogger.

Nếu các bạn không thích hiệu ứng hộp đèn mặc định của blog thì bạn có thể sử dụng thư viện JavaScript  bên dưới.

Demo: Các bạn rê chuột vô hình ảnh trên bài viết này

Thư viện cần dùng để tích hợp là: medium-zoom 1.0.5 phiên bản mới nhất

Các bước cài đặt:

- Đầu tiên các bạn tắt chức năng Hiển thị hình ảnh với hiệu ứng Hộp đèn của blog ở mục Bài đăng, nhận xét và chia sẻ


Bước tiếp theo các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> là lưu lại là xong, sau đó các bạn vô bài viết của blog để kiểm tra

Link code: https://drive.google.com/file/d/1MowgeVr8GnGRhM2PcTFuRn3sIbSJGqhs/view?usp=sharing

Hoặc link trực tiếp

<b:if cond="data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}">
<script src='https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {$('.post-body a[imageanchor]').click(function(e) {e.preventDefault()})})
mediumZoom('.post-body a[imageanchor] > img');
    //]]>
</script>
</b:if>

Với code này thì khi chèn thêm async='async' thì link js nó không hoạt động, nên mình dùng code thứ 1.

Nguồn tham khảo: junookyo

[/blog]