Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]


Cấp bậc !
•Bang Chủ•
avatar
•Bang Chủ•

[KiNg]_[PiN]-BB

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=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 lý lịch thành viên http://a1k44.thptbatbat.com
Loading

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết

 
  • Free forum | © PunBB | Free forum support | Liên hệ | Report an abuse | Have a free blog with Sosblogs
© 2012 A1K44BB
FM PunBB - Edit by HOàng Hải