Tạo nút lên đầu trang cho blogspot

Tạo nút lên đầu trang cho blogspot

Tạo nút lên đầu trang cho blogspot

Tạo nút lên đầu trang cho blogspot hay còn gọi là Back to top rất cần thiết nếu trang web, blog của bạn chia sẻ có bài viết dài, nó có tác dụng giúp người dùng trở lên Menu dễ dàng và nhanh chóng qua một cái click.

Có rất nhiều cách tạo nút lên đầu trang cho blogspot tuy nhiên vấn đề chúng ta cần quan tâm khi thêm một tiện ích mới lên website đó là:

Tùy biến được hình ảnh của nút lên đầu trang, đảm bảo được yêu cầu không ảnh hưởng đến SEO đó là tốc độ tải trang. Nếu code quá dài, rườm rà sẽ làm nặng Blogspot và tốc độ tải sẽ chậm lại gây ảnh hưởng xấu đến cảm nhận của người dùng. Và phải có hiệu ứng đẹp, tương thích với cả điện thoại di động lẫn máy vi tính.

Tôi xin giới thiệu đến các bạn một số cách tạo nút lên đầu trang cho blogspot đơn giản mà không hề ảnh hưởng đến SEO, tốc độ tải trang của website, hiện cả trên phiên bản máy vi tính lẫn điện thoại di động như sau:

1. Cách 1: Sử dụng CSS: cách này cũng được chia sẻ trên khá nhiều blog ưu điểm là nhanh chóng, chỉ với 1 đoạn code, không hề ảnh hưởng đến tốc độ website, nhược điểm là icon luôn luôn hiện lên trên blog.

Các bạn vào blog của mình >> Chủ đề >> Chỉnh sửa HTML >> ấn Ctrl + F tìm đến thẻ </body> sau đó sử dụng đoạn code dưới đây cho vào trước thẻ </body> của blogspot là được.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijjG9IQCQoZ39W4eM3V0-lmbEqn8frPaBhg9n9KB5QkxOu8NP67qsUUw9Y1EFMr6l1Pd-xTsnMooBDTOqxvoxvuFB9yYPx9S0syf9hIBPiyz3w1C_WAhIaR820eNVueGTAF9M4G-9kq6g/w140-h140-p/ve-dau-trang.png"/></a>

2. Cách 2: Sử dụng JavaScript: Cách này cần làm thêm một bước nữa so với cách trên nhưng cách trên nhưng cái hay là chỉ khi nào bạn di chuyển xuống dưới trang blogspot biểu tượng Icon của nút lên đầu trang (back to top ) mới hiện lên. Đầu tiên các bạn sử dụng đoạn code dưới đây thêm 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'/>

Tiếp theo các bạn sử dụng đoạn code sau thêm 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfaw-5fwWoXhU0vUxaFyPguKfOBPk2-iMFcIaY24ky54aZaEODhiWzTanngeEAN4mhGLW_bo9WJr6Q3CQjIxyl1iu2Ty3Z74eNu3TQhrs99yNmiHBFuZuXN6RXwBgmYqwyHdJJpHput1w/h120/ve-dau-trang.png"/></a>

Trong code: 800 là tốc độ khi cuộn trang, bạn có thể chỉnh theo ý muốn. Cũng có thể thay nút bằng cách thay link ảnh khác vào. Cách này tốc độ tải trang sẽ không nhanh bằng cách 1 nhưng hiệu ứng sẽ đẹp hơn.

3. Cách 3: Tạo nút từ trang Scrolltotop: bạn vào trang scrolltotop tìm mẫu hợp với mình rồi coppy lại và vào blog >> Chỉnh sửa HTML >> Chèn đoạn code sau trên thẻ </body> như sau:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">var scrolltotop={setting:{startline:100,scrollto:0,scrollduration:1e3,fadeduration:[500,100]},controlHTML:'<img src="https://i1155.photobucket.com/albums/p559/scrolltotop/arrow26.png" />',controlattrs:{offsetx:5,offsety:5},anchorkeyword:"#top",state:{isvisible:!1,shouldvisible:!1},scrollup:function(){this.cssfixedsupport||this.$control.css({opacity:0});var t=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);t="string"==typeof t&&1==jQuery("#"+t).length?jQuery("#"+t).offset().top:0,this.$body.animate({scrollTop:t},this.setting.scrollduration)},keepfixed:function(){var t=jQuery(window),o=t.scrollLeft()+t.width()-this.$control.width()-this.controlattrs.offsetx,s=t.scrollTop()+t.height()-this.$control.height()-this.controlattrs.offsety;this.$control.css({left:o+"px",top:s+"px"})},togglecontrol:function(){var t=jQuery(window).scrollTop();this.cssfixedsupport||this.keepfixed(),this.state.shouldvisible=t>=this.setting.startline?!0:!1,this.state.shouldvisible&&!this.state.isvisible?(this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]),this.state.isvisible=!0):0==this.state.shouldvisible&&this.state.isvisible&&(this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]),this.state.isvisible=!1)},init:function(){jQuery(document).ready(function(t){var o=scrolltotop,s=document.all;o.cssfixedsupport=!s||s&&"CSS1Compat"==document.compatMode&&window.XMLHttpRequest,o.$body=t(window.opera?"CSS1Compat"==document.compatMode?"html":"body":"html,body"),o.$control=t('<div id="topcontrol"> '+o.controlHTML+"</div> ").css({position:o.cssfixedsupport?"fixed":"absolute",bottom:o.controlattrs.offsety,right:o.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"Scroll to Top"}).click(function(){return o.scrollup(),!1}).appendTo("body"),document.all&&!window.XMLHttpRequest&&""!=o.$control.text()&&o.$control.css({width:o.$control.width()}),o.togglecontrol(),t('a[href="'+o.anchorkeyword+'"]').click(function(){return o.scrollup(),!1}),t(window).bind("scroll resize",function(t){o.togglecontrol()})})}};scrolltotop.init();</script><noscript>Not seeing a <a href="https://www.scrolltotop.com/">Scroll to Top Button</a>? Go to our FAQ page for more info.</noscript>

* Lời kết:

Như vậy, bạn đã biết cách tạo nút lên đầu trang cho blogspot rồi phải không? Nếu như gặp bất cứ vấn đề nào hoặc thắc mắc gì trong khi thực hiện thì hãy để lại bình luận trong bài viết này nhé!

Nguồn: Tham khảo.