Thông thường khi xem một trang web/blog chúng ta thường lăn chuột để xem những nội dung trên đó. Sau khi lăn chuột xem nội dung đến cuối trang chúng ta lại phai lăn chuột hoặc kéo thanh bên để trở về đầu trang. Điều đó có thể khắc phục bằng cách tạo nút trở về đầu trang ngay trên blog. Với nút lên đầu trang thì người dùng chỉ việc click vào nút này thì người dùng trở về lên đầu trang một cách nhanh chóng. Hơn nữa với thủ thuật này thì trang blog của bạn sẽ được cuộn với hiệu ứng Jequery trông rất đẹp mắt.1. Đầu tiên bạn phải đăng nhập tài khoản blogger
2. Vào thiết kế (Design) và chọn chỉnh sửa HTML
3. Thêm code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}}});});
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}}});});
//]]>
</script>
4. Bạn tìm đến thẻ <body> và thay nó thành code bên dưới
<body id='top'>
5. Bây giờ bạn hãy thêm code bên dưới vào trước thẻ </body>
<div id='goingtop'>
<a href='#top' title='Go Top'><img border="0" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERpKABrieH3p8FXnOtoY32cVb1BEr3_XEs0yOUl8Ma98oForfhuDtOJw_fNjgP5arza21FIn7yGDfhjNrSoNhU_Gpmum2aG0Non1atOHf_EIrrifhrDUX2NdqgRmUXJWsji7A1WS5qYsF/' style='right:20px; bottom:20px; position: fixed;'/></a></div>
<a href='#top' title='Go Top'><img border="0" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERpKABrieH3p8FXnOtoY32cVb1BEr3_XEs0yOUl8Ma98oForfhuDtOJw_fNjgP5arza21FIn7yGDfhjNrSoNhU_Gpmum2aG0Non1atOHf_EIrrifhrDUX2NdqgRmUXJWsji7A1WS5qYsF/' style='right:20px; bottom:20px; position: fixed;'/></a></div>
Bạn có thể thay link ảnh trên thành link ảnh của mình (dòng màu xanh)
6. Cuối cùng save template lại là xong
» Cập nhật (08/08/2011) thêm nút xuống cuối trang hiệu ứng Jequery scroll
Ở trên mình chỉ hướng dẫn bạn thực hiện chỉ với 1 nút cuộn lên đầu trang thôi, còn nếu muốn cuộn xuống cuối trang thì làm thế nào? Đó chính là lý do mình Update thêm bài viết này. Nếu bạn muốn tạo 2 nút cuộn lên đầu trang và xuống cuối trang với hiệu ứng cuộn bằng Jquery như trên thì thực hiện vài bước đơn giản như bên dưới.
Sau khi vào phần thiết kế (Design) bạn chọn thêm tiện ích, thêm 1 HTML/Javascript và thêm vào code bên dưới.
<style>
.button_top{cursor: pointer;
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERpKABrieH3p8FXnOtoY32cVb1BEr3_XEs0yOUl8Ma98oForfhuDtOJw_fNjgP5arza21FIn7yGDfhjNrSoNhU_Gpmum2aG0Non1atOHf_EIrrifhrDUX2NdqgRmUXJWsji7A1WS5qYsF/) no-repeat top left;
bottom:63px;
opacity:0.7;
right:10px;
width:48px;
height:48px;
}
.button_down{cursor: pointer;
position:fixed;
background:transparent url(https://lh3.googleusercontent.com/-5xs7ZseTRBk/Tj85HR76xuI/AAAAAAAAAfY/Q5FzNFrWAhM/bottom.png) no-repeat top left;
width:48px;
height:48px;
bottom:15px;
opacity:0.7;
right:10px;
}</style>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');
$('#button_top').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_top,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_top,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#button_top').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
<div style="display:none;" class="button_top" id="button_top"></div>
<div style="display:none;" class="button_down" id="button_down"></div>
.button_top{cursor: pointer;
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhERpKABrieH3p8FXnOtoY32cVb1BEr3_XEs0yOUl8Ma98oForfhuDtOJw_fNjgP5arza21FIn7yGDfhjNrSoNhU_Gpmum2aG0Non1atOHf_EIrrifhrDUX2NdqgRmUXJWsji7A1WS5qYsF/) no-repeat top left;
bottom:63px;
opacity:0.7;
right:10px;
width:48px;
height:48px;
}
.button_down{cursor: pointer;
position:fixed;
background:transparent url(https://lh3.googleusercontent.com/-5xs7ZseTRBk/Tj85HR76xuI/AAAAAAAAAfY/Q5FzNFrWAhM/bottom.png) no-repeat top left;
width:48px;
height:48px;
bottom:15px;
opacity:0.7;
right:10px;
}</style>
<script src="http://traidatmui-tips.googlecode.com/files/Jquery1.3.2.js" type="text/javascript"></script>
<script>
$(function() {
var $elem = $('#content');
$('#button_top').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_top,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_top,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#button_top').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
<div style="display:none;" class="button_top" id="button_top"></div>
<div style="display:none;" class="button_down" id="button_down"></div>
Xong save tiện ích lại, bạn vào chỉnh sửa HTML thêm id='scroll' vào thẻ <body> như bên dưới.
<body id='scroll'>
Bài đăng
0 nhận xét