Trong bài viết này, mình tiếp tục chia sẻ cho các bạn mã ( code ) để tạo nút lên trang đầu hay còn gọi là code nút back to top, mời các bạn theo dõi các bước bên dưới nhé.
Cách Tạo Nút Lên Trang Đầu ( Back To Top ) Cho Blogspot Đẹp
Bước 1: Các bạn copy dòng code bên dưới và đặt vào trước thẻ </head> hoặc cứ đặt trong <head> Đặt Mã Ở Đây </head>
Bước 2: Tiếp tục các bạn copy đoạn code bên dưới đặt vào trong phần <body> Đặt Mã Ở Đây </body>. Dòng code bên dưới bạn cứ đặt bất cứ đâu trong phần body<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 3: Lưu Template lại và đến trang chủ để xem kết quả nhé<style type='text/css'>/* Sonar Effect */@-webkit-keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}@keyframes sonar-effect{0%{opacity:0.1}40%{opacity:0.3;box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff}100%{box-shadow:0 0 0 5px #fff,0 0 10px 10px #fff,0 0 0 10px #fff;-webkit-transform:scale(1.5);transform:scale(1.5);opacity:0}}/* To top */.vikkatotop{visibility:hidden;z-index:2;background:rgba(52, 152, 219, 0.75);color:#fff;font-size:1.6rem;width:55px;height:55px;line-height:52px;text-align:center;position:fixed;bottom:40px;right:40px;cursor:pointer;-webkit-transform:translateZ(0) scale(0.0) rotate(360deg);transform:translateZ(0) scale(0.0) rotate(360deg);border-radius:100%;opacity:.9;transition:all .4s}.vikkatotop:hover{background:#3498db;color:#fff;opacity:1}.vikkatotop.arlniainf{visibility:visible;cursor:pointer;opacity:1;-webkit-transform:translateZ(0) scale(1.0) rotate(0deg);transform:translateZ(0) scale(1.0) rotate(0deg);transition:all .4s;}.vikkatotop::before{content:'';display:inline-block;position:absolute;width:100%;height:100%;border-radius:100%;top:0;left:0}.vikkatotop:hover::before{-webkit-animation:sonar-effect 1s ease-in-out .1s infinite;animation:sonar-effect 1s ease-in-out .1s infinite}.vikkatotop{bottom:20px;right:20px;}</style><div class='vikkatotop hider'><i class='fa fa-angle-up'></i></div><script type='text/javascript'>//<![CDATA[// Back to top button$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$(".vikkatotop").addClass('arlniainf'):$(".vikkatotop").removeClass('arlniainf')}),$(".vikkatotop").click(function(){return $("html,body").animate({scrollTop:0},600),!1})});//]]></script>
EmoticonEmoticon