How to Add Percentage Value to a Scrollbar in Bloggers
How to Add Percentage Value to a Scrollbar in Bloggers.
Nn the past, we have already shown you a way which you can customize your Scrollbar . Recently, considered one of our users asked us a way to add percent cost to a Scrollbar in Blogger? It essentially suggests you the share of a web page while scrolling. It might emerge as extraordinarily useful to your site visitors to discover how lots web page they've scrolled, or how an awful lot content material is left to be read. In this text, we will show you how to add percent value to a Scrollbar in Bloggers.
Notice: you could check out the demo of this widget here on this current page (Tip: make certain you scroll up or down the page to peer the share alongside the scrollbar).
The First thing you need to do is to login into your Google account making sure that your blogs are hosted on that particular account.
Now go to Blogger Dashboard and select the blog in which you would like to add Percentage Value to a Scrollbar. Go to Template >> Edit HTML and search for the ]]></b:skin> tag. Once you have found the ]]></b:skin> tag successfully, just above it paste the following CSS code.
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: ” ”;
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}
After adding the CSS coding, search for the ending </head> tag and right after it paste the following code. (Tip: Make sure you paste the code between the ending </head> and opening <body> head tag.
<div id='scroll'></div>
Lastly, search for the ending </body> tag and just above it paste the following JavaScript code. This is the code which will ensure that your scrollbar shows the accurate percentage upon scrolling up or down the page. Once everything is done, save the template by pressing “Save Template” Button available on the top right corner of your screen.
<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(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
/*]]>*/
</script>
Congratulations: You have successfully added percentage value to a scroll bar in bloggers. Now go and check our blog to see the widget in action.
We hope this tutorial have helped to learn How to Add Percentage Value
to a Scrollbar in Bloggers. Let us know if you have any suggestions by
commenting them below. If anyone want quick help or support just
messages us on our Facebook Fan Page.
Send me a message on Messenger if you need my help.
Join our Active Telegram Channel for latest updates and discussions
-
Join Here
Tags :
Blogging
Join our Active Telegram Channel for latest updates - Click to Join
Get Our Free Browsing Tweaks via Sms. Kindly sms Follow Zealnetworks1 to 40404. On Any Network And Sms is free.
Your comment(s) are appreciated.
You want to get notified when i reply your comment? Kindly tick the Notify Me box.
Thanks for this tutorial. It worked for me.
ReplyDeleteYou are welcome, do well to visit us for more tutorials...
Deletejoin our Chatbot for quick updates https://m.me/zealnetworks