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 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.
Bước 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>
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
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
Tạo nút lên xuống, trang chủ cho Blogspot (Back to top)
Reviewed by Nguyễn Vượng Official
on
tháng 4 04, 2018
Rating:
Reviewed by Nguyễn Vượng Official
on
tháng 4 04, 2018
Rating:
Không có nhận xét nào :
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời
Để bình luận một đoạn code, hãy mã hóa code trước nhé