Tiện ích zoom ảnh trong bài viết cực kỳ thú vị cho blogger

Ở bài trước, mình đã giới thiệu tính năng phóng to hình ảnh khi rê chuột đến cho Blogger. Ở bài viết này mình cũng sẽ hướng dẫn bạn làm một tính năng tương tự nhưng lần này nó sẽ phóng to ngay trong hình ảnh khi chúng ta rê chuột vào nó mà chúng ta hay gọi đó là zoom.Hình ảnh blog của bạn sẽ hiển thị kích thước 200x200 pixel zoom khi chúng ta rê chuột vào nó. Hãy vào bản demo để hiểu rõ hơn về tác dụng của tính năng này sau đó làm theo các bước bên dưới để thêm vào blog của bạn

Demo

Chèn code vào HTML

1. Vào blogger > Mẫu > Chỉnh sửa HTML
2. Dán đoạn code bên dưới vào trước thẻ </head> sau đó Lưu template lại

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/><script src='http://trollfile.googlecode.com/files/cloud-zoom.1.0.2.js' type='text/javascript'/>

• Nếu trong tempalte của bạn đã có jQuery rồi thì xóa đoạn code đỏ bên trên đi 

Thêm ảnh với hiệu ứng zoom vào bài viết

Để thêm ảnh với hiệu ứng zoom bạn sử dụng code sau

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dO_KAdkvwVOsIq1NulhTeteoZA81IGUQ5OhKBUNgX2QKusr1lTPF2-38s_hdzVCww-gMirHsjfn4NiP_Ct6KvUEkkd49-en0qDH__v0R_IxpJhr-zxOhaBF5YugD50t3SX9bXqlU2xBk/s1600/05.png" imageanchor="1" =><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dO_KAdkvwVOsIq1NulhTeteoZA81IGUQ5OhKBUNgX2QKusr1lTPF2-38s_hdzVCww-gMirHsjfn4NiP_Ct6KvUEkkd49-en0qDH__v0R_IxpJhr-zxOhaBF5YugD50t3SX9bXqlU2xBk/s1600/05.png" width="300" /></a></div>

• Trong đó đoạn được bôi màu xanh là link hình ảnh và được bôi màu vàng là chiều cao và chiều rộng hình ảnh hiển thị ở bài viết

Rất đơn giản phải không nào? Đừng quên comments đóng góp ý kiến cho bài viết nhé bạn!