Hướng dẫn tạo nút Back to Top đơn giản nhưng hiệu quả cho Blogspot

Mục lục bài viết

Bạn đã bao giờ thấy mình cuộn xuống một trang web trong khoảng thời gian dài chỉ để quay lại đầu trang chưa? Đó có thể là một trải nghiệm khó chịu, đặc biệt nếu nội dung của trang web dài. May mắn thay, có một giải pháp cho vấn đề này đó là nút Quay lại đầu trang (Back to Top).

Nút Back to Top trong trang web là gì?

Nút Quay lại đầu trang là một biểu tượng nhỏ hoặc liên kết văn bản thường nằm ở góc dưới cùng bên phải của trang web. Khi nhấp vào, nó sẽ ngay lập tức đưa bạn trở lại đầu trang, giúp bạn tránh khỏi những rắc rối khi phải cuộn lên theo cách thủ công. Tính năng này đặc biệt hữu ích trên các trang có nhiều nội dung, chẳng hạn như các bài viết dài hoặc danh mục sản phẩm.
Có thể bạn thắc mắc tại sao nút Back to Top lại cần thiết khi hầu hết các trình duyệt web đều có thanh cuộn tích hợp sẵn. Mặc dù đúng là bạn có thể sử dụng thanh cuộn để điều hướng một trang nhưng việc này có thể phức tạp và tốn thời gian, đặc biệt nếu bạn đang sử dụng thiết bị di động. Nút Quay lại đầu trang cung cấp một cách nhanh chóng và dễ dàng để quay lại đầu trang, bất kể bạn đang ở đâu trên trang web.

Lợi ích việc sử dụng nút Back to Top

Tăng thứ hạng SEO

Nút Quay lại đầu trang không chỉ cung cấp một lối tắt hữu ích cho khách truy cập trang web mà còn có thể cải thiện thứ hạng SEO của trang web của bạn. Bằng cách kết hợp nút Quay lại đầu trang trên trang web của bạn, bạn đang làm cho trang web trở nên thân thiện hơn với người dùng và khuyến khích khách truy cập ở lại trang web của bạn lâu hơn. Thời gian lưu lại trang web tăng lên này báo hiệu cho Google rằng trang web của bạn có giá trị và phù hợp với người dùng, điều này có thể dẫn đến thứ hạng cao hơn trong kết quả tìm kiếm.

Tăng trải nghiệm người dùng

Nút Quay lại đầu trang là một tính năng nhỏ nhưng mạnh mẽ cho phép người dùng điều hướng trở lại đầu trang web một cách nhanh chóng và dễ dàng. Bằng cách thêm nút này vào trang web của bạn, bạn có thể giúp người dùng tiết kiệm thời gian và cải thiện trải nghiệm tổng thể của họ. Họ không cần phải cuộn ngược lên theo cách thủ công nữa, điều này có thể tốn thời gian và gây khó chịu, đặc biệt là trên các trang dài hơn.
Nút Quay lại đầu trang đặc biệt hữu ích trên các thiết bị di động nơi có thể khó điều hướng quay lại đầu trang. Với tính năng này, người dùng chỉ cần nhấn vào nút và được đưa trở lại đầu trang ngay lập tức.
Việc kết hợp nút Quay lại đầu trang trên trang web của bạn cũng là một cách tuyệt vời để cho khách truy cập thấy rằng bạn quan tâm đến trải nghiệm của họ. Bằng cách giúp họ điều hướng trang web của bạn dễ dàng hơn, bạn có thể tăng sự hài lòng của họ và khuyến khích họ quay lại trong tương lai.

Cách tạo nút Quay lại đầu trang cho Blogspot

Bước 1: Chèn thẻ div của nút trước thẻ đóng </body>

<div aria-label="Back to Top" class="scroll--top" role="button" tabindex="0"></div>

Bước 2: Chèn JavaScript ngay sau thẻ div trên

<script>//<![CDATA[
    const scrollTop=document.querySelector('.scroll--top')
    window.addEventListener('scroll',function(){
      if(this.pageYOffset==0)scrollTop.classList.remove('show')
      else scrollTop.classList.add('show')
    })
    scrollTop.addEventListener('click',function(){
      window.scrollTo({top:0,behavior:'smooth'})
    })
  //]]></script>

Bước 3: Chèn đoạn code CSS trong thẻ "b:skin" của template Blogspot

.scroll--top {
    background: #00aeef;
    position: fixed;
    bottom: 10%;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 20;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #00aeef;
    transition: opacity 400ms ease 0ms;
}
.scroll--top:not(.show) {
    opacity: 0;
}
.scroll--top.show {
    opacity: 1;
}
.scroll--top:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath fill='%23fff' d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 100%;
    content: "";
    width: 21px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
}
.scroll--top:focus {
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    border-color: #03a9f4;
    outline: none!important;
}
@media(min-width:1025px){.scroll--top:hover{cursor:pointer}}

Lời kết

Nút Quay lại đầu trang là một tính năng nhỏ nhưng quan trọng có thể nâng cao đáng kể trải nghiệm người dùng trên Blogspot của bạn. Bằng cách làm cho nội dung của bạn dễ tiếp cận và thuận tiện hơn, bạn có thể thu hút và giữ chân nhiều độc giả hơn, đồng thời phát triển blog của mình. Vậy tại sao không thử? Độc giả của bạn sẽ cảm ơn bạn vì điều đó.