Back to Top Buttons/Widgets for Blogger CSS only!

It is necessary for every site owner or blogger to provide a user friendly environment to his visitors so that the visitors can easily browse the site. Because if you don't provide the friendly environment then the visitor just leave your site after sometime and move on to the next one because they have more options so they only choose that site which is more easy to navigate and have quality content.

Adding a back to top button to blogger can be proved very helpful and increase the users experience. The back to top button is very useful for readers. If you are the guy who is looking for the back to top button for blogger site then luckily you are at right place because here I am going to share a back to top widget for blogger with CSS only. Means no icons or images will be used. The benefit of this is that it iwll not effect your site load time we are going to use css styling instead of images.Let's get started:

How to Add back to top widget/button to Blogger

In order to add different styles of back to top button, first you need to install the back to top widget. So, for this follow the below easy steps:

• Go to your Blogger dashboard
• Click on Template tab
• Now search for </body> tag within the template using CTRL+F for easiness..
• Now paste the below chunk of code Just above the </body> tag..

 <a href="#" class="top">&uarr;</a><script>$(document).ready(function() {

    var offset=250, // At what pixels show Back to Top Button

    scrollDuration=300; // Duration of scrolling to top

        $(window).scroll(function() {

   if ($(this).scrollTop() > offset) {

                $('.top').fadeIn(500); // Time(in Milliseconds) of appearing of the Button when scrolling down.

                } else {

$('.top').fadeOut(500); // Time(in Milliseconds) of disappearing of Button when scrolling up.

}

});

// Smooth animation when scrolling

$('.top').click(function(event) {

event.preventDefault();

            $('html, body').animate({

       scrollTop: 0}, scrollDuration);

                })

});</sctipt>

• Now move on to the next step which is adding css style.
• For this again to go Blogger dashboard >> Template tab >> Edit HTML
• Now search for </head> tag.
• Now just above the </head> tag paste the following chunk of code:

<style>
  .top{
background-color: #F5AB35;
bottom: 2em;
color: #fff;
display: none;
opacity:0.6;
padding: 1.5em;
position: fixed;
right: 1.5em;
text-decoration: none;
}
.top:hover{
opacity:1;
transition:1s;
}
</style>

That's all you have successfully installed the back to top blogger widget or you can say button.

Final Words

This the back to top widget for you guys. This widget does not use any images but it is built with CSS which means that by using this widget your site load time will never effect but on the other hand the back to top buttons which use images can effect the load time. So, I recommend you guys that to use this widget instead of that old one which uses image button. Hope that you find this widget helpful. Do share this with others on social networks. STAY BLESSED, STAY HAPPY and HAPPY BLOGGING :D