Always blogs have user friendly, Comfortable 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 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>
Step 5 Now again Find this code </body> by pressing Ctrl + F
#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 http://9tdownload.blogspot.com—>
Step 6 Paste the below Code Before/above </body>
Step 7 Now Click to Save Button
<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>
We hope you enjoyed for this widgets Follow Us & Subscribe our daily Updates
If you Like This Article, Kindly linkback to this article by copying one of the codes below.
Paste This HTML Code On Your Page :
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates.
Subscribe Now!!
0 comments