ZMedia Purwodadi

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
Hướng dẫn tạo nút Back to Top đơn giản nhưng hiệu quả cho Blogspot
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

Tiết kiệm thời gian và công sức: Khi người dùng duyệt qua các trang web dài, việc cuộn lên đầu trang có thể mất nhiều thời gian và công sức. Nút "Back to Top" cho phép người dùng trở về đầu trang chỉ với một cú nhấp chuột, giúp tiết kiệm thời gian và giảm bớt sự mệt mỏi khi phải cuộn trang liên tục.
Cải thiện trải nghiệm người dùng: Một trang web thân thiện với người dùng luôn được đánh giá cao. Nút "Back to Top" giúp người dùng dễ dàng điều hướng và tìm kiếm thông tin. Khi người dùng có thể nhanh chóng trở về đầu trang, họ sẽ cảm thấy thoải mái hơn và có xu hướng ở lại trang web lâu hơn, từ đó tăng tỷ lệ tương tác và giảm tỷ lệ thoát trang.
Tăng tính chuyên nghiệp và thẩm mỹ: Việc tích hợp nút "Back to Top" không chỉ mang lại tiện ích mà còn làm tăng tính chuyên nghiệp và thẩm mỹ cho trang web. Một trang web được thiết kế tốt với các tính năng tiện ích sẽ tạo ấn tượng tốt hơn với người dùng, từ đó nâng cao uy tín và hình ảnh của doanh nghiệp hoặc cá nhân sở hữu trang web.
Tối ưu hóa cho thiết bị di động: Trên các thiết bị di động, việc cuộn trang có thể gây khó khăn và mệt mỏi hơn so với trên máy tính để bàn. Nút "Back to Top" giúp người dùng di động dễ dàng trở về đầu trang mà không cần phải cuộn nhiều lần, cải thiện trải nghiệm duyệt web trên các thiết bị này.
Hỗ trợ SEO và tăng tỷ lệ chuyển đổi: Một trang web có trải nghiệm người dùng tốt sẽ được các công cụ tìm kiếm đánh giá cao hơn. Khi người dùng dễ dàng điều hướng và tìm kiếm thông tin, họ sẽ có xu hướng ở lại trang web lâu hơn và tương tác nhiều hơn. Điều này không chỉ cải thiện thứ hạng SEO mà còn tăng tỷ lệ chuyển đổi, giúp doanh nghiệp đạt được mục tiêu kinh doanh.

Cách tạo nút Back to Top 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}}

Kết luận

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 đó.
aHí
aHí ★ Tôi không thể, bạn không thể, nhưng chúng ta có thể ★

Đăng nhận xét