1. Trang chủ
3. Blog
5. Tạo nút lên đầu trang phong cách tên lửa

Tạo nút lên đầu trang phong cách tên lửa

Hòa Trần - Blogger

tháng 1 31, 2011

Blog

Mục lục

Hướng dẫn thêm nút lên đầu trang back to top cho blogspot theo phong cách tên lửa đẹp mắt. Cách thêm Tạo nút lên đầu trang phong cách tên lửa như sau.

Các bạn copy toàn bộ code bên dưới dán trước thẻ đóng </body> và lưu lại là xong.

Copy

<style>
  /*<![CDATA[*/
.backtop{position:fixed;bottom:80px;z-index:99;top:auto;width:50px;height:50px;line-height:50px;font-size:19px;font-weight:bold;text-align:center;display:inline-block;border:solid 1px transparent;border-radius:50%;text-decoration:none;transition:opacity 0.2s ease-out;opacity:0 !important;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.backtop .fa{font-size:22px;color:#fff;font-weight:bold}.backtop:hover{border-color:#e62901;background:#fff}.backtop:hover .fa{color:#e62901}.backtop.pc{position:absolute;right:15px;width:auto;height:auto;background:none;bottom:auto;font-family:"Montserrat",sans-serif;font-size:14px;color:#ff6ea4 !important;line-height:unset;top:28px}@media (max-width: 767px){.backtop.pc{display:none !important}}.backtop.pc .fa{color:#ff6ea4;font-size:14px;padding-left:5px}.backtop.pc:hover .fa{color:#e62901}.backtop.show{opacity:1 !important}@media (min-width: 1441px){.backtop{right:15px;bottom:80px}.phone_backtotop{bottom:30px !important;left:50px}}@media (min-width: 1200px) and (max-width: 1440px){.backtop{right:15px;bottom:40px}.phone_backtotop{bottom:48% !important;left:30px}}@media (min-width: 768px) and (max-width: 1199px){.backtop{right:25px;bottom:40px}.phone_backtotop{bottom:48% !important;left:30px}}@media (max-width: 767px){.backtop{right:11%;bottom:20px}
  /*]]>*/
</style>
<a class='backtop' href='#' title='Lên đầu trang'><img alt='Lên đầu trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjh-A2p0sUu2z5caRWzl25qfkIFpDhjRIgtO6eDInE2ixuaCq3uT-w1SxaHFaYb70dGfVqs48Ar1KzT7Uj96A2mqgHsigWf3RhtsGnS6Fq6aQM50JE5YVmUYbfLf6MV2-D6GY4IeBzfKz/h120/backtop.webp'/></a>
<script>
//<![CDATA[
if ($('.backtop').length) {
  var scrollTrigger = 200,
    backToTop = function() {
      var scrollTop = $(window).scrollTop();
      if (scrollTop > scrollTrigger) {
        $('.backtop').addClass('show');
      } else {
        $('.backtop').removeClass('show');
      }
    };
  backToTop();
  $(window).on('scroll', function() {
    backToTop();
  });
  $('.backtop').on('click', function(e) {
    e.preventDefault();
    $('html,body').animate({
      scrollTop: 0
    }, 700);
  });
}
//]]>
</script>

Chia sẻ bài viết

Bài viết mới