How to Add Reading Progress Bar in Blogger Website
Hello friends, welcome to our blog. So in today's article, we will tell you how you can put a , on your blogger website. So for this we have to take the help of HTML and CSS. So let's start it processed. Before adding the bar, you must back up your theme so that if you make any mistake in the coding, then you can restore your theme.
Adding Reading Progress Bar
Reading Progress Bar shows your blog post or the length of your content article that your blog post, your content is too big, and your bounce rate is also reduced by using it. And it helps your readers to better understand the content, such as your reader can read the article for a long time and it gets significantly increasing in your AdSense revenue.
- So first of all you have to go to your blogger dashboard
- After that, you have to click on the theme
- After clicking on the theme, you have to click on Edit HTML
After this, you have to copy the CSS code given below and paste it above the close </body> tag.
<script>window.onscroll = function() {myFunction()};function myFunction(){var winScroll = document.body.scrollTop || document.documentElement.scrollTop;var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;var scrolled = (winScroll / height) * 100;document.getElementById("myBar").style.width = scrolled + "%";}</script> Now you have to copy the code given below and paste it under the <body>.
<div class='progress-container'><div class='progress-bar' id='myBar'/></div>Now you have to copy the code given below and find the </b:skin> and paste it above.}}></b:skin>
.progress-container{width:100%;position:fixed;z-index:99}.progress-bar{height:5px;background:#F86152}After pasting all three codes. Now you can replace your favorite color with the given #F86152 color and save your theme. That's it.
एक टिप्पणी भेजें