Laman

Pages

Laman

Jan 6, 2011

Hiệu ứng lúc lắc cho liên kết Nhãn

Hiệu ứng liên kết lúc lắc là một kiểu hiệu ứng khá độc đáo cho liên kết sử dụng thư viện jQuery do webdesigner David Wash tại Wisconsin (Mỹ) phát triển. Hiệu ứng này có tên là jQuery Link Nudging.

Xem Demo.

Để làm được như vậy, bạn hãy thực hiện như sau.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>.

<script type="text/javascript" src="http://davidwalsh.name/dw-content/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>

Bước 2. Bước tiếp theo là thêm class="nudge" vào bất kỳ một định dạng liên kết nào đó mà bạn muốn có hiệu ứng này, theo cấu trúc HTML như sau.

<a class="nudge" href="URL_liên kết">Text liên kết</a>

Bạn cũng có thể tạo hiệu ứng này với liên kết là hình ảnh, theo cấu trúc như sau.

<a class="nudge" href="URL_liên kết" ><img src="URL_hình ảnh" /></a>

Bạn thực hiện tương tự đối với Blogger. Ngoài ra bạn có thể cài đặt hiệu ứng này riêng cho các liên kết Nhãn nằm trên phần sidebar của Template.

Xem Demo.

Để làm được điều này, trước tiên bạn phải tạo một tiện ích Nhãn trên phần sidebar. Đặt code theo Bước 1 ở trên. Lưu Template. Chọn Expand Widget Templates. Tìm đoạn code đại khái như dưới đây trong Template và thêm vào phần được đánh dấu màu đỏ.

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span class="nudge" expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a class="nudge" expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>

</li>
</b:loop>
</ul>

</div>
</b:includable>
</b:widget>

Có thể nói hiệu ứng này được sử dụng nhiều trên thế giới nhưng đối với Blogger thì có lẽ tôi là người đầu tiên tại Việt Nam sử dụng thành công cho liên kết Nhãn.

Nếu bạn thấy thích hiệu ứng này thì còn chờ đợi gì nữa mà không cài đặt cho blogspot của mình đi nào.

No comments:

Post a Comment

Comment của bạn sẽ bị xóa nếu:
- Bạn chèn thẻ liên kết (a tag).
- Nội dung gây khó chịu cho các bạn đọc khác.
- Thắc mắc không liên quan bài viết, hãy post tại Hỏi đáp.
- P/s : Comment chê Admin xấu trai cũng sẽ bị xóa không thương tiếc :D