Thủ thuật blogspot - Dautoblog

Tạo nút lên đầu trang cho blogspot - Back to top for Blogspot

Một số tiện ích cuộn lên đầu trang(Back to top) cho blogspot trước đây nhiều blog đã chia sẻ cho tới thời điểm này chỉ có tác dụng khi xem web trên máy tính bàn hay laptop còn khi xem trên thiết bị di động không còn tác dụng.
Để theo kịp xu hướng lướt web chủ yếu trên mobile của người sử dụng chúng ta cũng cần thay đổi code cho phù hợp.

Tạo nút lên đầu trang cho blogspot - Back to top for Blogspot
Dưới đây là một số code về tạo tiện ích cuộn lên đầu trang cho blogspot.Code ta có thể dùng đơn thuần là css hoặc sử dụng javascript.

Với code css có ưu điểm không ảnh hưởng tốc độ load của trang nhưng với việc sử dụng đoạn javascript nhỏ gọn thì tốc độ load trang cũng không hề hấn gì.

1- Code chỉ với css
Để cài đặt tiện ích lên đầu trang này bạn chỉ việc dán đoạn code sau đây ngay trên thẻ </body> là xong.
<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" ><img alt='back to top' title="Back to Top" src="http://4.bp.blogspot.com/-dnGqzb-dxgM/UyJPSTzycFI/AAAAAAAAmJo/opYAcj5ma30/s1600/top101.png"/></a>

2- Code với javascript và jquery
Bước 1:
Chèn file jquery vào trước thẻ </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
Bước 2:
Chèn đoạn javascript sau vào trước thẻ </body>
<script type='text/javascript'>
$(function(){$(window).scroll
(function(){if($(this).scrollTop()!=0){$("#noop-top").
fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").
click(function(){$("body,html").animate({scrollTop:0},800);
return false})});</script><a id='noop-top' style='display: none; position: fixed; 
bottom: 5px; right:5px; cursor:pointer;'><img alt='back to top' title="Back to Top" src="http://4.bp.blogspot.com/-dnGqzb-dxgM/UyJPSTzycFI/AAAAAAAAmJo/opYAcj5ma30/s1600/top101.png"/></a>

-Trong đó:
- bottom:5px là vị trí ảnh tính từ phía chân màn hình tính lên.
- right:5px là vị trí của ảnh so với lề phải.

3- Code cuộn lên đầu trang với Rocket glide cùng hiệu ứng mượt mà đẹp mắt

DEMO

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn chỉnh sửa HTML
4- Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>.
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(https://3.bp.blogspot.com/-bAL6l-0Ks9U/V65wSRsp6QI/AAAAAAAABn8/64Jrh_IJmIYjwy7NR4asXwHv9ycIq8mrACLcB/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(https://3.bp.blogspot.com/-bAL6l-0Ks9U/V65wSRsp6QI/AAAAAAAABn8/64Jrh_IJmIYjwy7NR4asXwHv9ycIq8mrACLcB/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}
#scrolltop{display:none}

5- Thêm thư viện jquery vào trước thẻ </head> (với những blog đã có rồi thì bỏ qua bước này)

<script async='' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>

6- Chèn đoạn code sau vào trước thẻ đóng </body>

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>

7- Sau đó bấm Lưu Mẫu.

Lưu ý

Với 2 code đầu tiên bạn có thể thay link ảnh theo ý mình.

Các bạn VÀO ĐÂY

Hoặc vào ĐÂY

Để kiếm thêm một số hình mũi tên, thích cái nào thì tải về upload lên, rồi lấy link hình thay vào

4 nhận xét :

  1. ở cái cách 2 sao em làm mà nó chỉ hiện ở trang chủ bác nhỉ?

    Trả lờiXóa
    Trả lời
    1. Code vẫn hoạt động bình thường.
      Thứ cài code đó vào blog khác xem có vấn đề gì ko.Nếu ko thì có thể do xung đột javascript với js nào đó của blog chỉ dùng cho trang item.
      Thử cài cái cách 3 xem

      Xóa