thiet ke web

Thêm Nút Lên Đầu Trang - Back To Top Button

Chắc hẳn nhiều bạn thấy các trang blog bây giờ hay có một cái Nút treo lơ lửng ở chân trang (thường là bên phải) để phục vụ việc quay trở lại đầu trang ngay lập tức, mà không cần phải kéo hay scroll thanh trượt....Nút Back to Top này rất tiện lợi với người dùng, đặc biệt với các bài viết dài, site bị kéo dài và nhiều thông tin. Hoặc site bạn chưa có một Menu được ghim cố định. Và người đọc buộc lòng phải trượt lại đầu trang.



Back To Top Button

Là một xu thế đang dần phổ biến, nếu site bạn chưa có thì hãy cập nhật ngay nào

Cách thêm Nút Back To Top vào trang blogger/blogspot

Đầu tiên Log-in blogger và vô trong HTML
CTR+F: jquery
Kiểm trang trong HTML xem có JQUERY chưa nhé. Có rùi thì bỏ qua công đoạn này.
Nếu trong HTML của bạn chưa có thì chèn thẻ Script dưới đây vào trong thẻ <head> nhé:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
Tiếp theo: Thêm đoạn code dưới đây vào trong thẻ <body> . Nên trước thẻ đóng </body> là OK

Code:

<!--Back to Top Button Start-www.thenaynhe.com--><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;}
.back-to-top:hover {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="http://1.bp.blogspot.com/-yrOTdp6sNt4/U2M2QsgIzVI/AAAAAAAAAeM/Zp9nIUmG5Sw/s1600/back+to+top+.png" alt="Back to Top" /></a>
<!--Back to Top Button End-www.thenaynhe.com-->

Bấm Save HTML. Và kiểm tra blog đi nào 

Link màu blue là hình ảnh Button. Bạn có thể tự thiết kế một kiểu và thay vô. Hoặc vô Google image search với từ khóa: back to top . Sẽ có vô số hình ảnh để lựa chọn :)
Dưới đây là một số ảnh button tham khảo:











Goodluck  😆 ^^



Share on Google Plus

About Thế Này Nhé

Thế này nhé blog tuyển tập những thứ linh ta linh tinh do hội chứng hứng thì viết thoai ^^ 

Mình là mình rất thích được gạ gẫm đi cafe cafao nhé. Bàn chiện gì kiếm ra tiền thì càng hay. Ko thì ta chém chiện Gu cafe, chiện đây đó, chiện "trính chị" thì cũng thú vị ^^

0 comments:

Blogger Template Blogger Theme Created by Blogger Tips

Đăng nhận xét

Thanks for your message !