Textual description of firstImageUrl

Add Back To Top Button for Blogger Blogspot Blog

More Stuff

Like Facebook Page

Back To Top Button for Blogger Blogspot Blog helps to scroll back to the top on one click. In this Blog Customization post, we are going to Add Back To Top Button On Blogger Blogspot Blog. Here is a simple button that you can easily add or customize as your blog requirement. Follow the steps below to add Back To Top Button.
Add Back To Top Button for Blogger Blogspot Blog

Add Back To Top Button On Blogger Blogspot Blog

Recommended: Before editing your template please backup your current template, Just to be safe.

1. Login your Blogger Dashboard.
2. Go to Theme Tab
3. Edit HTML
4. Click anywhere inside code and press CTRL+F to search </body>
5. Copy the code below and paste just above </body> tag.
6. Click on Save template and check your blog.


1. Login your Blogger Dashboard
2. Click on Layout Tab
3. Click on Add Gadget (any).
4. Select HTML/JavaScript Gadget.
5. Leave blank for the title and Copy the whole code and paste on the content area.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
} else {

jQuery('.backtotop').click(function(event) {
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;

<a href="#" class="backtotop">Back To Top</a>
.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 */
6. Click on Save and You're done. Check your blog.

More From Our Site:

Textual description of firstImageUrl

No comments

About Us | HTML to XML Converter | Webmail Service | Nepali Unicode | Terms and Conditions | Privacy Policy | Contact Us | DMCA.com Protection Status