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.
