Home
Blogging
Education

How to Make a Scroolbar Percentage on Blogger

1 min read
TopBlogPk - On this occasion I will share a tutorial on Making a Percentage Scrollbar on a blog. Scrollbar percentage is an interesting feature that calculates what percentage of you scroll down.

By installing this scrollbar makes your blog cool and interesting, sometimes bloggers want to have an interesting and cool blog. That has become our hallmark to attract visitors, therefore my friend can try this tutorial to make the blog more interesting.
Okay, instead of going to the tutorial for a long time, please look carefully.

How to Install Scrollbar on Blogger

1. Open your Blogger dashboard.
2. Select the Themes menu > Edit HTML .
3. Copy the code below right ABOVE
]]></b:skin>

/* Start - Persentase Scrollbar By TopBlog Pk */
#scrollPersentase {display:none;position:fixed;top:0;right:5px;z-index:500;padding:3px 8px;background-color:#ff69b4;color:#FFF;border-radius:3px}

#scrollPersentase:after {position:absolute;top:50%;right:-8px;height:0;width:0;margin-top:-4px;}

/* End - Persentase Scrollbar By TopBlog Pk */

4.Then look up the code <body> and paste the code below right ABOVE the code.

<div id='scrollPersentase'/>

5.Relax there is still one more stage.
6.Then please mate search for the code </body> and copy the code below the ABOVE code. 

<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 - $('#scrollPersentase').height() / 2;

$('#scrollPersentase')

.css('top', distance)



/* Start - Persentase Scrollbar By TopBlog Pk */



.text(' (' + Math.round(progress * 100) + '%)')

.fadeIn(100);

if (scrollTimer !== null) {

clearTimeout(scrollTimer);

}

scrollTimer = setTimeout(function() {

$('#scrollPersentase').fadeOut();

}, 1500);

});

/*]]>*/

</script>

Lastly Save .
That's the Way to Create Scrollbar Presentations on Blogger that I can share. Hopefully useful, if there are questions please comment in the comments column. See you soon, that's all and thank you.

You may like these posts

Post a Comment