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

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

Posted By Max On Tuesday, November 3rd, 2009 In Blogger Tricks and Hacks

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

Views : 7,787 views
Rating :

Loading ...
Installation Error : Copy url & Click here
Broken Link : Copy url & Click here

38 responses so far!
Beschi ( 10:53 PM on 11/3/09 )
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>
Ehtesham ( 4:19 AM on 11/4/09 )
YES! I am gonna ad this Thanks!!!
~Ehtesham~
Ehtesham ( 4:33 AM on 11/4/09 )
WOW! I tried it and it works great, it also looks great
~Ehtesham~
BEBEN ( 9:50 AM on 11/4/09 )
thanks MAX…its a awesome…thumbsup. Hmmm…Beschi…LoL…:P.
KAJARANGITHAN ( 2:08 PM on 11/4/09 )
use ful information i read your website evreday your blog is good thank you
Max ( 3:40 PM on 11/4/09 )
special thanks for Beschi
thanks for ,Ehtesham, BEBEN and KAJARANGITHAN
ajdpadbury ( 7:41 AM on 11/5/09 )
A great tutorial and works perfectly, thanks again for all your hardwork, Max!:)
Blogger Yukarı Çık Butonu | Eray USTA ( 2:22 PM on 11/12/09 )
[...] Kaynak [...]
Max ( 6:17 PM on 11/13/09 )
@ ajdpadbury and lucky thanks very much.
sanath ( 9:34 PM on 11/16/09 )
yes…. it works. thanks
Saeed ( 5:43 AM on 11/20/09 )
I found this site very helpful to improve the appearance of my blogs.
Max ( 10:01 PM on 11/26/09 )
@ sanath, Saeed
thanks guys, i happy to help you.
Loan Rate >> How can I refinance my cc ... ( 6:16 AM on 11/27/09 )
..]other useful source of tips on this subjectis ,www.allblogtools.com,..]
Chingy ( 4:55 AM on 11/30/09 )
I added but it would not float, only stayed at the bottom after the footer T_T
Last Days Call ( 6:39 AM on 12/7/09 )
This kind of feature is a must for a blog which have multiple post in front pages. Thanks again.
Endra ( 7:04 AM on 12/21/09 )
i love to find this site, many usefull things here. thanks very much
Max ( 11:01 AM on 12/25/09 )
Thanks all,
@ Chingy, please copy all the code and follow the exact instructions, it’s 100% working.
BEBEN ( 8:48 PM on 1/3/10 )
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’)
rosadtea ( 9:00 AM on 1/13/10 )
nice, reali work.
Trik Tips ( 12:05 PM on 1/16/10 )
Thanks for it….
Marty ( 12:53 AM on 1/23/10 )
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.
Marty ( 11:18 PM on 1/30/10 )
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.
Max ( 10:00 AM on 2/12/10 )
@ Marty show me the page that you use this widget on it please, this is a very wired problem.
brian ( 2:34 PM on 3/19/10 )
I just added this to my blog and I love it.. check it out!!! Thank you!
hacker9 ( 12:06 AM on 4/16/10 )
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.
Max ( 7:50 AM on 4/16/10 )
thanks hacker9, i wish you like all out tutorials.
Dony ( 2:59 AM on 4/21/10 )
I just added this to my blog and I love it.. check it out!!! Thank you! love you :^-^
John ( 4:03 AM on 4/22/10 )
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/
Pyramid Geek ( 7:58 PM on 4/24/10 )
This is so much fun. I haven’t used this, but have used a similar button. Check mine out!!
mamalkay ( 5:45 PM on 5/13/10 )
A great tutorial and works perfectly. tanks^10000 u are a good friend
ilquer ( 9:41 AM on 5/18/10 )
Thanks I knew the first one but not the second one.Sharing is happiness!
wendyl ( 1:52 AM on 6/2/10 )
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?
Max ( 7:57 AM on 6/3/10 )
hi john, please make sure to follow the 3 steps.
Max ( 7:58 AM on 6/3/10 )
thanks all for your comments, i really happy to fell that it helps.
neodmarco ( 10:45 AM on 6/7/10 )
Thanks so much for this great tutorial.Its realy work.
Thanks once again.
Neo from Malaysia.
comedydogg ( 9:42 AM on 6/8/10 )
Because 2 G’s are better than 1!
Tharanga ( 8:02 AM on 6/16/10 )
Thanks a lot, it’s most important and useful.
Tharanga from Sri Lanka.
headr ( 1:16 AM on 6/24/10 )
thanks a lot! very useful..

Notepad Chaos 2 3 puppies Retro Flower Garden MyShowcase Floral Design MetallicShine

Blogger Templates

Blogger Tricks

Blogger Lists

Blogger Tools

Blogger News

By Max

Blogger Tricks