Back To Top Button Widget For Blogger ~ Tricky Tricks 4U

Hello readers!! Adding a back to top button widget in blogger is very useful stuff and it is one of the most important widget which you need to install for you visitors to make them feel comfortable with your blogs. In some situations the blog post which is long enough or having more over 100 comments you really need this kind of widget so that the visitor can easily reach to the top of your blog so the visitor will not face any tiredness while scrolling up to the page.
Now lets get back to our widget. The widget looks very cute and smooth. lets see a demo before adding the widget into your blog.You can check the live demo at our blog or you can check the clear view at our demo blog by clicking the demo button.

How to Install Rocket Back To Top Button Widget For Blogger :-

The steps are so simple and easy that any new blogger will not face any kind of problem to install it in their blog.

Go To Blogger.com >> Your Blog >> Template
Now Backup your template.
Then select Edit HTML >> Proceed
Search for and just below </body> under it paste the following code.

<style>
#rocketbacktotop{
background: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLsFSJFqlxy5HmNaWg2Sl-M5tEXbUoSoevs0kFiKy-zZAC0wgtg5NxU_LzKz3tVQgN-3UW_3gapBCzktlUMf1mgxHo3oYVVEZ9iRa6zocyOgnUvWOizS1MuleM8X_3EVJTo-7WCYasgJ0g/s1600/back-to-top-sprite-30224d9b.png&#39;) 0 0 no-repeat;
height: 130px;
width: 72px;
padding:5px;
position:fixed;
bottom: 5px;
right: 5px;
cursor:pointer;
    z-indez:1;
}
  #rocketbacktotop:hover{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLsFSJFqlxy5HmNaWg2Sl-M5tEXbUoSoevs0kFiKy-zZAC0wgtg5NxU_LzKz3tVQgN-3UW_3gapBCzktlUMf1mgxHo3oYVVEZ9iRa6zocyOgnUvWOizS1MuleM8X_3EVJTo-7WCYasgJ0g/s1600/back-to-top-sprite-30224d9b.png)no-repeat;
background-position: 0 -142px;
}
</style>
<!-- Back to top button by Krunal Shah -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100)
{$("#rocketbacktotop").removeAttr("href");$("#rocketbacktotop").stop().animate(
{bottom:"0"},{duration:100,queue:false})}
else{$("#rocketbacktotop").stop().animate({bottom:"30000"},
{duration:8000,queue:false})}});$(function()
{$("#rocketbacktotop").click(function()
{$("html, body").animate({scrollTop:0},"slow");
return false})});
//]]>
</script>
<!-- Code provided to you by Trickytricks4u Blog -->
<a href='#' id='rocketbacktotop'/>

All Done : Now everything is completed just Save your Widget by pressing Save button.

From Editors Desk:-

Hope you have enjoyed the session of cool and interesting tutorial of "Back to top Button Widget For Blogger".we are trying to create more Blogger Widgets that benefits to you and your users. If you would face any problem to add this widget feel free to ask till then, Blessings and Happy Blogging.

Tricky Tricks 4U