If you love to display quite a larger number of posts in your blog front page thereby increasing the displayed-height of your website. Or by default your template shows more number of posts in homepage, it becomes quite a cumbersome work for a reader to move all the way to top once s/he has reached to bottom reading all the contents.
In such case, adding Back to Top button/arrow is being recommended to make navigation along your blog easier for readers. Therefore, today let us learn how to add this button in your blog.
Login to your blog>Click on Template>Click on Edit HTML>Find (Ctrl+F): <head> and add given code below it:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Once you're done adding above code, click on Save Template. Now Click on Layout>Add a Gadget>Choose HTML/JavaScript>Keep Title blank>In content, paste the given code:
<style>
.ks-back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style><br />
<img class="ks-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5BD86yaSoXpEUThfyswgYK5JviFX_nOv02U7R8CHQi2I5PBwE-O41Ko49XHEZksnkW0evs0LQsOfE5K0cFMNGxnVP5WKRYcb8J27kld3uWMuMoj3hDg4AxZ5VrHksH8E6vBaujituNc/s1600/6.png" /><br />
<script type="text/javascript">
/*****www.sherutenzin.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.ks-back-to-top').fadeIn(duration);
} else { //www.sherutenzin.com
jQuery('.ks-back-to-top').fadeOut(duration);
}
});
jQuery('.ks-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
.ks-back-to-top {
position: fixed;
bottom: 2em;
right: 15px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style><br />
<img class="ks-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV5BD86yaSoXpEUThfyswgYK5JviFX_nOv02U7R8CHQi2I5PBwE-O41Ko49XHEZksnkW0evs0LQsOfE5K0cFMNGxnVP5WKRYcb8J27kld3uWMuMoj3hDg4AxZ5VrHksH8E6vBaujituNc/s1600/6.png" /><br />
<script type="text/javascript">
/*****www.sherutenzin.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.ks-back-to-top').fadeIn(duration);
} else { //www.sherutenzin.com
jQuery('.ks-back-to-top').fadeOut(duration);
}
});
jQuery('.ks-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
Click Save. It's being added in your blog. You can re-position it by means of drag-and-drop. Usually it's advised to keep at the footer or just below post body space. Hope you got your button. Cheers!
No comments:
Read our comment Policy to know your rights & responsibilities before actually leaving a comment for this article.