“How to Add Back to Top Button in Blogger” is a question from everyone new to the Blogger platform as this animation helps create a better user experience. This widget animation is straightforward to implement in bloggers, as small changes need to be made to the code. Scroll-to-top or back-to-top buttons are most generally images or icons placed on the bottom of a webpage that has long content that has to scroll down for a long time to read.
Let’s try to know how it works. Initially, the button will hide, when you scroll more than “100px”, a button will be shown at the right bottom of the browser screen and this is our “back to top button”. If you click on that button you will reach the starting point of the blog page. After that button will automatically hide. This sounds interesting. The demo is already available on this page, scroll more than “100px” and see it at the right bottom of the screen. Otherwise, you can see a demo on our blogger.
In bloggers, this button will be very useful for the readers if the posts are so long, and after reading if they want to go to the top of your blog to go to the home page or to access the navigation bar of your website.
Steps to add Scroll to Top Button in Blogger
- Go to Blogger Dashboard. Now go to the blogger dashboard.
- Click On the Layout Link. Click on the layout link.
- Create HTML/Javascript Gadget. Please create a new gadget where we will paste HTML, CSS, and JQuery code.
- Paste the “Back To Top” Code. Paste the code that you copied.
- Save Layout. Now click on save.
<style>#sbtbacktotop{background: url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png) 0 0 no-repeat;height: 130px;width: 72px;padding:5px;position:fixed;bottom: 5px;right: 5px;cursor:pointer;transition:none;z-index:15;}#sbtbacktotop:hover{background:url(//1.bp.blogspot.com/-CH03QlSNpBY/UnCY1gMhmXI/AAAAAAAACaM/qZaVYNrP0-s/s1600/back-to-top-sprite-30224d9b.png)no-repeat;background-position: 0 -142px;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/><script type='text/javascript'>//<![CDATA[$(window).scroll(function(){if($(this).scrollTop()>100){$("#sbtbacktotop").removeAttr("href");$("#sbtbacktotop").stop().animate({bottom:"0"},{duration:100,queue:false})}else{$("#sbtbacktotop").stop().animate({bottom:"30000"},{duration:8000,queue:false})}});$(function(){$("#sbtbacktotop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});//]]></script><!-- Code provided to you by seorunk.com --><a href='#' id='sbtbacktotop'></a>Navigation is a crucial aspect of consideration in search engine optimization in any website. Back to top widget is a navigation mechanism that can enhance click-through rate an proper navigation reducing bounce rates. Many blogger templates come with a read widget built-in. Incase your blogger template doesn’t come with the widget, this will significantly improve your blogger website.
That’s all enjoy your widget. Find more widgets here
