Monday, October 21, 2013

How to Add "Scrolling Back to Top Button" in your blogger website.

Hey guys,I think all of you are well.I just want to share "How to Add "Scrolling Back to Top Button" in your blogger website". You can do it easily. I will show How will you do it.Every one want to add their blog site to satisfy their visitors.



Now follow These steps:

1.First go to blogger.com .
2.In your dashboard click on Template.
3.Click Edit HTML. 

4.From your keyboard press Ctrl+F.
5.Find out bellow code.
</body>
6. After find out above code just copy bellow code and paste before </body>.
7.Then save your template. 

<style type="text/css">
#MBB {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:96px;background-color: #EEEEEE;background-color:#FFD45D;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#99EEEEEE’,EndColorStr=’#99EEEEEE’);text-align:center;padding:5px;position:fixed;bottom:51px;right:29px;cursor:pointer;color:#111;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"/>
<script type="text/javascript">
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr(&quot;href&quot;);
if ($(window).scrollTop() != &quot;0&quot;) {
$(this).fadeIn(&quot;slow&quot;)
}
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() == &quot;0&quot;) {
$(scrollDiv).fadeOut(&quot;slow&quot;)
} else {
$(scrollDiv).fadeIn(&quot;slow&quot;)
}
});
$(this).click(function() {
$(&quot;html, body&quot;).animate({
scrollTop: 0
}, &quot;slow&quot;)
})
}
});
$(function() {
$(&quot;#MBB&quot;).scrollToTop();
});
</script>
<a href="#" id="MBB" style="display:none;">Scroll to Top </a>

If you like this don't forget to comment .Any problem please inform me.I will help you.
Thanks

1 comment:

  1. This is nice post.It's working.Thanks for sharing.
    Visit essay writing services .

    ReplyDelete

If you like my post ,Don't forget to THANKS.