Note: You tin dismiss cheque out the demo of this widget Here (Tip: Make certain yous scroll upwards or downwardly the page to run into the per centum along the scrollbar).
The First affair yous demand to produce is to login into your Google delineate of piece of occupation organization human relationship making certain that your blogs are hosted on that item account. Now become to Blogger Dashboard as well as choose the weblog inward which yous would similar to add together Percentage Value to a Scrollbar. Go to Template >> Edit HTML and search for the ]]></b:skin> tag. Once yous convey constitute the ]]></b:skin> tag successfully, only inward a higher house it glue the next 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 corporation transparent;
border-left-color: #2187e7;
}
After adding the CSS coding, search for the ending </head> tag as well as correct subsequently it glue the next code. (Tip: Make certain yous glue the code betwixt the ending </head> as well as opening <body> caput tag.
<div id='scroll'></div>
Lastly, search for the ending </body> tag as well as only inward a higher house it glue the next JavaScript code. This is the code which volition ensure that your scrollbar shows the accurate per centum upon scrolling upwards or downwardly the page. Once everything is done, relieve the template past times pressing “Save Template” Button available on the overstep correct 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 / two - $('#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 convey successfully added per centum value to a scroll bar inward bloggers. Now become as well as cheque our weblog to run into the widget inward action.
We promise this tutorial convey helped to acquire How to Add Percentage Value to a Scrollbar inward Bloggers. Let us know if yous convey whatever suggestions past times commenting them below. If anyone desire quick assist or back upwards only messages us on our Facebook Fan Page.
No comments:
Post a Comment