Back to top cho blogspot ẩn hiện bên thanh trượt

By Unknown

Thứ Hai, 18 tháng 8, 2014

Để tiện cho khách truy cập vào blog mình khi xem xong bài viết muốn trở lên trên mà không cần phải kéo chuột bên thanh trượt hoặc kéo bánh xe của con chuột.

DEMO

Một thủ thuật đơn giản là tạo nút Back to top cho blogspot  ẩn hiện bên thanh trượt khi khạch xem xong bài viết chỉ cân 1 click nhẹ vào biểu tượng tượng nó sẻ tự động trở lên trên bài viết.

Back to top cho blogspot ẩn hiện bên thanh trượt

Back to top không làm ảnh hưởng đến giao diện của template vì nó ẩn hiện bên thanh trượt khi khách đọc xong cuối bài viết thật đơn giản nhưng hoàn toàn tiện lợi cho khách truy cập blog mình .
Chúng ta tiến hành thôi nào ?
Bước 1: Đăng nhập vào blogger.com
Bước 2: Chọn Mẫu
Bước 3: Edit HTML
Để tiến hành chèn nút Back to top cho blogspot chúng ta cần 1 đoạn CSS và một đoạn jQuery

CSS cho Back to top

/*Back To Top*/
#top{background-color:#B4DBBC;margin:0;padding:10px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}
#top:hover{background-color:#098047}

Để thêm CSS vào template của bạn ta nhấn Ctrl+F tìm thẻ ]]></b:skin> và thêm đoạn CSS trên trước nó.

jQuery cho Back to top

<a href='#' id='top'><img alt='Back To Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-fL7Owb-hBLmS5ccLuVubuIuSNCR56fbUN0HZoKVQvLj8VCf0nL7hVVVz4bFx5BqiKs3-vZAx9VbaoMfyjgzCKYXR8PBcDsQi2zxT46CUMQAwO47dlyBGoQ5EYxEbG5YyYSlyDqlJqQW1/s1600/btp.png'/></a>
<script type='text/javascript'>
//<![CDATA[
//Scroll Top
(function(a){a(window).scroll(function(){if(a(this).scrollTop()>280){a("#top").removeAttr("href");a("#top").fadeIn()}else{a("#top").fadeOut()}});a(function(){a("#top").click(function(){a("html, body").animate({scrollTop:0},"slow");return false})})})(jQuery);
//]]>
</script>

Sau khi thêm CSS xong chúng ta chứng ta thêm jQuery trên trước thẻ </body>

Bước 4 : Lưu lại và xem kết quả

Lưu ý : Nếu lưu lại mà back to top vẫn chưa hiện thì các bạn thêm code bên dưới trên thẻ </head> nhé

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

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

Tag : Chia sẻ, CSS, jQuery