Thêm nút Back top tuyệt đẹp cho Blogspot


Hôm nay mình sẽ hướng dẫn cho các bạn tạo Nút lên đầu trang đẹp, chuyên nghiệp cho Blogspot

HƯỚNG DẪN CÁCH LÀM

Bước 1: Tìm thẻ ]]></b:skin> và dán đoạn CSS dưới lên trên nó
#BackToTop{overflow:inherit;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);width:55px;height:55px;color:#fff;text-align:center;background-color:#2980b9;font-size:22px;line-height:55px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}
#BackToTop:hover{background-color:#1572af;color:#fff}
#BackToTop.active{transform:scale(1)}
.pulse{overflow:initial;position:relative}
.pulse::before{content:'';display:block;position:absolute;width:100%;height:100%;top:0;left:0;background-color:inherit;border-radius:inherit;transition:opacity .3s,-webkit-transform .3s;transition:opacity .3s,transform .3s;transition:opacity .3s,transform .3s,-webkit-transform .3s;-webkit-animation:pulse-animation 1s cubic-bezier(0.24,0,0.38,1) infinite;animation:pulse-animation 1s cubic-bezier(0.24,0,0.38,1) infinite;z-index:-1}@-webkit-keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}@keyframes pulse-animation{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}50%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}100%{opacity:0;-webkit-transform:scale(1.5);transform:scale(1.5)}}
Bước 2: Tìm tiếp thẻ </body> rồi dán đoạn Code, Js bên dưới lên trên nó
<!-- Back to top ~ www.starbinhit.net -->
<a class='waves-effect waves-light pulse' href='#' id='BackToTop'><i class="fa fa-angle-up" aria-hidden="true"></i>/a>
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
</script>
Bước 3: Bước này chỉ dành cho ai chưa thêm Font Awesome thôi nha!
Dán đoạn code bên dưới vào dưới thẻ </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("//fonts.googleapis.com/icon?family=Material+Icons");
//]]>
</script> 
Demohttps://testtemplatesbit.blogspot.com/
Chúc các bạn thành công!
Star Bình Blog
Trần Thanh Bình
Designer Developer

Chào các bạn mình là Bình - một cậu học sinh, với đam mê và sở thích, mình lập nên blog này để lưu trữ những kiến thức, đồng thời cũng chia sẻ những gì mình biết và sưu tầm được tới bạn đọc.

  • ..
  • Bài liên quan

    - Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
    - Mọi chi tiết xin liên hệ:
    • Email: starbinhblog.com@gmail.com
    • Facebook: Fb.com/tomitsystem
    Xin chân thành cảm ơn những đóng góp của bạn để chúng tôi ngày càng phát triển hơn nữa...

    Bình luận Facebook:

    10 nhận xét:

    - Những bình luận mang tính xây dựng đóng góp bài viết mới được để lại

    - Những bình luận không liên quan đến bài viết có thể bị xóa

    - Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

    - Hãy là con người văn minh từ những câu nói