Home
Blogger

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.
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.

How to Install Progress Scrollbar on Blogger?

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)})


if(limit<windowTop){var diff=limit-windowTop;el.css({top:diff})}})}})

$(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')}
//]]>


</script>

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

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.

12 comments

  1. After a long time you have shared a fantastic widget for blogger platform users. Thanks for that. Hope we will get more very soon.
  2. Guys It cool and Working Fine Because it Just Solved a Long While Issues That I had with my Https://www.extrahubs.blogspot.com
    You can Check to Confirm.It Works
  3. thanks Lilcyphar for using this widget. I hope this widget has beautified your blog with little animation.
    https://media1.giphy.com/media/l3vR4yk0X20KimqJ2/giphy-downsized-medium.gif
  4. Thanks for your feedback. I hope i will release more widget soon.
  5. Thank you for great post! But JavaScript make picture become unstable in post especially when you view it from small screen of smarphone, the pictures will become over bigger and the theme lost it resposivness. Would you like pix it, please? I am using default blogger's theme emporio.

    Thank you very much!
  6. Hi Sufyan
    I have to test it on default blogger theme. But this script doesn't have any conflict with blog image script.
  7. No I meant it does as if it make @mediascreen unstable. It works great in PC/deskstop for emporio, but not working well in mobile such as smartphones, when I examinated in Google Webmaster stated the same "found cell....."

    Now I fix it by another way, like this:
  8. Great!

    Different blogger using different theme. So same widget maybe not compatible for all blogger theme. For this reason sometimes we have to customize the script.

    I shared a base script and user can customized it in different ways.
  9. Thank you my friend
  10. Thank you !
  11. Hi friends. I can't not figure out why it does not work in my actual theme. Please, can you help me? This is my blog: https://vocabulariografico.blogspot.com/ Thanks.
  12. Thank you the script is working. You can check on my blog.. www.bana.co.ke
Go Up