Sep 25, 2016

Cute Smooth Scrolling Back To Top Button for Blogger

data:blog.title
Do you want to add stylish smooth scrolling back to top button on the blogger blog? If yes, then you're in the right place because today I'm going to share a smooth scrolling back to top button for blogger platform users.

scroll to top, back to top

Having long articles needs a lot of scroll and scroll to top button helps our blog readers to one click and jump to the top of the page. So its helps in solve scrolling issues, and it is very easy to install. You just need to follow step by step guide which is given below and also you can customize its color and size as per your needs.

Without wasting your valuable time let's get straight to work and learn how you can add scroll to top button on the blogger blog.

Also Read - 15+ Back To Top Button For Blogger

How to Add Scroll To Top Button on Blogger?


Note: Before the start, you must download a backup copy of your blogger template for saving yourself from any issue after making changes.

STEP 1] Go to blogger.com >> Select your blog from the list.

STEP 2] Click on Template and after that click on Edit HTML button to open template editor.

STEP 3] Now press CTRL+F and search for <head> tag and just after of this tag paste below FontAwesome Stylesheet and jQuery link.

<link href='http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>

Note: If you've already installed any above link then don't add that one and add only one which you don't have.

STEP 4] Now again search for ]]></b:skin> tag and paste below code just above of it.

/******back to top button for blogger by mybloggerguides.com**********/
.back-to-top { z-index:99999; position: fixed; bottom: 0.2em; right: 10px; background-color: transparent; font-size: 20px; padding: 0px 0px 0px 2px; display: none; border-radius: 30%; }
.back-to-top:hover { background-color: transparent; margin-bottom: 8px; font-size: 20px; }
.back-to-top i.fa.fa-arrow-up { color: #ff7211; padding: 4px 5px; border-radius: 50px; background-color: #222; font-size: 28px; border: 2px solid #fff; }
.back-to-top i.fa.fa-arrow-up:hover { color: #fff; padding: 4px 5px; border-radius: 50px; background-color: #222; font-size: 30px; border: 2px solid #ff7211; }

Customization

1 - Change Hexacode of color: #ff7211; to change icon color and change Hexacode of color: #fff;  to change icon color on hover.
2 - Change Hexacode of background-color: #222; to modify the background color.
3 - Change Hexacode of border: 2px solid #fff; to change border color and change Hexa color code of border: 2px solid #ff7211; to change border color on hover.

STEP 5] Now again search for </body> tag and just above of it paste below code.

<a class='back-to-top' href='#'><i class='fa fa-arrow-up'></i></a>
<script type='text/javascript'>
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });

    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

STEP 6] Finally click on save template button to save the template.

That's it. Now open your blog and see it live on your blogger blog.

Must Read - Stylish Contact Form For Blogger! Add To Static Page

Conclusion:

So above guide is about "How to Add Cute Smooth Scrolling Back To Top Button to Blogger?" I've tried my best to make this tutorial as easy as possible but if in any case you are facing any trouble then let me know via dropping a comment below. I'll help you out of sure.

Don't forget to subscribe us and if you like this article, then do share with your friends on any social networking ID.

Thank You!
Stay Blessed and Stay Happy!

No comments:

Post a Comment

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.