How to add Google progress scrollbar on top of your BlogSpot page in 2020 New Templates?
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
Themetab and Click Edit HTM button
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
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.
For Gradient color scrollbar please use this CSS code block
<div id='scrollbar'><div id='scrollbar-bg'></div></div>#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.
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.//<![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.
