Friday, August 21, 2020
Add Animated Back-To-Top widget in your Blogger Templates
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 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 1Log in to your Blogger account and Go to yourBlogger Dashboard            Step 2Click on -Template- Edit HTML    Step 3Now Find thiscode]]/b:skinby pressingCtrl+F    Step 4Paste the below CodeBefore/above]]/b:skin              .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 5Now again Find thiscode/bodyby pressingCtrl+F    Step 6Paste the below CodeBefore/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 7Now Hit on save Button  
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.