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

11:02
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 topBack to bottom được tạo ra bằng CSS rất đẹp mắt và mượt mà nên rất nhẹ
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

Share this

Related Posts

Previous
Next Post »