[Blogger] Tạo nút lên đầu trang phong cách Material Design cho blogspot

Nút lên đầu trang là 1 thành phần mà hầu như website nào cũng có, nó giúp người dùng giảm được thao tác lăn chuột khi đang ở chân trang. Kết hợp với phong cách thiết kế Material đang thịnh hành bài viết này sẽ giúp bạn tạo ra nút back to top với hiệu ứng cực đẹp

Bạn có thể xem live demo trực tiếp tại bài viết này nhé. Nếu như thích hãy làm theo chỉ dẫn sau

Trước tiên bạn đăng nhập vào trang quản trị blogger và vào mục chỉnh sửa HTML

Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tích hợp JQuery nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

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

Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

/* Back To Top by hung1001 */
#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#0ba9f4;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}
#BackToTop i{color:#fff!important}
#BackToTop:hover{transform:scale(1.1)!important}
#BackToTop.active{transform:scale(1)}
.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity,transform;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-ms-transition:all .2s ease-out;transition:all .2s ease-out}
.waves-effect.waves-light{background-color:rgba(255,255,255,0.45)}
.ripple{position:relative;overflow:hidden;transform:translate3d(0,0,0)}
.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}

Cuối cùng đặt đoạn code sau trước thẻ đóng </body>

<a class='waves-effect waves-light ripple' href='#' id='BackToTop'><i class='fa fa-angle-up'></i></a>
<script type='text/javascript'>//<![CDATA[
// Back To Top by hung1001.com
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},800)})})
//]]></script>

Bạn có thể ẩn nút back to top cũ đi bằng cách xóa code html, js, css liên quan hoặc sử dụng display:none

Tùy chỉnh: thay các thuộc tính  right: 30px; bottom: 31px; bằng số khác để điều chỉnh vị trí button, thay {scrollTop:0},800) thành số khác để thay đổi tốc độ, số càng nhỏ quá trình chuyển đổi diễn ra càng nhanh và ngược lại

Good Luck !