Add Animated Back-To-Top widget in your Blogger Templates

Add Animated Back-To-Top widget in your Blogger Templates

3
data:blog.title
animated widget

Blog visitors always like user friendly blog where they can visit the sites comfortably. For this reason bloggers always use different widget to make their blog more user friendly. As a result, Back To Top widget has got priority to back in top instantly without scrolling mouse for longer time. Definitely this widget helps to visitors comfortable. We have already god many Back To Top widget but most of them are used with .js file that is responsible to make your blog slower. So I am just going to share a Back To Top widget that will appear at the bottom of your blog when a visitors scroll half of the page. So it is not like old static Back To Top widget. If someone back into top then this widget will disappear. You can see the demo in my template. So let's proceed to the tutorial.



Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin>  by pressing  Ctrl + F

Step 4 Paste the below Code Before/above ]]></b:skin> 


#bs-bt-top-nav {position: fixed;cursor: pointer;background: rgba(0, 0, 0, 0.78);color: white;padding: 10px 20px;border-radius: 3px;bottom: 22px;right: 90%;}
#topcontent {margin-bottom: 10px;}
.c_images img {width: 57px;height: 57px;}
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
<!--Widget By www.bloggerspice.com-->


Step 5 Now again Find this code </body>  by pressing  Ctrl + F

Step 6 Paste the below Code Before/above </body>


<a id='bs-bt-top-nav' title='Back to top'>Back to top</a>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
    if($(this).scrollTop() > 200) {
        $('#bs-bt-top-nav').show();
    } else {
        $('#bs-bt-top-nav').hide();
    }
});
$('#bs-bt-top-nav').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 1000);
    return false;
});
//]]>
</script>

Step 7 Now Hit on save Button
Add Animated Back-To-Top widget in your Blogger Templates
4 Stars stars - "Add Animated Back-To-Top widget in your Blogger Templates" Blog visitors always like user friendly blog where they can visit the sites comfortably. For...

Post a Comment

doesn't work.

It works in all template because its coding is CSS based..anyway whats error have u got?

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *