Breaking News

Home / Công nghệ / Hiệu ứng Link Nudging với Jquery cho blogger.

Hiệu ứng Link Nudging với Jquery cho blogger.

July 09, 2016

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:
Kết bạn cùng Khanh nguyen' s blog

Đ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

Popular Posts