This is one of cool trick for blogger to create a smooth scroll to top. If you have lot of content on you blog pages, and if you want to make your blog to be easy to navigate for your readers, a back to top button will make it easy and perfect.
Steps:
Step 1: Log on your blogger account and Go to, Dashboard >> Layout >> Edit html.
Step 2: Now find the following tag by using "Ctrl + F".
]]></b:skin>
Step 3: Copy and Paste below code before the above tag.
#backtotop {
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
}
Step 4: Now find the </body> tag by using "Ctrl + F" and copy and paste below code before the </body> tag.
<a href="#" id="backtotop"><img src="Image Url" alt="back to top" /></a>
Step 5: Now select your free back to top button in the below list and copy and paste it’s Image URL in to the place of "Image Url" of above code.
Step 6: Find the <head> tag by using "Ctrl + F" and copy and paste below code after the <head> tag.
<!-- start back to top -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
<!-- end back to top -->
Step 7: Finally “Save Template".
No comments:
Post a Comment