Also Read

How To Add Stylish Back To Top Button In Blogger?

Back to top button is for easy scrolling for the site visitor. Sometimes there are long post in a site. Reader find it difficult to scroll the full page. It may hinder the user experience. 

What Is Back To Top Button?

A back to top button is a button with which a reader can easily go back to top after reading a long post with just a single click.

Where Do You Put The Back To Top Button?

A back to top button usually set at the bottom right corner of a site. Although a site owner can set it anywhere in the page if he knows some advance coding.

How Do I Add Stylish Back To Top Button In Blogger?

Here are the steps.

Step 1:

Go to Blogger dashboard.

Step 2:

Click Theme >Edit HTML.

Step 3:

Click anywhere in the code area.

Step 4:

Press Ctrl+F and search for ]]></b:skin>.

Step 5:

Copy the below code and paste it above ]]></b:skin>.

#mybacktotop{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WGA7IR9fbwTwkdMcBgZcisvOKswLG0qttA_pfw3ecYuxq5f8xWgB_PdcnlVtWLVIycPrlfMz2HG02fDxYD5pXW10owvfCWWuC-fRnMJvJCTNXrG1D5feFlN9dMlfhMtxScdW_bga2nWg/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; } #mybacktotop:hover{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WGA7IR9fbwTwkdMcBgZcisvOKswLG0qttA_pfw3ecYuxq5f8xWgB_PdcnlVtWLVIycPrlfMz2HG02fDxYD5pXW10owvfCWWuC-fRnMJvJCTNXrG1D5feFlN9dMlfhMtxScdW_bga2nWg/s1600/back-to-top-sprite-30224d9b.png)no-repeat; background-position: 0 -142px; }

Step 6:

Again press Ctrl+F and search for </body>.

Step 7:

Copy the below code and paste it above </body>.

<script type='text/javascript'> //<![CDATA[ $(window).scroll(function(){if($(this).scrollTop()>100) {$("#mybacktotop").removeAttr("href");$("#mybacktotop").stop().animate( {bottom:"0"},{duration:100,queue:false})} else{$("#mybacktotop").stop().animate({bottom:"30000"}, {duration:8000,queue:false})}});$(function() {$("#mybacktotop").click(function() {$("html, body").animate({scrollTop:0},"slow"); return false})}); //]]> </script> <a href='#' id='mybacktotop'/>

Step 8:

Save the theme.

You are done.

Hope you have successfully added stylish back to top button in blogger. If you liked this article please share it with your friends.