I will explain that how you can add parcentage value to scrollbar in blogger blog. Actualyy it is not important for your blog, but this is for those who want to give uniqe effect to scrollbar in thair blog.
- Go To Blogger > Template
- Click Edit HTML
- Search for ]]></b:skin>
- Just above it paste the following CSS code:
<style>
#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;
}
</style>
6. Copy and Paste below code just after </head>
<div id='scroll'></div>
Make sure you pasted the code after </head> and before <body> like this:
</head>
<div id='scroll'></div>
<body>
8. Copy and Paste below code just above </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 - $('#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>
9. Save Template.
- I hope you do not understand any problem in any kind of comment, I know there is a problem, then I will try to help.
Post a Comment
0 comments
Dear readers, after reading the Content please ask for advice and to provide constructive feedback Please Write Relevant Comment with Polite Language.Your comments inspired me to continue blogging. Your opinion much more valuable to me. Thank you.