You have seen 'back to top' scrolling image at right side on many blogs. Back to top link used to scroll page up quickly without using mouse or arrow keys.There are may tricks for scrolling back to top image button but as a human being we like simple and easy methods. In this trick I just writing a very simple blogger widget for scrolling back to top image button for
blogspot blogs.In this era of increasingly sophisticated you know visitors likes a blog use a easy navigation because we will use the simple javascript with fade out and smooth scrolling effect and looks cool. You can change the image button with image you have.
Step 1. Go to Blogger templates edit HTML section...
Step 2. Search for </head> and paste following javascript before it.
Step 3. Search </body> in your template and paste following code before it.
Step 4. Save your template. You can change image highlighted in red above. Example of image button is below for your ref.
blogspot blogs.In this era of increasingly sophisticated you know visitors likes a blog use a easy navigation because we will use the simple javascript with fade out and smooth scrolling effect and looks cool. You can change the image button with image you have.
Let start how to create scrolling back to top image button on right side of blog.
Step 1. Go to Blogger templates edit HTML section...
Step 2. Search for </head> and paste following javascript before it.
<script type='text/javascript'>
$(document).ready(function(){
// hide #back-to-top first
$("#back-to-top").hide();
// fade in #back-to-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-to-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
Step 3. Search </body> in your template and paste following code before it.
<div id='back-to-top'>
<a rel="nofollow" style="float: right; padding-right:26px; z-index: 999999;bottom:10px;right:5px; position: fixed;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXTGKmgJ7JhUZA8vCmay0XeHpzCTdRWOeEDUDcQ7w2aCWDjOuFzpzJ_09i47rHFvP2OROZndhftAnRs00kuhEiLZvHHxtLa5skGh5zX1prZxX0RwDhUIf8K6sybw0_khoDAkSVk8SFi88/s1600/protop.png" /></a></div>
Step 4. Save your template. You can change image highlighted in red above. Example of image button is below for your ref.
If you liked the trick pl consider sharing it with friends. You can use photoshop to create buttons..
0 comments:
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).
Post a Comment