• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

13
06/01/2011

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.

{13 bình luậnAdd yours ?}

20:59:00, 6 thg 1, 2011

cậu ơi cái read more ở blog tớ bị cái gì đó , tự nhiên tớ tạo trang mới vào trang thì có nút read more ko hiểu sao nữa cậu vào xem nha, mục menu ở phần bản quyền đó

Reply
21:07:00, 6 thg 1, 2011

:2) Bình tĩnh đi nào, chả bị cái gì hết. Cậu đọc
bài này xong sẽ chữa được bệnh ngay.

Reply
23:49:00, 6 thg 1, 2011

đã test và dã thành công, nhưng có vẻ là hơi nặng ! hehe

Reply

các bạn sài có bị sung đột với thàng sibar menu ko trước mình cũng có nói là nếu bỏ đoạn css của tiện ích này đi thì menu bar mình sài dc còn có nó thì ko sai dc hjhj

Reply
20:18:00, 8 thg 9, 2011

hix bài viết này thật tuyệt vời em cảm ơn thuthuatblogger.info cảm ơn a Hà nhá

Reply
20:27:00, 8 thg 9, 2011

À nhưng anh Hà này cho em hỏi cái... nếu dùng cả 2 tiện ích của 2 bài đăng dưới đây có phải kị nhau không>? em thấy không xài đc sidebar, bấm vào thì k sổ ra .? http://www.thuthuatblogger.info/2010/11/sexy-slide-sidebar.html , http://www.thuthuatblogger.info/2011/01/jquery-link-nudging-for-label.html em còn dùng thêm cái nữa ... anh Xem giúp em coi chữa trị sao giờ. em không muốn bỏ cái nào cã .... http://a1k44.thptbatbat.com/ giúp em với

Reply
20:31:00, 8 thg 9, 2011

Cái thèn Scriptaculous nó k đội trời chung với jQuery nên bị xung đột mạnh. Cách chữa trị là jQuery hóa thèn Scriptaculous kia. Nhưng cái này phải có thời gian mới được.

Reply
20:37:00, 8 thg 9, 2011

ui thế thì chắc là em toi mất thui..........

Reply
21:09:00, 8 thg 9, 2011

ơ em bỏ mấy cái tiện ích kia rồi mà lúc lắc chỉ trong thời gian tải trang là sao anh... còn tải xong là im lìm coi giúp em với. http://a1k44.thptbatbat.com/

Reply
21:16:00, 8 thg 9, 2011

anh có thể cho em biết cụ thể nó đang kj với thủ thuật nào trong blogspot của em bây giờ để em giải quyết đc không ạ

Reply
21:19:00, 8 thg 9, 2011

Thì đó, do cái này http://www.thuthuatblogger.info/2010/11/sexy-slide-sidebar.html dùng Scriptaculous nên xung đột với cái này dùng http://www.thuthuatblogger.info/2011/01/jquery-link-nudging-for-label.html. Chỉ có cách jQuery hóa cái này http://www.thuthuatblogger.info/2010/11/sexy-slide-sidebar.html là OK mà. Nhưng cũng phải có thời gian mới được.

Reply
21:27:00, 8 thg 9, 2011

nhưng em đã bỏ cái tiện ích http://www.thuthuatblogger.info/2010/11/sexy-slide-sidebar.html oy``.

Reply
00:30:00, 22 thg 2, 2012

rất đẹp,xin cảm ơn

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn