Smooth Back To Top Widget For Blogger

Back to widget is one of the best widget for blogger. We are using animated image back to top widget. To use this widget just add some CSS code in your blog template. Many blogger use back to top widget , but this widget is very unique because this widget is made of CSS codes. But there is some problem becuase of background transference in images. So this is the latest back to top widget for blogger.

Some posts are very long because of codes and pictures so when we came down and at same time to need to back to of the page , so if you need back to top the page this widget will help to goto top of the page.

You can easily implement this widget into your blogger blog with many changes that you need like background color and border. So now its time to implement this widget into blogger blog so follow the below steps.

• Login to blogger account.
• Template >> Edit HTML >>
• Press Ctrl+F and find ]]></b:skin>
• Paste the following code just below ]]></b:skin>

<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#2d95f7;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:46px;height:46px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 31px;
-moz-border-radius-topleft: 31px;
border-top-left-radius: 31px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style>

•  Now press again Ctrl+F and search </body> and paste the following code just above it.

<div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script>

• Click on save button and now see your blog.
• You can change back to top background color just goto and Color Code Generator just pic up your color and replace with #2d95f7.
• You can change border pixel by this code border:2px.