Hướng dẫn tạo back to top back to bottom bằng CSS cho blogspot

Bài viết này TÔI LÀ QUẢN TRỊ BLOG sẽ hướng dẫn cho các bạn tạo ra nút Back to top và Back to bottom được tạo ra bằng CSS rất đẹp mắt và mượt mà nên rất nhẹ

Đầu tiên là tạo BACK TO TOP cho blogspot

Bước 1: Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML
Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên.

#bttop{border-top-left-radius:99px;background:#F77B09;text-align:center;padding:2% 0.5% 1%;position:fixed;bottom:0;right:0px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{background:#24bde2;border-bottom:4px solid #F77B09}

Bước 2: Tìm đến thẻ </body> và thêm đoạn mã sau lên trên thẻ đó.

<div id="bttop">PG UP</div><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>

Thứ 2 là tạo BACK TO BOTTOM

Bước 1: Các bạn vào lại trang tổng quan của blog của bạn » Mẫu » Chỉnh sửa HTML
Tìm đến thẻ ]]></b:skin> và thêm đoạn css sau lên trên.

#gobottom{border-bottom-left-radius:99px;color:#fff;font-size:11px;font-weight:900;cursor:pointer;position:fixed!important;position:absolute;z-index:99;background-color:#F77B09;overflow:hidden;padding:1% 0.5% 2%;}
#gobottom:hover{background:#24bde2;text-decoration:none;border-top:4px solid #F77B09}

Bước 2: Tìm đến thẻ </body> và thêm đoạn mã sau lên trên thẻ đó.

<script type='text/javascript'>//<![CDATA[$(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#gobottom").removeAttr("href"); $("#gobottom").stop().animate({ top: "-50", right: "-50" }, { duration: 600, queue: false }) } else { $("#gobottom").stop().animate({ top: "0", right: "0" }, { duration: 500, queue: false }) }});$(function () { $("#gobottom").click(function () { $("html, body").animate({ scrollTop: $('#footer').offset().top }, 970); return false })});//]]></script><a id='gobottom' style='top: 0px; right: 0px;'>PG DN</a>

CHÚC CÁC BẠN THÀNH CÔNG!

P/s Nếu không hiểu phần nào vui lòng comment bên dưới!
Nguồn Tôi là quản trị blog