In recent tutorials we have already shown the way through which you can customize a lot of blogger widgets. Recently one of our reader asked that how to add a percentage value to scroll bar in blogger ? Basically it shows the percentage of page while scrolling. It might turn out extremely useful for your readers and visitors to find out how much page have been scrolled or how much content, post or article is left to be read. This widget is very attractive and effective for those who's knows about scroll percentage. So in this widget i have calculated the total page as 100% and added value which will changing after scrolling. When you will be at the tops of the blog the value will be 0% and when you scrolling the page it will display the value of scrolling. This widget is made with pure CSS, it consists of Black and Royal Blue percentage with fading effect and i think trick i pretty much cool.
How to Add Percentage Value to a Scrollbar in Bloggers
- Login to your blogger dashboard.
- Goto template.
- Click on Edit Html.
- Find the below code by pressing Ctrl+F.
]]></b:skin>
- Paste the below code above/before ]]></b:skin>
#TricksBloggingTricksScroll {
display: none;
position: fixed;
top: 0;
right: 10px;
z-index: 500;
padding: 3px 8px;
background-color:#000000;
color: #fff;
border-radius: 3px;
}
#TricksBloggingTricksScroll: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){
#TricksBloggingTricksScroll{
display:none;
}
- Now find <body> by pressing Ctrl+F.
- Paste the below code after <body>
<div id='TricksBloggingTricksScroll'/>
- Now find </body> by pressing Ctrl+F
- 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 - $('#TricksBloggingTricksScroll').height() / 2;
$('#TricksBloggingTricksScroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#TricksBloggingTricksScroll').fadeOut();
}, 1500);
});
//]]>
</script>
Now check your blog and see scrollbar with effects if you have any query feel free and ask in comment box.
HOME
nIce post bro Keep it up
ReplyDeleteThanks @Ihtasham
Delete