Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Add a Tumblr-like Back-to-top Button In Blogger

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

|| View All Tutorials ||

How To Add a Tumblr-like Back-to-top Button In Blogger

How To Add a Tumblr-like Back-to-top Button In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,154 views

In one of our previous posts, we featured a tutorial that shows you how to add different back-to-top buttons into your Blogger blog. This time we’ll show you another one that’ll teach you how to add a ‘Back-to-top’ button that is similar to Tumblr’s button design.

  • From you Blogger dashboard, head over to the Template page.
  • Click on the Edit HTML button and then hit Proceed.
  • Using Ctrl+F, look for the <head> tag.
  • Copy/paste this line of code above or before it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
  • Using Ctrl+F again, look for ]]></b:skin> this time and copy/paste the following CSS code below right before it.
#scroll-top {
 background-color: #777777;
 border-radius: 24px;
 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
 color: #FFFFFF;
 cursor: pointer;
 display: block;
 font-family: Verdana;
 font-size: 2em;
 font-weight: bold;
 line-height: 2em;
 text-align: center;
 text-decoration: none;
 position:fixed;
 width: 48px; 
 height: 48px;
 bottom:30px; 
 right:20px;
 opacity:0.85;
 transition:opacity 0.25s ease 0s;
}

#scroll-top:hover{
 opacity: 1;
 color: #FFFFFF;
}

For the button to perfectly blend or match your blog’s theme and color, don’t forget to edit the values of the following CSS attributes: Background-color, color, font-family, font-size, and line-height. The last three attributes determine the appearance of the caret symbol (^). You might also want to adjust border-radius in case you want to change the curvature of the rounded corners of the square.

  • Lastly, to add the functionality of the button, we add the following JavaScript code into the HTML. Using Ctrl+F again, look for the </body> tag and paste the following.
<script type='text/javascript'>
$(function() {
 $.fn.scrolltoTop = function() {
 var scrollLink = $(this), 
 win = $(window);
 scrollLink.hide();
 if (win.scrollTop() != '0'){
 scrollLink.fadeIn('slow')
 }
 win.scroll(function() {
 if (win.scrollTop() == '0'){
 scrollLink.fadeOut('slow')
 } 
 else{
 scrollLink.fadeIn('slow')
 }
 });
 scrollLink.click(function() {
 $('html, body').animate({
 scrollTop: 0
 }, 'slow')
 })
 }   
});
$(function() {
 $('#scroll-top').scrolltoTop();
});
</script>
<a id='scroll-top' href='#' title='Scroll to top'>^</a>     

 

  • Save your template, and preview your blog to see if the button looks according to your satisfaction.

Congratulations! You’re done.

Liked It ? Please Share

Comments

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

  1. wine dine says:

    Thanks for the code. Will need to try some buttons on the blog for http://winedinedaily.com .

  2. Tutozen says:

    Can i see a Demo Please.

  3. Hello there! This is my first visit to your blog!
    We are a collection of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on.
    You have done a extraordinary job!

  4. Orlando Jobs says:

    Excellent post. I was checking continuously this blog and I am impressed!
    Extremely helpful info specifically the last phase :
    ) I handle such information a lot. I was seeking this particular
    information for a long time. Thanks and good luck.

    Visit my blog Orlando Jobs

  5. phen375 says:

    Kate Bryant has done cover art for Summer Fridays since they started.

  6. fhnm says:

    CTTA is participant financed and does not charge for finding solutions; however, it is not pay to play. Prospect Mortgage

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