How To Implement Scrolling Back To Top Button To Blogger Blog

Good day everyone,, I was just surfing round the web and I came across a very nice widget... The Scrolling back to the top widget, good for bloggers... So I decided to show you guys how i implement it on my blog.

First Step: Log in to blogger dashboard...

Step 2: On the menu navigate to 'Theme' and then locate 'Edit HTML'.


Step 3: Click anywhere in the box, press CTRL + F and search for the </head> tag


Step 4: Just above </head> paste the below code.


<br />
<style type='text/css'>
/*<![CDATA[*/
/*Back To Top*/
.scroll-button{box-sizing:border-box;font-size:1.2rem;line-height:2rem;padding:3px;width:38px;height:38px;right:20px;bottom:20px;visibility:visible;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);opacity:0.5;cursor:pointer;transition:all 1.2s;-webkit-transition:all 1.2s;-moz-transition:all 1.2s;-ms-transition:all 1.2s;-o-transition:all 1.2s;background:none;border:solid 2px rgb(210,104,211);color:rgb(249,104,211);border-radius:0%;position:fixed}
.scroll-button:hover{filter:alpha(opacity=100);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1}
.scroll-button--hidden{filter:alpha(opacity=0);filter:progd:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity:0;visibility:hidden}
/*]]>
</style>
<script type='text/javascript'>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/backtop.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
<br />

Then finally, save template.....

Note:Scrolling back to top button is very important for our blog and every blogger should try to have it enabled since it helps your reader to easily scroll to the top after reaching to the bottom of the theme/blog..