TIỆN ÍCH ZOOM ẢNH TRONG BÀI VIẾT KIỂU 2

Ở bài trước mình đã hướng dẫn zoom ảnh trong bài viết theo phong cách phóng to ảnh khi rê con chuột đến và bài này cũng vậy, chỉ khác là phóng to ảnh ở cửa sổ popup

Demo

Chèn code vào HTML

• Vào blogger > Mẫu > Chỉnh sửa HTML
• Dán code bên dưới vào trước thẻ ]]></b:skin>

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

• Tìm thẻ đóng </head> và dán trước nó đoạn code sau và Lưu lại

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://trollfile.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
$(&#39;a.zoom&#39;).each(function(i) {
$(this).easyZoom();
});
});
</script>

Nếu template của bạn đã có jQuery rồi thì xóa đoạn code được bôi màu xanh bên trên đi


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

• Bạn sử dụng code sau để thêm ảnh có hiệu ứng zoon này vào bài viết

<div class="separator" style="clear: both; text-align: center;">
<a class="zoom" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1dO_KAdkvwVOsIq1NulhTeteoZA81IGUQ5OhKBUNgX2QKusr1lTPF2-38s_hdzVCww-gMirHsjfn4NiP_Ct6KvUEkkd49-en0qDH__v0R_IxpJhr-zxOhaBF5YugD50t3SX9bXqlU2xBk/s1600/05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><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 code được bôi màu vàng là link của hình ảnh và màu xanh là chiều rộng và chiều cao của ảnh hiện thị trên bài viết
Bạn cảm thấy hiệu ứng này thế nào? Hãy comments cùng thảo luận nhé!