"How to Add Back to Top Button in Blogger" is a question from everyone who is new to the Blogger platform as this animation helps to create a better user experience. This widget animation is very easy 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 an image or an icon placed on the bottom of a webpage which has a long content which 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 at the right bottom of the screen. Otherwise, you can see a demo on our blogger.
In blogger, 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 Layout Link. Click on the layout link.
- Create HTML/Javascript Gadget. Create a new gadget where we will paste html,css and Jquery code.
- Paste "Back To Top" Code. Paste that code which you copied.
- Save Layout. Now click on the save.
<style>
#sbtbacktotop{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwcEL1EM4giT-OeneNe8-UF47L2hcgBdPHTaiGSEuDeK-qTXDkUKb9sj4uuYDYrBFo480Zj2hcZRMEpmQg5kOOQE9oFSNeaZZDKMJE8Dr-LoG3dprd8h-QTOGdBc1YvVIbcawb7mG2aEBo/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwcEL1EM4giT-OeneNe8-UF47L2hcgBdPHTaiGSEuDeK-qTXDkUKb9sj4uuYDYrBFo480Zj2hcZRMEpmQg5kOOQE9oFSNeaZZDKMJE8Dr-LoG3dprd8h-QTOGdBc1YvVIbcawb7mG2aEBo/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>
Post a Comment