Home Blogger Học viết Blog Thủ thuật Blogspot Tiện ích Blogspot

Tạo Nút lên đầu trang - Nút Button “Back to Top” cho Blogspot

7:18 PM 9/15/2021
Xem 20
Học viết Blog,Thủ thuật Blogspot,Tiện ích Blogspot,

Tạo Nút lên đầu trang - Nút Button “Back to Top” cho Blogspot

 

Với Blogpost là nền tảng được miễn phí của Google, bạn có thể tạo blog theo tùy thích. Khi đã có Blog để viết bài đăng trên đó, bạn thấy Blog mình vẫn còn thiếu “Nút quay lên đầu trang” khi đọc đến giữa hay cuối bài viết. Việc tạo nút khá dể dàng, với mình vẫn chưa biết thực hiện. Sau khi tra trên Google và đã thực hiện được, minh xin chia sẻ để các bạn thực hiện cho Blogpost của mình.

 Nút lên đầu trang hay nút Button “Back to Top” rất hữu ích với blogpost. Người đọc không cần phải rê chuột có thể lên đầu trang nhanh chóng. Hãy cùng Blog cách tạo button “Back to Top” cho Blogspot.

 

 

Hướng dẫn tạo Nút lên đầu trang (Nút Button “Back to Top”) cho Blogspot

 

Bước 1:

- Đăng nhập vào trang quản lý Blogger.com -> Chủ đề -> Chỉnh sửa HTML -> Copy toàn bộ code của HTML chép vào Word của bạn để lưu. Khi cần Backup lại trang blog trước khi thực hiện nếu bị lỗi.

- Sau đó các bạn copy mã bên dưới đây vào sau thẻ <head>. Để tìm thẻ này bạn nhấn Ctrl + F rồi nhập vào -> Enter.


<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 2: Bạn thêm tiếp code dưới đây vào trước thẻ </body>. Tìm thẻ </body> tương tự như trên.


<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>

 

Bước 3: Chọn “Lưu” và xem lại Blog của mình để tận thành quả.

 

N%25C3%25BAt+l%25C3%25AAn+%25C4%2591%25E1%25BA%25A7u+trang2



Tóm lại: với 3 bước đơn giản chúng ta đã thực hiện được “Nút lên đầu trang” hay nút Button “Back to Top” một cách dể dàng. Hãy thực hiện bạn sẽ thành công.

Chúc các bạn thành công!

Bạn đã xem bài này 1 lần.

Phổ biến trong tuần

Tin mới

  • Năm qua đã làm gì
    Năm qua đã làm gì

     Năm qua đã làm gì Khi những tia nắng cuối cùng của năm cũ dần tắt, lòng người lại trào dâng những cảm xúc khó tả. "Năm qua đã làm gì" không...

  • Hoa nở bên đường
    Hoa nở bên đường

     Hoa nở bên đườngTrong những góc phố vắng lặng chiều nay, khi những bông hoa dại ven đường lặng lẽ nở rộ, ta bắt gặp hình ảnh một tâm hồn đang...

  • Cắt Đôi Nỗi Sầu
    Cắt Đôi Nỗi Sầu

     Cắt Đôi Nỗi SầuTrong những ngã rẽ của cuộc đời, tình yêu luôn là một hành trình đầy những cung bậc cảm xúc. Có những lúc thăng hoa, hạnh phúc...

  • Quê em miền Tây
    Quê em miền Tây

     Quê em miền TâyMiền Tây Nam Bộ là vùng đất trù phú, nơi có những cánh đồng lúa vàng óng ả, những dòng sông mênh mang chở nặng phù sa, và những...

  • Chạm Vào Bình Minh
    Chạm Vào Bình Minh

     CHẠM VÀO BÌNH MINHTên bài hát: Chạm Vào Bình MinhSáng tác: (Giả định, bạn có thể thay thế bằng tên của mình hoặc người bạn yêu thích)Thể loại:...

  • MỘT SỐ PHÉP TÍNH THỐNG KÊ MÔ TẢ
    MỘT SỐ PHÉP TÍNH THỐNG KÊ MÔ TẢ

    MỘT SỐ PHÉP TÍNH THỐNG KÊ MÔ TẢTài liệu này không nhắc lại chương trình thống kê cơ bản mà chỉ đưa ra các ứng dụng của nó trong nghiên cứu khoa học...

  • Never Have I Felt This | Tôi chưa bao giờ cảm thấy điều này
    Never Have I Felt This | Tôi chưa bao giờ cảm thấy điều này

    Never Have I Felt This | Tôi chưa bao giờ cảm thấy điều nàyNever Have I Felt This Provided to YouTube by AEI Group Ltd Never Have I Felt This ·...

  • Fearless Pt II | Light It Up | Mortals | On & On | Statement
    Fearless Pt II | Light It Up | Mortals | On & On | Statement

    Fearless Pt II | Light It Up | Mortals | On & On | Statement   Fearless Pt II | Light It Up | Mortals | On & On |...

  • Sự tích Hồ Ba Bể
    Sự tích Hồ Ba Bể

     Sự tích Hồ Ba BểTruyện đọc trong sách Tiếng việt lớp 4, với ý nghĩa câu truyện muốn nói lên lòng nhân ái, sẳn sàng cưu mang, giúp đỡ người...

  • THUỐC GRANDAXIN 50mg
    THUỐC GRANDAXIN 50mg

     THUỐC GRANDAXIN 50mg   Trong cuộc sống hiện đại ngày nay, căng thẳng và áp lực không tránh khỏi. Cảm giác lo lắng, căng thẳng và mất...

  • BỆNH LUPUS BAN ĐỎ HỆ THỐNG
    BỆNH LUPUS BAN ĐỎ HỆ THỐNG

    BỆNH LUPUS BAN ĐỎ HỆ THỐNG(Systemic lupus erythematosus- SLE)1.      ĐỊNH NGHĨA Lupus ban đỏ hệ thống là bệnh lý của mô...

  • BỆNH VIÊM KHỚP DẠNG THẤP
    BỆNH VIÊM KHỚP DẠNG THẤP

     BỆNH VIÊM KHỚP DẠNG THẤP (Rheumatoid Arthritis) 1.     ĐẠI CƯƠNG Viêm khớp dạng thấp (VKDT) là một bệnh lý tự miễn...

  • Xây dựng chế độ ăn cho người bệnh tiểu đường
    Xây dựng chế độ ăn cho người bệnh tiểu đường

     Chế độ ăn cho người bệnh tiểu đường: Hành trình chinh phục sức khỏeXin chào các bạn đọc thân mến! Hôm nay, chúng ta hãy bắt đầu một cuộc hành...

  • Duy trì một lối sống lành mạnh
    Duy trì một lối sống lành mạnh

     Duy trì một lối sống lành mạnhTrong thời đại ngày nay, với cuộc sống vội vã và áp lực không ngừng tăng lên, việc duy trì một lối sống lành mạnh...

  • Tìm hiểu bệnh suy tim
    Tìm hiểu bệnh suy tim

     Tìm hiểu bệnh suy timSuy tim, còn được gọi là suy tim mạch, là một tình trạng mà tim không hoạt động một cách hiệu quả để đáp ứng nhu cầu của...

Liên hệHọc chia sẻ
THEO DÕI QUA EMAIL
Đăng ký đọc bài viết mới nhất từ Blog Hoc Chia sẻ!