Add Smooth Scroll To Top Button To Blogger

Follow Simple steps to add a Button for smooth scrolling to top.

Step 1.   login to your blogger account, click on drop down menu, click on template and then click on Edit HTML.

 

Step 2.   Search for </head>  tag ( Press CTRL+F for a search bar to help find the tag ).

Step 3.   Add below code Before / above </head> tag. ( Ignore this step if your blog have already a jquery Plugin )

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Step 4.   Now search for </body> tag.

Step 5.   Add below section of code Before </body> tag.

<!--Smooth back to top by IACTips.blogspot.com-->
<style type='text/css'>
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){ $().UItoTop({ easingType: &#39;easeOutCirc&#39; }); });
</script>
<!--Smooth back to top by IACTips.blogspot.com-->

Step 6.   Click on Save Template and all you done.

Leave your Comment about this Widget.

Share it Please

Tweet

Unknown

I am a student of computer science.Owner of IAC Tips blog. I love to share my knowledge and experience with others. Follow my blog for tips tricks of internet, computer and software.