How to Add Responsive Back To Top Button On Blogger

Add a "Back To Top" Button To Blogger

How to Add Responsive  Back To Top Button On Blogger

Hello we are back again with an amazing best blogging tips; You may have seen many types back to top button for blogger also looking for many sites, Before we share already how to add back to top button but there are very simple and also find bugs; but now you are landed right place because here in this article we shown how to add cool responsive and seo friendly fast work  back to top button on your blog. I hope you are like this button and implement your blog.

Before Adding Back To Top Button We Know Why Important This Button*

This Button will help your readers to easily scroll your blog from bottom to top page.
It will help to easily scroll your blog by saving your time.
This tool will help your blog to increase user experience.

So it is very important to use this button in every blog website.

Read Also: How To Create a Newsletter Box For Blogger

How to Add Responsive Back to Top Button:

?Go to your Blogger Dashboard >Template > Edit HTML. 

?Find  </head> Tag.

Needed Below jQuery JavaScript library Add Your Blog Page Before </head> Tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Pls Note*  If Your Template Have Already Any Version This Plugin Then No Need To Be Added. 

?Now Need To Be Adding CSS Code ; For Putting CSS Search/Find   ]]></b:skin> Tag

?Next Paste Following Css Before  ]]></b:skin> Tag.

.web-top{display:block;width:37px;height:37px;line-height:35px;text-align:center;font-size:18px;position:fixed;bottom:-40px;right:20px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;background-color:#404040;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.web-top.show{bottom:20px}.web-top:hover{background-color:#0A97F9;color:#FFF}

?Now Need To Add Button On Your Bottom of Page Below End of Close </footer> Tag

<div class='web-top'>
<span class='web-top-icon'>
<i class='fa fa-angle-up'></i>
</span>
</div>

?Next Need To Be Added Java-script On Before </body> Tag

?Put Below Java-script Code On Above/Before </body> Tag
 

$(window).scroll(function(event){var scroll=$(window).scrollTop();if(scroll>=50){$(".web-top").addClass("show")}else{$(".web-top").removeClass("show")}});$('a').click(function(){$('html, body').animate({scrollTop:$($(this).attr('href')).offset().top},600)})

That's It ! Now Save Your Theme view your blog. 

Advantage Of This Widget: ??

??This Widget Specially Design For Stylish Effect.??Fully Responsive.??Seo Friendly.??All Code Optimized.??No Need To Coding.??Faster Loading.??Base On CSS, HTML5, Font Awesome Icon.

??Scrolling Show & Hide Widget.

?? Stylish Hover Effect On Click.
??You Can Change Icon With Font awesome Icon.??View On Every Blog Posts and Pages.

?Additional Tips: 

You Can Play With This Widget On Your Blog Visitor To Hide Your Back To Top Button On Homepage ; When Visitor Click On Any Post Then It's Showing Post Inside. For Tutorial-

*Remove Above Java-script Library From Above </head> Tag.*

Author Note : ?? 

Thank you for stay to reading our article, hope this you are known "How to Add responsive Back To Top Button On Your Blogger", Also May Working This Tricks.
But still, if you are facing any problem with this widget installation then you may request for help us ! through the below comment section. our any admin will get back to you very soon as possible to your query. Thank You keep Visiting Our Blog.