Breaking News
Loading...
Saturday 31 August 2013

Scroll Bar: How to Add Percentage Value to a Scrollbar in Bloggers.

How to Add Percentage Value to a Scrollbar in Bloggers.
Today I actually have another awing tutorial which can assist you show the precise percentage at which your scrollbar is slided too. therefore if you're thinking however this can be progressing to work try and slide and see it yourself. therefore is not it cool, therefore currently if you would like to feature this right to your blog then check below straightforward steps to visualize however it works.


Scroll Down for Demo!

Follow This Steps-

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

#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.

You Also Like:
How to add Multi-Colored Popular Posts Widget in Blog of Blogger?

0 comments:

Post a Comment

 
Toggle Footer