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>
<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>
<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.
{ 0 comments... read them below or add one }
Post a Comment