Tổng hợp các nút back to top cho Blogger

Cũng như các tiện ích khác, nút back to top cũng rất quan trọng cho blog. Bạn sẽ cảm thấy thế nào khi đọc hết một bài viết dài và bạn muốn trở lên trên nhưng không có nút back to top? Thật là khó chịu phải không nào ! Ở bài viết này mình sẽ giới thiệu một số nút back to top cho Blogger.

#1 Back To Top Style Rocket - By Arlina Design

Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn đoạn CSS sau trên </b:skin> hoặc </style>:

#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

Bước 3: Chèn code sau trên </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>
<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>

Lưu ý: Nên tải ảnh ở css về lưu trữ, tránh trường hợp die link sẽ không hiển thị được.

#2 Back To Top - CSS

Bước 1: Vào Mẫu > Chỉnh sửa HTML
Bước 2: Chèn code sau trên </body>

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="http://1thuthuat.blogspot.com" rel="nofollow"  
title="Back to Top"><img 
src="http://www.sohdei.com/SPC/wp-content/themes/dreamer/images/back-to-top.png"/></a>

Lưu ý: Bạn có thể thay bằng link ảnh khác theo sở thích !