Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks / Other » Add Back To Top Button To Your Blogger Blog. +19 Different Styles And More.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

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

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

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

38,371 views

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.

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png

back to top For Blogger

http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png

back to top For Blogger

http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png

back to top For Blogger

http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png

back to top For Blogger

http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40

back to top For Blogger

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png

back to top For Blogger

http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png

back to top For Blogger

http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png

back to top For Blogger

http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png

back to top For Blogger

http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png

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

<a href="#" id="backtotop"><img src="http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" /></a> 

paste it into your template code,

Step 3

Find the following code

<head>

And paste this code after it.

&lt;script src='http://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.

2. Text Back To Top Link with different styles And Colors
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 {
width:100px; /* Change Box Width*/
background:#F4FFBF; /* Change background color*/
border:1px solid #ccc; /* Change Border Style*/
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666; /* Change text color*/
text-decoration:none;
}

And please change it’s properties to fit and blend with your blog template,

Change 100 to lower or higher number to increase or decrease the size of the box.

Change 1px To change the border width.

Change #ccc to your favorite color code change the border color.

Change F4FFBF to your favorite background color code.

Change 666; to your favorite Text color code.

Note : You can get your favorite color codes via our new hex color codes generator here

Step 2

Find the following Code :

</body>

And before it, Paste the following code.

<a href="#" id="backtotop">Back to top</a>

To change the text on the button, just change Back to top to what ever you want,

Step 3

Find the following code

<head>

And paste this code after it.

&lt;script src='http://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.

Want To See Demo

to see it live please click here

Liked It ? Please Share

Comments

38 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Beschi says:

    To get an animated effect add these after <head>

    <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js’
    type=’text/javascript’></script>
    <script language="javascript">
    $(window).ready(function(){
    $(‘#backtotop’).click(function(e){
    e.preventDefault();
    $(‘html, body’).animate({scrollTop:0}, ‘slow’);
    });
    });
    </script>

  2. Ehtesham says:

    YES! πŸ˜€ I am gonna ad this πŸ˜€ Thanks!!!
    ~Ehtesham~

  3. Ehtesham says:

    WOW! I tried it and it works great, it also looks great πŸ˜€
    ~Ehtesham~

  4. BEBEN says:

    thanks MAX…its a awesome…thumbsup. Hmmm…Beschi…LoL…:P.

  5. use ful information i read your website evreday your blog is good thank you

  6. Max says:

    special thanks for Beschi
    thanks for ,Ehtesham, BEBEN and KAJARANGITHAN

  7. ajdpadbury says:

    A great tutorial and works perfectly, thanks again for all your hardwork, Max!:)

  8. Max says:

    @ ajdpadbury and lucky thanks very much.

  9. sanath says:

    yes…. it works. thanks

  10. Saeed says:

    I found this site very helpful to improve the appearance of my blogs.

  11. Max says:

    @ sanath, Saeed
    thanks guys, i happy to help you.

  12. Loan Rate >> How can I refinance my cc ... says:

    ..]other useful source of tips on this subjectis ,www.allblogtools.com,..]

  13. Chingy says:

    I added but it would not float, only stayed at the bottom after the footer T_T

  14. This kind of feature is a must for a blog which have multiple post in front pages. Thanks again.

  15. Endra says:

    i love to find this site, many usefull things here. thanks very much

  16. Max says:

    Thanks all,
    @ Chingy, please copy all the code and follow the exact instructions, it’s 100% working.

  17. BEBEN says:

    MAX : maybe this code $(’#backtotop’), that backtotop in css template different. Just cek that unique ID from css code (like me unique id is ‘backtop’)

  18. rosadtea says:

    nice, reali work.

  19. Trik Tips says:

    Thanks for it….

  20. Marty says:

    It didn’t work. I previewed instead of Saving Template. Glad I did.
    The button showed up, but this code put a scroll bar at the bottom of my blog, and I had to scroll right before the button was clickable.
    Any ideas on how to tweak the code to make it not do that?
    Thanks.

  21. Marty says:

    Tried it again on this blog. (different blog than the last one)
    No scrolling this time, but I think that was because of some other code I put on my other blog… but this time, the button was not even a clickable button…
    Any ideas why?
    Maybe it only works on blogger templates?
    Although I did find all three tags where to paste your code. Nothing changed in that way because I had used a diff template or anything.

  22. Max says:

    @ Marty show me the page that you use this widget on it please, this is a very wired problem.

  23. brian says:

    I just added this to my blog and I love it.. check it out!!! Thank you!

  24. hacker9 says:

    wow! that’s cool ,..i was searching for it,..and guess what your page was second on google search results. that’s amazing dude.
    am gonna add this button now,..thanks for sharing…….n keep sharing new things.

  25. Dony says:

    I just added this to my blog and I love it.. check it out!!! Thank you! love you :^-^

  26. John says:

    I can’t do it!
    When I scroll the page, the “back to top” image can’t stay at the right-bottom of the page.
    The “back to top” image stay at the bottom of the page.

    My blog is http://culturecustom.blogspot.com/

  27. Pyramid Geek says:

    This is so much fun. I haven’t used this, but have used a similar button. Check mine out!!

  28. mamalkay says:

    A great tutorial and works perfectly. tanks^10000 u are a good friend

  29. ilquer says:

    Thanks πŸ˜‰ I knew the first one but not the second one.Sharing is happiness!

  30. wendyl says:

    your tutorials are great and effective but this time i got a hard time searching for “” IDK why. i just can’t find it though help pls?

  31. Max says:

    thanks all for your comments, i really happy to fell that it helps.

  32. neodmarco says:

    Thanks so much for this great tutorial.Its realy work.
    Thanks once again.
    Neo from Malaysia.

  33. comedydogg says:

    Because 2 G’s are better than 1!

  34. Tharanga says:

    Thanks a lot, it’s most important and useful.
    Tharanga from Sri Lanka.

  35. headr says:

    thanks a lot! very useful..

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here