Back To Top Widget For Blogger/BlogSpot (Fast & Stylish)

We use many types of widgets to make our blog stylish and attractive,
which may or may not be useful for our blog, but we use it

But some Blogger/Blogpost also has a widget that makes our blog look
good as well as it is also helpful for good navigation of our blog and that
widget is bake to top widget for blogger.

So let’s know what this bake to top widget is and how you can use it in your
blogger, So let’s start

Back to Top Button Widget for Blogger/Blogspot

Bake to Top is an arrow that helps in navigation of the blog as a button.

Bake to top button is a benefit of adding to the blogger that whenever
a reader will come to your blog and it scrolls down your post and the
length of your post is more and the reader has gone very down and if the user
has to go back to the top section of the post above, then he can go up
by clicking on the Back to Top button.

So let’s now know how you can add to the top button widget blogger.

How to Add Back To Top Widget For Blogger/Blogspot

Step 1: First login your Blogger Account

(Now your blog dashboard will open in front of you)

Step 2: Now you Click on Layout

(When you click on Layout, the Blogger Layout window will open in front of
you.)

Step 3: click on the Add Gadget of that section.

(Then you will have a blogger gadget popup show)

Step 4: Now
you Click on HTML / JavaScript

Step 5: Then paste the back to top button widget code in HTML / JavaScript.

<script
src=’http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js’></script>

<script>

jQuery(document).ready(function() {

var offset = 220;

var duration = 500;

jQuery(window).scroll(function() {

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

jQuery(‘.back-to-top’).fadeIn(duration);

} else {

jQuery(‘.back-to-top’).fadeOut(duration);}});

jQuery(‘.back-to-top’).click(function(event) {

event.preventDefault();

jQuery(‘html, body’).animate({scrollTop: 0}, duration);

return false;})});

</script>

<style>

div#page {

max-width: 900px;

margin-left: auto;

margin-right: auto;

padding: 20px;

}

.back-to-top {

position: fixed;

bottom: 2em;

right: 0px;

text-decoration: none;

color: #000000;

font-size: 12px;

padding: 1em;

display: none;

}

.back-to-top:hover {

text-decoration: none;

}

</style>

<a href=”#” class=”back-to-top”>

<i class=’fa fa-toggle-up’
style=’font-size:36px’/></i>

</a>

Step5: Click on Save 

Also Read:Preloader For Blogger/BlogSpot 

Back To Top Button With Picture

If you want to change the style of your back to the top button then you can see the code shown in Red color above. Remove and paste the code of the button shown below.

If you want to change the size of the button, you can change its
height and width change.