Ultimate magazine theme for WordPress.

- Advertisement -

- Advertisement -

How to Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.

0 77
Today we’ll learn a very easy and important trick, Specially if you have got a lot of content on you blog pages, And if you want your blog to be easy to use for your visitors, A back to top link or button on your blogspot blog will make it easier and faster to your visitors when it comes to fast exploring and browsing.
Ad
Now we’ll see how to add

  • 1. Image Back To Top Buttons With 19 Different Styles
  • 2. Text Back To Top Link with different styles And Colors
1. Image Back To Top Buttons With 19 Different Styles
Step 1
Ok, now go to your blogger account and go to, Dashboard >> Layout >> Edit html >> and please find the following code.
]]></b:skin>

 And before it add this code

#backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Step 2
Now find the following code.

</body> 
 and before it add the next code.

<a href="#" id="backtotop"><img src="Image-Url" alt="back to top" /></a>  

 But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop-5.png

 

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop4-1.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop3.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop4.png

 



https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop6.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop7.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop8.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop9.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop10.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop11.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop12.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop13.png
https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop14.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop15.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop16.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop17.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop18.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop20.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop19.png

https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop21.png

 After Replacing the Image-Url with your favorite button url, it should looks like this

<a href="#" id="backtotop"><img src="https://www.ngmtechnology.com/wp-content/uploads/2012/08/nobletop21.png
" alt="back to top" /></a>

paste it into your template code,
Step 3
Find the following code.
&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'&gt;&lt;/script&gt;
&lt;script language=&quot;javascript&quot;&gt;
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
&lt;/script&gt;

 and then click Save Template 
And you are done.








Disclosure: This page may contain external affiliate links that may result in us receiving a commission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.

- Advertisement -

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.