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.
0 comments:
Post a Comment