Tạo nút Back to top và Back to bottom cho blogspot

Thông thường thì hầu hết các blog hiện nay đều chỉ dùng Back to top (nút lên) và không dùng Back to bottom (nút xuống). Cái này sẽ bất lợi nếu blog đó có một vài bài viết có quá nhiều bình luận và không hề cái đường dẫn trỏ xuống khung bình luận đó. Khi đó ta phải kéo kéo thanh cuộn rất mệt đúng không?
Để giải quyết vấn đề đó thì hôm nay mình sẽ hướng dẫn các bạn tạo song song 2 nút Back to top và Back to bottom cực đơn giản nhé.

Cách thực hiện:

Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.

Bước 2: Dán đoạn code sau trước thẻ </body>

<!-- #BACKTOTOP --> <div id='bttop'><i class='fa fa-chevron-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> <a class='bottombottom' href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><i class='fa fa-chevron-down'/></a> </b:if>

Bước 3: Tiếp tục trang trí 2 nút bằng cách thêm CSS trước ]]></b:skin>

#bttop{background:#F77B09;text-align:center;padding:13px;position:fixed;bottom:50%;right:0px;cursor:pointer;display:none;color:#fff;font-size:15px;font-weight:900} #bttop:hover{background:#24bde2;border-bottom:4px solid #F77B09} .bottombottom{position:fixed;z-index:3;bottom:43%;right:0;background:#ff4d11;padding:12px 13px;color:#fff!important;font-size:15px}.bottombottom:hover{background:#24bde2;border-top:4px solid #F77B09}

Bước 4: Lưu template lại và kiểm tra kết quả nha.

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