Tạo nút lên xuống, trang chủ cho Blogspot (Back to top)

Tạo nút lên xuống, trang chủ cho Blogspot (Back to top)

Bài viết này mình sẽ chia sẻ cho các bạn tiện ích nút lên xuống, trang chủ cho Blogspot, Tiện ích này giúp bạn đọc có thể dễ dàng xuống dưới...
27 tháng 2| + +
Bài viết này mình sẽ chia sẻ cho các bạn tiện ích nút lên xuống, trang chủ cho Blogspot, Tiện ích này giúp bạn đọc có thể dễ dàng xuống dưới chân trang và lên đầu trang nhanh chóng thay vì kéo chuột nhiều lần. Và có thể về trang chủ hoặc trang khác tùy ý bạn.

Tạo nút lên xuống, trang chủ cho Blogspot (Back to Top, Down, Home)

Bước 1: Đăng nhập vào trang quản lý Blogger.com chọn Chủ đề rồi chọn tiếp Chỉnh sửa HTML . Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>
<style>.bt-top,.bt-bottom,.bt-home{border-radius:50px;visibility:hidden;background-color:#2ec849;width:40px;height:40px;text-align:center;line-height:36px;position:fixed;bottom:55px;right:10px;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .3s}.bt-home{bottom:10px!important;visibility:visible;opacity:.8;background:#333}.bt-top.show{visibility:visible;opacity:.8}.bt-bottom{opacity:.8;visibility:visible}.bt-top i,.bt-bottom i{font-size:22px;color:#fff;position:absolute;top:9px;left:13px}.bt-home i{font-size:17px;top:12px;left:12px;color:#fff;position:absolute}.bt-bottom i{top:10px}.bt-top:hover,.bt-bottom:hover,.bt-home:hover{opacity:1}.blog-footer-widgets{color:#ccc;clear:both;background:#323232;font-size:15px;padding:10px 0}#bp_toc a{color:#222}#bp_toc a:hover{color:#333}#footer-colleft{width:68%;float:left;margin:0;padding:0}#st-postleft{width:69%;float:left;margin:0;padding:0;position:relative;overflow:hidden}#st-sidebar-wrapper{width:30%;float:right;margin:0;padding:0}#colleft1{width:48%;float:left;margin:0;padding:0}#colleft2{width:48%;float:right;margin:0;padding:0}#colright{width:30%;float:right;margin:0;padding:0}#st-post-wrapper{max-width:1200px;width:100%;margin:0 auto;padding:0;overflow:hidden;margin-top:65px}#comments,.footer .widget,.sidebar .widget,.bt-top,.bt-bottom,.bt-home{box-shadow:0 1px 0 rgba(0,0,0,.05),0 3px 3px rgba(0,0,0,.05)}.st-hide{display:none}</style>
<div class='bt-top' title='Lên trên'><i class='fa fa-angle-up'></i></div>
<div class='bt-bottom' title='Xuống dưới'><i class='fa fa-angle-down'></i></div>
<a href='/'><div class='bt-home' title='Trang chủ'><i class='fa fa-home'></i></div></a>
<script type='text/javascript'>
//<![CDATA[
// StarTuanIt.Net Back to Top, Down, Home
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>200?$(".bt-top").addClass("show"):$(".bt-top").removeClass("show")}),$(".bt-top").click(function(){return $("html,body").animate({scrollTop:"0"})})})}.call(this));(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>200?$(".bt-bottom").addClass("st-hide"):$(".bt-bottom").removeClass("st-hide")}),$(".bt-bottom").click(function(){return $("html,body").animate({scrollTop:"99999"})})})}.call(this));
//]]>
</script>

Bước 3: Cuối cùng các bạn chọn Lưu chủ đề và load lại trang của mình để xem thành quả. Chúc các bạn thành công

Xem thêm: Tạo Nút Lên đầu trang (Back to top) với hiệu ứng animation cực đẹp cho Blogspot
  • Blogger
  • Facebook
  • Photoshop
  • Icon Fb
  • Kí tự đặc biệt
  • Giới thiệu
  • Thành viên
  • Liên kết
  • Fanpage
  • Sơ đồ Blog