Hiệu ứng Easy Zoom cho ảnh trên Blogspot bằng JQuery

Một hiệu ứng dành cho hình ảnh trên blog cũng khá thú vị đó là hiệu ứng có tên là Easy Image Zoom. Và làm sao để có thể ứng dụng hiệu ứng này cho hình ảnh trên Blogspot? Vâng mình sẽ giúp bạn tạo hiệu ứng này cho ảnh trên Blogspot.

Ảnh minh họa

Hoặc xem tại đây (rê chuột vào ảnh để xem kết quả của thủ thuật)

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần thiết kế (Design)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Chèn code bên dưới vào sau thẻ <head>

<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/jquery.min.v1.4.1.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/easyzoom.js"></script>
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});
</script>

5. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

#easy_zoom{
width:320px; /* độ rộng của khung chứa ảnh lớn*/
height:180px; /* chiều cao của khung chứa ảnh lớn*/
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:320px; /* khoảng cách của khung so với phía trên*/
left:265px; /* khoảng cách của khung so với phía bên trái*/
overflow:hidden;
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
box-shadow:0 0 10px #777;
}

6. Save template lại

Bây giờ để sử dụng hiệu ứng này cho ảnh nào đó trên blog thì bạn sử dụng code bên dưới, có thể ngay trong bài viết hay trong các Widget trên Blogspot.

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguidR0fDHt-Hfuj8rHrHV1mng6htrSswLmVqGqEF2yHZMKQf3wwefBazLzDa33bJt-hVHGRab1a7rhPp8QtzZrgXr2B9Udju26nncNKBDBCLljCoH7U2N9ywSQbb3qSrk7awOf4LD-mZoW/s320/1.jpg" class="zoom"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguidR0fDHt-Hfuj8rHrHV1mng6htrSswLmVqGqEF2yHZMKQf3wwefBazLzDa33bJt-hVHGRab1a7rhPp8QtzZrgXr2B9Udju26nncNKBDBCLljCoH7U2N9ywSQbb3qSrk7awOf4LD-mZoW/s320/1.jpg" width="150px" height="120px"/></a>

Bạn thay link ảnh ở trên thành link ảnh của bạn, bạn có thể tùy chỉnh lại độ rông (width="150px") và chiều cao (height="120px") của ảnh thumbnail lại theo ý bạn.

Chúc bạn thành công!!!

0 nhận xét:

Đăng nhận xét

» CĐQTKD5A cảm ơn bạn đã giành chút time để đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người thân, bạn bè biết.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu.
» Những lời comment thiện ý của bạn sẽ giúp trang CDQTKD5A ngày một phát triển!