Scrolling Back To Top Button To Blogger

Scrolling Back To Top Button To Blogger

In case you are wondering how to add a smooth scrolling back to top button to blogger blog which moves on the side of your blog, then follow the below steps to add it easily without having to worry about load speed or jquery.

I personally hate using Jquery because it makes my blog load extremely slow, so I always prefer any script that does not have Jquery on it. This button is a very simple one that allows navigating to the bottom and top of your blog in no time.

How To Add Scrolling Back To Top Button To Blogger

Step 1: Log in to blogger.com and select your blog
Step 2: On the menu select ‘Template’ and then locate ‘Edit HTML’.
Step 3: Using CTRL + F search for </head>
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 />

Step 5: Save template and visit your blog.

Final Words

Scrolling back to top button is very important for our blog and every blogger should try to have it enabled since it allows the reader to easily scroll to the top after reaching to any segment of the theme.
Widget Credit : MastamVan

Related Articles

  • How I Registered My Domain For Less Than $4 (NGN1300) On DomainKing
  • add-thumbnail-to-recent-post-demo How to Add Thumbnails to WordPress Recent Post Without a Plugin
  • shared web hosting Top 10 Cheapest Shared Web Hosting Solutions For 2018
  • 13 Free How to Ways to Increase BlogSpot Mobile SEO
  • Blogger Recent Post Widget With Home, Next And Previous Option
  • How To Setup FeedBurner On BlogSpot Blog (Free Email Subscription Service)
  • One Comment - Post Yours! How to? ▼

    Leave a Reply

    0 Shares
    Share
    +1
    Tweet
    Pin
    Share
    Stumble