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

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ẹ.
Nút back to top là button giúp khách truy cập có thể trở về đầu trang khi đang xem toàn bộ bài viết để chuyển đến đầu trang, xem menu hoặc chuyển xem các liên kết khác có tác dụng điều hướng người dùng. Song song đó nút back to bottom giúp khách truy cập chuyển đến cuối trang để xem thông tin chân trang web.

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