Trang Chính1
Hiệu ứng lúc lắc cho liên kết Nhãn 18/01/12, 10:15 pm
 |  |  |
 | ![[KiNg]_[PiN]-BB](https://2img.net/u/3413/17/90/42/avatars/1-90.jpg) |  |
 |  |  |
[KiNg]_[PiN]-BB
Giới Tính : 
Join : 24/08/2011
Tuổi : 30
Địa Chỉ : Hà Nội
Bài chém : 372
Tiền : 2147657915
like : 3Hiệ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=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.
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=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.
