Tạo nút Back to top cho Blogger - Blogspot

Có rát nhiều kiểu dáng để tạo nút Back to top cho Blogger/Blogspot. Tên gọi của nó, nói nôm na dùng để dịch chuyển cửa sổ giao diện Blog/Web về đầu màn hình.

Một số Source Code mình tổng hợp như sau, bạn có thể làm thử và tùy theo ý thích mà sử dụng:

Cách làm:

Tất nhiên phải có Account Google. Bạn mỡ vào Blogger, vào tiếp phần thiết kế Bố cục cho Blog và Click chuột mỡ một Widget tiện ích, chọn Html/JavaScript và chép một trong các Source Code dưới đây vào khung soạn thảo Code

Kiểu 1: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<!-- Back to top button -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#rb-top").fadeIn()}else{$("#rb-top").fadeOut()}});$("#rb-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a href="http://gi2get.blogspot.com/"></a><a id='rb-top' style='display: none; position: fixed; bottom: 5px; right: 5px; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdDIQOILRMN_DE7ixVNRM3pGCETjEIF_W3NKzHdKIgEvR6SMKKo7SpDk7fbRZanW3wITa_cVl_jtjb8N41DUKUCJThrM8qHUm2AOksrL7WOB98_mX7Lzf7MBNxcJKroSboobgHCcOxRha2/s1600/rb+back+to+top+3.png' width="50px" height="50px"/></a>

Save lại và xem kết quả

Kiểu 2: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<!-- BACK TO TOP -->

<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 type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>

<!-- BACK TO TOP Ends -->

Save lại và xem kết quả
Kiểu 3: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://2.bp.blogspot.com/- ExomXm9BGFw/UmFqgFo-rFI/AAAAAAAAAE4/JMc1KSveWco/s1600/Top.png"/></a>

Save lại và xem kết quả

Kiểu 4: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWbqYkJJsx-mQOOuAIGGqD-TdadmiNGMgte_mNVTz57k8TTiakqRaLnUlKiya5agD13eMy1AeeZsynRm_sCrAQB3tAIJCpdAt3rTcL8LusxOAZOx7YzTvcxT1u9P0CvfDEoqIozLu3Oe5l/s1600/vers-haut-icone-7320-48.png" /></a> 

Save lại và xem kết quả.
Kiểu 5: Kiểu nầy không phải tạo Widget, vào thẳng trong Template, mỡ Edit HTML. nhấn Ctrl +F tìm </Body> và chép Source code vào phía trước:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 1em;
display: none;
font-weight: bold;
}

.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration: none;
}
</style>

<a class="back-to-top" href="#">Len dau trang</a>

Save lại và xem kết quả.

Các bạn thấy có đơn giản không. Chỉ là những Source Code mình tìm kiếm, tổng hợp lại thôi. Một lúc khác, hy vọng rãnh rỗi hơn, thoãi mái hơn sẽ tìm được nhiều hơn nữa. Chúc các bạn vừa làm, vừa học, vừa Vọc thành công nhiều hơn thế nữa.
Minh Nguyễn