Friday, August 26, 2016

Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

Add "Back To Top" Button In Blogger Blog With Smooth Scrolling
Friday, August 26, 2016
Add "Back To Top" Button In Blogger Blog With Smooth Scrolling - Hallo TRENDING NEWS, In the article that you are reading this time with the title Add "Back To Top" Button In Blogger Blog With Smooth Scrolling, we have prepared this article well for you to read and take the information in it. hopefully the contents of the post Article Blogger Tutorials, Article Blogger Widgets, what we write you can understand. all right, have a nice reading.

Title : Add "Back To Top" Button In Blogger Blog With Smooth Scrolling
link : Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

Related Post


Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

back-to-top-button-for-blogger


In today’s tutorial we’ll show you how to add "back to the top" button in blogger blog with smooth scrolling in a easy steps. The button we’re going to create will see in the bottom-right of the page and it appears only when users scroll down the page allowing them to scroll to the top of the page.

If your blog have a lot of information or you write very long posts then you must have to add this widget in your blogger blog to make better user experience.


 Note:  In the process a mistakes might be made, so please backup your template before making any changes.

Lets start the tutorial.

Step 1. In this button we are going to use font awesome so we need to add it in template.

 Note:  If there is already a font awesome library in your template, ignore below code and go for the further steps.

[<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>]

Step 2. To add Back to Top button in blogger just navigate to Blogger Dashboard >> Template >> Edit HTML and Search for the code ]]></ b: skin>.

Now copy the below CSS code and paste it exact before   ]]></b:skin>  section.

 [#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;

}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 10px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
}]

Step 3. Now, find a </body> tag in your templates and paste below piece of code before </body> tag.

[</script>
<a href='javascript:' id='return-to-top'><i class='fa fa-chevron-up'/></a>
<script type='text/javascript'>
// ===== Back to Top ====
$(window).scroll(function() {
    if ($(this).scrollTop() &gt;= 50) {       
        $(&#39;#return-to-top&#39;).fadeIn(200); 
    } else {
        $(&#39;#return-to-top&#39;).fadeOut(200);  
    }
});
$(&#39;#return-to-top&#39;).click(function() {    
    $(&#39;body,html&#39;).animate({
        scrollTop : 0                     
    }, 500);
});
</script>]

Step 4. Finally, Save your template and see the result.

Bottom Line


So, this was the easy tutorial on how to add back to top button in Blogger. usually you can customize this code easily but if you are newbie then use the default code.

I hope that you found it helpful and I’m sure it will benefit for your readers.

If you still facing any problem while installing this widget then just drop your query in below comment box. I would love to hear from you and help you out. Happy Blogging!


Thus the article Add "Back To Top" Button In Blogger Blog With Smooth Scrolling

That's the article Add "Back To Top" Button In Blogger Blog With Smooth Scrolling this time, hopefully it can be of benefit to all of you. well, see you in another article post.

You are now reading the article Add "Back To Top" Button In Blogger Blog With Smooth Scrolling with the link address https://poccoll.blogspot.com/2016/08/add-to-top-button-in-blogger-blog-with.html
Add "Back To Top" Button In Blogger Blog With Smooth Scrolling
4/ 5
Oleh

No comments: