Add stylish percentage value in Blogger Scrollbar

Add stylish percentage value in Blogger Scrollbar Previously I have shared with you that how to add webkit override effect on blogger scroll bar. Today I am going to share with you that how we can add an stylish progress by percentage value in blogger scrollbar. This widget is very attractive and effective for those who wants to know about the scroll percentage. In this widget I have calculated the total page as 100% and added value which will change after scrolling. When you will be at the top of blogger template then the value will show 0% and when you scroll down then it will display the percentage value of scrolling. I think this trick is pretty much cool. This widget made with pure CSS. Black and Royal blue percentage holder with fading effect. Recommended:Add Webkit Override Scrollbar into your Blogger Template So to install this please flow the below steps- Step 1Log in to yourBlogger Accountand Click onTemplate- Step 2Now click onEdit HTML- Unfold code Step 3Now find]]/b:skinbyPressing Ctrl+F Step 4And Paste the below code above]]/b:skin /** stylish percentage value by www.bloggerspice.com **/ #BloggerSpiceScroll { display: none; position: fixed; top: 0; right: 10px; z-index: 500; padding: 3px 8px; background-color:#000000; color: #fff; border-radius: 3px; } #BloggerSpiceScroll:after { content: ; position: absolute; top: 50%; right: -7px; height: 0x; width: 0; margin-top: -4px; border: 4px solid transparent; border-left-color: rgb(4, 189, 250); } @media screen and (max-width:600px){ #BloggerSpiceScroll{ display:none; } Step 5Now findbodybyPressing Ctrl+F Step 6And Paste the below code after body div id='BloggerSpiceScroll'/ Step 7Now find/bodybyPressing Ctrl+F Step 8And Paste the below code above/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 - $('#BloggerSpiceScroll').height() / 2; $('#BloggerSpiceScroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(100); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#BloggerSpiceScroll').fadeOut(); }, 1500); }); //]] /script Step 9Now hit the save button That's it. Check your blogger to see the effects. If you have any query then feel free to contact with me.