How to add Google progress scrollbar on top of your BlogSpot page?

Sometimes the scrollbar doesn't represent correctly the length of the post. So in those cases the best way is add this new 'scrollbar' that represent your position only for post height. So the visitor can see how much it left without losing his scroll/read position.

data:blog.title
new scrollbar for Google Blogger BlogSpot

You may have seen a progress bar in various Google product site’s pages that when scroll through the page then a horizontal progress color bar is rolling from left to right side on top of the page. This progress line is indicating your position only from the total page height. 

However this feature is not very important for blogger platform users but if you would like to extend the prettiness of your blogger theme then adding this feature in your blogger theme would be a perfect choice. I have developed this custom feature to make it compatible with blogger platform. When visitors will visit your blog pages then this Custom module Progress Scrollbar will display the length of your blog pages through a horizontal color bar.

Generally, this features works by measuring page height. Suppose, you scrolled 25% of the blog page then a horizontal colored line or progress bar would be filled by 25% on top of the page. This is pretty interesting and useful for beautifying the webpage. If you scroll more proportion of the page, then horizontal colored line and length of the line will extend along it where the page is rolled. 

So using this feature in Blogger page would be amazing. This features simultaneously works on Blogger home page and post pages. Moreover, it is compatible with almost all major browsers. Once you apply this feature in your blogger theme then it will work on both Desktop, Tablet and Smartphone.

Let’s proceed to the Google progress bar installation process

Step #1: Login to your Blogger BlogSpot account and if you are running multiple blog then select the appropriate Blog to install the Google progress bar feature.

Step #2: Now go to the Blogger dashboard

Step #3: Select Theme tab and Click Edit HTM button

How to add Google progress scrollbar on top of your BlogSpot page?

Step #4: Find the closing ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) and copy the below CSS script and paste it above closing ]]></b:skin>


For Solid color scrollbar please use this CSS code block

#scrollbar {height: 3px; left: 0; overflow: hidden; position: fixed; top: 0; width: 0; z-index: 9999;}
#scrollbar-bg {animation: 1s ease 0s normal none infinite running Gradient; background-color:#1dbf73; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

Customization

  • To change the scrollbar colors please alter the #1dbf73 code from above script. Please use our color picker and Flat UI color page to get the color code.
How to add Google progress scrollbar on top of your BlogSpot page?

For Gradient color scrollbar please use this CSS code block

#scrollbar {height: 3px; left: 0; overflow: hidden; position: fixed; top: 0; width: 0; z-index: 9999;}
#scrollbar-bg {animation: 1s ease 0s normal none infinite running Gradient; background: rgba(0, 0, 0, 0) linear-gradient(-50deg, #ea3a7e, #20aadb, #23e0b3) repeat scroll 0 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}
Step #5: Again search <body> and above this opening body add the below HTML script.

<div id='scrollbar'><div id='scrollbar-bg'></div></div>

Customization

  • To change the scrollbar colors please alter these #ea3a7e, #20aadb, #23e0b3 colors. You can use our color picker and Flat UI color page to get the color code.
Step #6: Again search </body> and above this closing body add the below JavaScript.

<script type='text/javascript'>
//<![CDATA[
// Google Progress Scrollbar by https://www.bloggerspice.com/
$(function(){$('.post-body').readingTime();});
var bar_bg=document.getElementById("scrollbar-bg"),body=document.body,html=document.documentElement;bar_bg.style.minWidth=document.width+"px";document.getElementsByTagName("body")[0].onresize=function(){bar_bg.style.minWidth=document.width+"px"}
window.onscroll=function(){var bar=document.getElementById("scrollbar"),dw=document.documentElement.clientWidth,dh=Math.max(body.scrollHeight,body.offsetHeight,html.clientHeight,html.scrollHeight,html.offsetHeight),wh=window.innerHeight,pos=pageYOffset||(document.documentElement.clientHeight?document.documentElement.scrollTop:document.body.scrollTop),bw=((pos/(dh-wh))*100);bar.style.width=bw+"%"}
$(document).ready(function(){var body=$('.post-body').first();var container=$(body).parent();var image=$(body).find('img').first();var surround=$(image).parent();$(surround).prependTo(container)})
$(function(){if($('#rightbottom').length){var el=$('#rightbottom');var stickyTop=$('#rightbottom').offset().top;var stickyHeight=$('#rightbottom').height();$(window).scroll(function(){var limit=$('.inshare, .inshare-shop').offset().top-stickyHeight-15;var windowTop=$(window).scrollTop();if(stickyTop<windowTop){el.css({position:'fixed',top:50})}else{el.css('position','static')}
if(limit<windowTop){var diff=limit-windowTop;el.css({top:diff})}})}})
//]]>
</script>

Step #7: Finally hit the Save theme button to save your progress.

How to Install Progress Scrollbar on Blogger?
How to add Google progress scrollbar on top of your BlogSpot page? 



Now visit your blogger page and scroll to see the beautiful horizontal progress bar. I hope you will love this new feature in your blogger theme.

Open Comment Box
Mehroon 2/10/2019

After a long time you have shared a fantastic widget for blogger platform users. Thanks for that. Hope we will get more very soon.

Contact Form

Name

Email *

Message *