10/26/12

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

10/26/12

Ở 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



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/AVvXsEh3prDrgrWyHgFzsSV6oylrpumaiHGd9dy7MjBynPLlQgdQqfXL0Uj15v3a5sFQ9ImEZ-OiXcizKG_CP03PXsIroXDQwdOTcyMm8k13spEk933Ln446_WhAsVIM9QHzLujnuMKfGjSbPi9r/s1600/05.png" imageanchor="1" =><img border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3prDrgrWyHgFzsSV6oylrpumaiHGd9dy7MjBynPLlQgdQqfXL0Uj15v3a5sFQ9ImEZ-OiXcizKG_CP03PXsIroXDQwdOTcyMm8k13spEk933Ln446_WhAsVIM9QHzLujnuMKfGjSbPi9r/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!

Tin liên quan
XEM TRÊN MOBILE

1 comment:

  1. Tôi đã làm đúng theo hướng dẫn nhưng sao vẫn không được vậy, bạn ơi? Bạn tư vấn thêm cho tôi nhé!

    ReplyDelete

300x250