Tạo nút Back to Top cho blogspot

Để tạo điều kiện thuận lợi cho khách tham quan khi đọc xong bài có thể quay về đầu trang nhanh chóng, bạn phải tạo cho Blog một nút bấm phía dưới cuối trang, khi bấm vào nút này lập tức sẽ đưa khách "về đầu trang". Hay toàn diện hơn nếu bạn tích hợp đầy đủ các chức năng "Lên - Xuống - Cuộn -Back-Stop"

• Ở bài này mình sẽ giới thiệu cho các bạn 3 cách để tạo nút back to top cho blogspot thêm chuyên nghiệp :

Cách 1: Các bạn có thể dán toàn bộ đoạn code bên dưới vào trước thẻ </body>    trong trình chỉnh sửa HTML.(Hoặc thêm tiện ích HTML rồi dán vô cũng được)

<!-- BAT DAU LEN XUONG --> <style type='text/css'> #backscroll { width:30px; line-height:50px; position:fixed; right:5px; top:600px; } </style> <script language='javascript'> /* <![CDATA[ */ suspendcode="<div id='backscroll'> <a onclick='javascript:amutop();return false;' href='#' title='TOP'><img border=0 src=\"https://lh5.googleusercontent.com/-ObCGpcQDQDk/T35aQPPWQMI/AAAAAAAAAPA/8iDyiJ07n3Y/s48/top.gif\" width=\"30\"></a><a onclick='javascript:history.back();return false;' href='#' title='BACK'><img border=0 src=\"https://lh4.googleusercontent.com/-HQASFJRYdd0/T35aO4vWfrI/AAAAAAAAAOo/WtpQMguYPLs/s48/back.gif\" width=\"30\"></a><a onclick='javascript:sc();return false;' href='#' title='STOP'><img border=0 src=\"https://lh5.googleusercontent.com/-mZIfXp3qmSM/T35aP6jrhtI/AAAAAAAAAO0/Dda_pbetGyE/s48/ting.gif\" width=\"30\"></a><a onclick='javascript:clearInterval(timer);initialize();return false;' href='#' title='DOWN'><img border=0 src=\"https://lh4.googleusercontent.com/-HW6-lwAajuU/T35aO55KD8I/AAAAAAAAAOs/uWG9m072otc/s48/gun.gif\" width=\"30\"></a><a onclick='javascript:amubutton();return false;' href='#' title='BOTTOM'><img border=0 src=\"https://lh4.googleusercontent.com/-i00crAzVJK0/T35aO5nmNdI/AAAAAAAAAOw/t0BCAeUQZbY/s48/end.gif\" width=\"30\"></a></div> " document.write(suspendcode);var currentpos,timer;function initialize(){timer=setInterval("scrollwindow ()",30)}function sc(){clearInterval(timer)}function scrollwindow(){currentpos=document.documentElement.scrollTop||document.body.scrollTop;window.scrollTo(0,++currentpos)}function amutop(){window.scrollTo(0,0);clearInterval(timer)}function amubutton(){window.scrollTo(0,8E4);clearInterval(timer)};/* ]]> */</script> <!-- KET THUC LEN XUONG -->

• Kết quả đây: 

Cách 2: 

• Trước tiên các bạn dán đoạn code bên dưới vào phái trên thẻ   ]]></b:skin>

/* css back home */ #gotop{cursor:pointer;width:30px;height:30px;position:fixed !important;position:absolute;z-index:999;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;overflow:hidden} #gotop:hover:after{border-bottom-color:white} #gotop:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px} #gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important;position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;overflow:hidden} #gobottom:hover:after{border-top-color:white} #gobottom:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:#C3D1D7 transparent transparent transparent;position:absolute;top:10px;left:11px}

• Tiếp theo các bạn chèn đoạn code dưới vào phí trước thẻ </body>

<!-- Backscoll --> <script type='text/javascript'> //<![CDATA[ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#gotop").removeAttr("href"); $("#gotop").stop().animate({ bottom: "0", right: "0" }, { duration: 800, queue: false }) } else { $("#gotop").stop().animate({ bottom: "-50", right: "-50" }, { duration: 1000, queue: false }) } if ($(this).scrollTop() > 100) { $("#gobottom").removeAttr("href"); $("#gobottom").stop().animate({ top: "-50", right: "-50" }, { duration: 800, queue: false }) } else { $("#gobottom").stop().animate({ top: "0", right: "0" }, { duration: 1000, queue: false }) } }); $(function () { $("#gotop").click(function () { $("html, body").animate({ scrollTop: 0 }, "slow"); return false }) $("#gobottom").click(function () { $("html, body").animate({ scrollTop: $('#footer').offset().top }, 970); return false }) }); //]]> </script> <a id='gotop' style='bottom: -50px; right: -50px;'> Lên Trên! </a> <a id='gobottom' style='top: 0px; right: 0px;'> Xuống Dưới! </a> <div id='footer'/> <!-- end -->

• Và đây là kết quả:    

Cách 3:   Sử dụng Jquery mang lại hiệu ứng mượt mà (Chỉ tạo nút lên trên)

• Các bạn dán toàn bộ đoạn code bên dưới vào trước thẻ </body> hoặc tiện ích HTML

<style type='text/css'>
#bttop{border:1px solid  #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script  type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Kết quả:

• Có rất nhiều cách để tạo 'back home' cho blogspot và website của bạn. Trên đây là 3 cách đơn giản,đẹp và phổ biến nhất mình chia sẻ cùng các bạn.

Chúc các bạn thành công !