Adding Percentage Value to Scrollbars in Blogger Blogs

We have already posted on how you can customize your scrollbars using easy webkit CSS tricks, so using that you can get your scrollbars to look somewhat like ours, well today I have another awesome tutorial which will help you show the exact percentage at which your scrollbar is slided too. So if you are thinking how this is going to work try to slide and see it yourself. So isn't it cool, so now if you want to add this right to your blog then check below easy steps to see how it works.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

   #scroll{background-color:#2187e7;border-radius:3px;color:#fff;display:none;padding:3px 8px;position:fixed;right:20px;top:0;z-index:500}#scroll:after{border:4px solid transparent;border-left-color:#2187e7;content:"";height:0;margin-top:-4px;position:absolute;right:-8px;top:50%;width:0}

3. Now again search for </body> tag & paste below code above it.

   <script type='text/javascript'>var scrollTimer=null;$(window).scroll(function(){var e=$(this).height(),t=e/$(document).height()*e,n=$(this).scrollTop()/($(document).height()-e),r=n*(e-t)+t/2-$("#scroll").height()/2;$("#scroll").css("top",r).text(" ("+Math.round(n*100)+"%)").fadeIn(100);if(scrollTimer!==null){clearTimeout(scrollTimer)}scrollTimer=setTimeout(function(){$("#scroll").fadeOut()},1500)})</script><div id='scroll'></div>

4. That's it now Save Template & refresh your blog to see this effect.

So first of all thanks to Syed Faizan Ali from MyBloggerLab for this amazing tutorial. Well guys that's do comment if you find any problem using this effect.