Wednesday, June 28, 2017
728x90 V3

How to add Scroll to top button on Blogger blog

Scroll to the top/Go to top/Top/.You know about those buttons right? It’s useful because some sites got a big homepage and when visitors want to go to the top of the page they need to scroll like a maniac well this button will help them. I personally use this button on all of my sites, so let’s find out how to add Scroll to top button on your blog!

 

Make a backup

Before we start you should make a backup for your site.You can make mistake and then what? So it’s safe to have backup, so let’s go to a Blogger Dashboard > Template  , in the right upper corner you will see “Backup / Restore” button, like on the picture below.

how to backup blogger blog

A new window will come up, you will see “Download full template” button, like on the picture below, click on it and download your blog. Now you have your backup and you can move on!

how to backup blogger blog 1

1. Button without image

This first button is without an image,its just a simple button with words and function. It’s simple and clean, it doesn’t take too much space. Here is the preview:

Screenshot_6

Add a gadget

Log in into your Blogger Dashboard then go to the Layout page from your side of the menu, like in the picture below. Click on “Add a Gadget” link when you choose where you want your clock to show up.

Screenshot_1

 

When you click on link “Add a Gadget” a new window will show up, like on the picture bellow, choose “HTML/JavaScript” gadget.

tutorijal2
A new window will come up, now you need to paste a code from bellow, like on the picture bellow. Save the gadget and the new layout!

Code:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script><script>// <![CDATA[
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.backtotop’).fadeIn(duration);
} else {
jQuery(‘.backtotop’).fadeOut(duration);
}
});

jQuery(‘.backtotop’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
// ]]></script><a class=”backtotop” href=”#”>Scroll to Top</a>

how to add scroll to top button on blogger

 

Edit HTML

Now go to Blogger Dashboard > Template and click on the “Edit HTML” button, like on the picture below.

how to edit html blogger

Now when you’re in HTML document of the site just click anywhere in the document and hit  CTRL+F, n the search box type tag from bellow:

]]></b:skin>

Hit ENTER. Now right above this code put the code from below:

.backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */
font-size: 12px; /* changes size of text */
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */
letter-spacing: 1.0px; /* space between letters */
}

.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
}

That’s it, now you will have a simple “Scroll to top” button on your website.

2. Button with image

The same steps just in the new gadget add the code from bellow:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery(‘.backtotop’).fadeIn(duration);
} else {
jQuery(‘.backtotop’).fadeOut(duration);
}
});

jQuery(‘.backtotop’).click(function(event) {
event.preventDefault();
jQuery(‘html, body’).animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<a href=”#” class=”backtotop”><img src=”DIRECT IMAGE URL” alt=”Back To Top”></a>

Now change the text DIRECT IMAGE URL  with the link the of image you want to use for the button. Remember IMAGE URL not SITE URL!

And again go to your HTML document, click anywhere do CTRL+F function and search for the tag:

]]></b:skin>

Hit ENTER. Now right above this code put the code from below:

backtotop {
position: fixed;
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
color: #000000; /* color of text */
background-color: #ffffff; /* background color of button */
font-size: 12px; /* changes size of text */
padding: 10px; /* add space around the text */
text-transform: uppercase; /* change text to all caps */
letter-spacing: 1.0px; /* space between letters */
}
.backtotop:hover {
background-color: #333333; /* color of background on hover over */
color: #ffffff; /* color of text on hover over */
text-decoration: none; /* no underline */
bottom: 10px; /* increase value to move position up */
right: 0px; /* increase value to move position left */
padding: 10px; /* add space around the text */
}

 

That’s it, save your document and enjoy in your new “Scroll to top” button with the image you want. I hope that this tutorial helped you and stay tutioned!
Credits for the code goes to 
Xomisse blog !

About Dimitrije Zivadinovic (Di)

Dimitrije Zivadinovic (Di)
Hey there, I'm Dimitrije Zivadinovic and this is my blog! I am a blogger, and.. No i am just a blogger, i know something about blogging platforms and i wanted to share my knowledge with you. If you have anything to ask me, feel free to hit me up via social media or leave a comment down bellow!

Check Also

How to add a logo to your Blogger blog

Blog isn’t a blog without a nice logo, so is it simple to insert custom ...

Leave a Reply

Your email address will not be published. Required fields are marked *