Hiệu ứng Link Nudging với Jquery cho blogger.
Một sự phẳng lặng, đôi lúc ta không ưa. Nhìn chữ nghĩa hay hình ảnh mà nó cứng ngắt, lắm lúc lại có sự chán chường, chán chết. Cuộc sống luôn cần có những hiệu ứng thay đổi, chính vì thế mà chuyện thiết kế giao diện luôn cần phải có màu sắc biến hóa, phù hợp sẽ đỡ buồn ngũ, dễ tỉnh táo hơn. Hiệu ứng Link Nudging với Jquery sẽ mang lại cho các bạn và cả độc giả một sự thích thú hấp dẫn hơn.
Cách 1: Cho liên kết được thiết lập.
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML)
4- Thêm đoạn code bên dưới vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
jQuery(document).ready(function($) {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
5- Lưu mẫu lại.
6- Để sử dụng bạn dùng đoạn code sau:
<a class='linknudge' href=http://ngdkhanh.blogspot.com/'>Kết bạn cùng Khanhnguyen' s blog</a>
Demo:
Đoạn mã trên dành cho các liên kết Tuỳ chỉnh, tạo hiệu ứng bằng cách thêm vào một lớp class của 'linknudge'
Cách 2: Cho tất cả các link và label trong blog.
Nếu muốn áp dụng cho nhãn (label) và tất cả các link trong blog thì bạn thêm đoạn code bên dưới vào trước thẻ </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Thời gian hiệu ứng thụt vào
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>
Trong ứng dụng trên, các bạn hãy xem hiệu ứng trên Tag của Khanhnguyen' s blog, bạn thử rê chuột vào các Tag đó xem sao. Đối với các Link có chứa đường dẫn, muốn có hiệu ứng nầy, bạn cần phải thực hành thêm bước 6 ở cách thứ 1
Chúc các bạn thành công trong cuộc sống.
Khanhnguyen' s blog
Nguyễn Đạt Khánh | Thứ Bảy, tháng 7 09, 2016 |
Code
|
label
|
Thủ thuật Blogger
Be the first to comment!
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
