Add Progress Scrollbar Widget In Blogger

Thursday, 23 July 2015

Add Progress Scrollbar Widget In Blogger

7/23/2015
Install percentage scroll bar widget in blogger - Page percentage scroll bar is the best widget for any blog. With the help of this widget, Readers will be able to know the reading percentage of the post very easily. Yes, Visitors will be able to see what percentage of pages that he scroll, if it has reached the bottom of the page then, the percentage would be 100%. If you like this widget and want to add this widget on your blog then, don't worry. Today I'm going to show you how you can easily add this widget on your blog. Follow the below instruction.

How To Install Percentage Scrollbar In Blogger?

First you will need to go to your blogger dashboard - Login
Now go to the "Template" section and then click on the "Edit HTML" option.
Find the below code by pressing " Ctrl + f " key together from your keyboard. 
]]></b:skin>
After that, copy the below CSS code and paste it just before ]]></b:skin>. 
#scroll {
  display:none;
  position:fixed;
  top:0;
  right:15px;
  z-index:500;
  padding:3px 8px;
  background-color:#33D3A2;
  color:#fff;
  border-radius:3px;
  font-size:14px;  
}
#scroll:after {
  content: " ";
  position: absolute;
  top:50%;
  right:-10px;
  height:0;
  width:0;
  margin-top:-6px;
  border:6px solid transparent;
  border-left-color:#369fcf;
}
Note- You can change the highlighted color. (#33D3A2) 

 Now copy and paste the below code just after </head>. 
<div id='scroll'></div>
After that save the below code just before </body>. 
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(600);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut(600);
    }, 1000);
});
//]]>
</script>
Now click on the orange Save template button and see the magic.

See the Pen Progress ScrollBar By Askwithloud by Prince (@Askwithloud) on CodePen.

That's it ! I hope you like this widget ! Stay tuned for more blogger widgets, trick and tricks! Thanks for reading @Prince.
Load comments

0 Comment to "Add Progress Scrollbar Widget In Blogger"

Post a Comment