 |
| How to add Google progress scrollbar on top of your BlogSpot page |
You may have seen a progress bar on many pages of the Google product site that, as you scroll the page, a horizontal colored bar moves from left to right across the top of the page. This progress bar shows your position only in the total height of the page.
However, this feature is not very important for blogger platform users, but if you want to enhance the beauty of your blogger look, then adding this feature to your blogger theme is a great choice. I made this custom feature to be compatible with blogger platform. When visitors visit your blog's pages, this customizable module progress slider shows the length of your blog's pages through a horizontal colored bar.
Generally, these functions work by measuring the height of the page. Suppose you scroll 25% of a blog page, a horizontal colored line or progress bar fills the top 25% of the page. It is very interesting and useful for beautifying web pages. If you scroll a large part of the page, the horizontal color line and line length will increase along the page where the page is scrolled.
So it will be best to use this feature on your blogger page. These features work on blogger homepage and post page at the same time. In addition, it is compatible with almost all major browsers. Once you implement this feature in your blog theme, it will work on 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
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:##5212af; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}Customization
- To change the scrollbar colors please alter the ##5212af 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
#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.blogger-store.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.
Thanks for reading: How to add Google progress scrollbar on top of your BlogSpot page, Sorry, my English is bad:)
