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

Hiệu ứng thụt đầu dòng cho link khi dê chuột vào link nào đó. Với plugin này blog của bạn sẽ hấp dẫn hơn khi khách truy cập blog của bạn di chuột lên một link bất kỳ trên blog. Sau đây namkna đưa ra hai loại. đó là cho các liên kết bạn muốn và cho các nhãn blogger cộng với tất cả liên kết trong blog.

Bấm vào liên kết bên dưới để xem Demo:

Namkna
Tip for blog
widget Jquery

Cách 1: Cho liên kết được thiết lập.

☼ Cách tiến hành:

1- Đăng nhập (login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Xem video:

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://namkna.blogspot.com/'>Namkna</a>

Đ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>