Tạo nút lên đầu trang cho blogspot với JQuery hoặc CSS

Cách 1: Sử dụng jquery

Đăng nhập Blog > Vào Mẫu > Chỉnh sửa HTML
Thêm đoạn code phía trên </body>
<style type='text/css'>
#bttop{border:1px solid  #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script  type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Thay từ BACK TO TOP bằng từ bạn muốn.

Cách 2: Sử dụng css

Đăng nhập Blog > Vào Bố cục > Thêm Tiện ích > HTML/JavaScript và dán đoạn code dưới đây vào.
(Dùng css nút lên đầu trang sẽ không ẩn hiện được như dùng jquery nên bạn có thể vào Mẫu > Chỉnh sửa HTML rồi đặt đoạn code này ở cuối trang)
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHFDUbhIuwkZZAaERt4j0TqAuaQ1MlkqJ6mLIH-gw4bxVL6eWxvlqTWHp0GYLdMn24s1j66BJJqDG2voLLRe2-e7QVr_VUsKjPzSfVdACuQgrevSqc_bzqVg_azbKP581AIhfrJiJPuA/s1600/go-to-top.png"/></a>

Thay link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHFDUbhIuwkZZAaERt4j0TqAuaQ1MlkqJ6mLIH-gw4bxVL6eWxvlqTWHp0GYLdMn24s1j66BJJqDG2voLLRe2-e7QVr_VUsKjPzSfVdACuQgrevSqc_bzqVg_azbKP581AIhfrJiJPuA/s1600/go-to-top.png bằng link ảnh mà bạn muốn.

Cách 3: Tạo với trang scrolltotop.com

Truy cập scrolltotop.com . Copy đoạn code của nút lên đầu trang mà bạn muốn. Ví dụ:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://arrow.scrolltotop.com/arrow64.js"></script>

Đăng nhập Blog > Vào Mẫu > Chỉnh sửa HTML > Thêm đoạn code phía trên </body>

DXOan

Đây chính là tôi với sự bùng nổ của những giấc mơ. Tôi thích khám phá và chia sẻ những điều mới mẻ. Hãy đồng hành cùng tôi nhé ! 😁😘😍 - Con đường tôi đi là con đường tôi chọn - 😎😂✌ facebook twitter pinterest youtube external-link

Post a Comment

Vui lòng đưa ra những nhận xét tích cực, mang tính xây dựng.*

Previous Post Next Post

AdBlock Detected!

Phát hiện trình duyệt đang sử dụng AdBlock. Vui lòng tắt AdBlock để có thể xem nội dung cũng như ủng hộ tác giả. DXOan xin cảm ơn. Chúc bạn một ngày vui vẻ !