Tạo Nút back to top và back to bottom đơn giản không hiệu ứng cho blogspot Thứ Bảy, 22 tháng 11, 2014

Bài viết trước mình cũng đã giới thiệu bài viết tương tự là tạo ra nút back to top và back to bottom với hiệu ứng trượt mượt mà, bài viết này là tiếp theo hướng dẫn các bạn tạo nút back to top khác đơn giản.

Back to top là một trong những tiện ích của blogspot mà bạn cài thêm để điều hướng người dùng lên trên đầu trang blogspot để người xem có thể thao tác trên menu để đọc

Tạo Back to top và back to bottom:

Nút Back top top và back to bottom cho blogspot

Cách thực hiện tạo nút back to top và back to bottom cho blogspot:

Các bạn copy đoạn code bên dưới:
Bước 1: Vào mẫu tìm từ ]]></b:skin> và dán đoạn code CSS bên dưới phía trên thẻ ]]></b:skin>

.toptop{position: fixed;
z-index: 9999;
bottom: 100px;
right: 25px;
padding-bottom: 0px;
background: #fff;}
.bottombottom{position: fixed;
z-index: 9999;
bottom: 150px;
right: 25px;
padding-bottom: 0px;
background: #fff;}

Bước 2: Có 2 cách chèn:
Cách 1: Vào mẫu và dán trước thẻ </body> hoặc </head> đều được

Cách 2: Tạo 1 HTML/JAVACRIPT và dán vào đó

Đoạn code bạn sẽ chèn 1 trong 2 cách đề tạo nút Tạo Nút back to top và back to bottom cho blogspot

<a class='toptop' href='javascript:top.window.scrollTo(0,0)' title='Lên đầu trang'><img alt='Lên đầu trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9Et2mCLBGjczOttc4RVj7KkJdxH77hZ4EKMv79TDOAkumxedAytVeiwqZ9lDYTfzyOsGGf82MSgxfhVE_021MGWKE8aB0bt9oyFL10liqqVO-CgpeCDBQZyeAlJBMe87Qb_hST3hLI0/s1600/back-to-top.png'/></a>
<a class='bottombottom' href='javascript:window.scrollTo(0,999999)' title='Xuống cuối trang'><img alt='Xuống cuối trang' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdsk0v4am5wxs54Dd3ZAxGMsb5KoIRXEXzFDOrLEgQR0cGgMM4toFv5VQKW6GJ7-2D3GCNfZhszvlWIPclRcpAbBEV4j85Ij7XhnhuqJZpJQD5m9TKt0ZJu0Ja1V7tLMG3yuprzm44YvU/s1600/back-to-bottom.png'/></a>

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

Nguồn: Tôi Là Quản Trị BLOG

Hướng dẫn tạo back to top back to bottom bằng CSS cho blogspot Thứ Hai, 6 tháng 10, 2014

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){$(&#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 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

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){$(&#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 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