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

back to top back to bottom

Đầ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 2Tì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){$(&#39;#bttop&#39;).fadeIn();}else{$(&#39;#bttop&#39;).fadeOut();}});$(&#39;#bttop&#39;).click(function(){$(&#39;body,html&#39;).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 2Tì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
· In trang (Ctrl+P)
Chúc bạn có thêm kiến thức quý báu!

Không có nhận xét nào:

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước .

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.