What is the Reading Progress Bar ? With the help of Reading Progress Bar, you can see exactly how much of the page you have read or at what stage of a page. For example: suppose you are reading an article, you have read half of the article. Then the Reading Progress Bar will show half a line.
You may have added Reading Progress Bar widget in blogger. Normally Reading Progress Bar widgets are shown below the header and above the footer. But now the widget that I will share will show above the back to top button. That is, back A reading progress bar will show around the to top button.
Watch the demo below:
How to Add Back to Top Button Widget with Reading Progress Bar in Blogger?
Reading Progress Bar and Back to Top button can be added separately in Blogger, but the widget I am sharing contains both Reading Progress Bar and Back to Top Button. Follow the below steps to add back to top button and reading progress bar widget to Blogger. to do
- Yours firstBlogger Dashboardgo to
- Then click on Theme and then click on Edit HTML option from the drop-down menu.
- Now search for ]]></b:skin> or /*]]>*/</style> and paste below CSS codes above this tag. If ]]></b:skin > or /* ]]>*/</style> If you don't find any tag, write <style> </style> tag inside <head> </head> tag and paste the css codes inside it. Example : <style> css codes </style> . (Use Hackers Keyboard to search on mobile.)
/* Reading Progress Bar by Blogpen.xyz */
.tTpB{justify-content:center;position:fixed;right:20px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:9999;transform:scale(0);transition:transform .3s ease,opacity .3s ease,visibility .3s ease,margin-bottom 1s ease}.tTpB.vbl{visibility:visible;opacity:1;transform:scale(1)}.tTpB{bottom:70px}.tTpB:hover{opacity:.8}.tTpB svg{height:100%;width:100%;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer}.tTpB svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9}.tTpB svg .c{fill:none;stroke:#482dff;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round}.tTpB svg .d{fill:none;stroke:#08102b}.drK .tTpB svg .b{fill:#2d2d30;stroke:#404045}.drK .tTpB svg .c{stroke:#8775f5}.drK .tTpB svg .d{stroke:#fffdfc}.tTpB{display:flex;align-items:center}(Replace .drk with your website's dark mode class.)
- Now find the </body> tag and paste the below javascript code above it.
<div class="tTpB" id="backTop" onclick="window.scrollTo({top: 0});">
<svg viewBox="0 0 34 34">
<circle class="b" cx="17" cy="17" r="15.92"></circle>
<circle class="c scrollProgress" cx="17" cy="17" r="15.92"></circle>
<path class="line d" d="M15.07,21.06,19.16,17l-4.09-4.06"></path>
</svg>
</div>
<script type="text/javascript">
//<![CDATA[
var progressPath = document.querySelector(".scrollProgress");
var pathLength = progressPath.getTotalLength();
progressPath.style.transition = progressPath.style.WebkitTransition = 'none';
progressPath.style.strokeDasharray = pathLength + ' ' + pathLength;
progressPath.style.strokeDashoffset = pathLength;
progressPath.getBoundingClientRect();
progressPath.style.transition = progressPath.style.WebkitTransition = 'stroke-dashoffset 10ms linear';
var updateProgress = function() {
var scroll = document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - window.innerHeight;
var progress = pathLength - (scroll * pathLength / height);
progressPath.style.strokeDashoffset = progress;
}
updateProgress();
window.addEventListener('scroll', (updateProgress));
var offset = 0;
var duration = 550;
window.onscroll = function() {
if (document.documentElement.scrollTop > offset) {
document.querySelector('.tTpB').classList.add('vbl');
} else {
document.querySelector('.tTpB').classList.remove('vbl');
}
};
document.querySelector('.tTpB').onclick = function() {
document.querySelector('html, body').animate(window.scroll({
top: ['8px', '280px']
},{ duration: 2500, // number in ms [this would be equiv of your speed].
easing: 'ease-in-out',
iterations: 1, // infinity or a number.
// fill: ''
}));
return false;
};
//]]>
</script>- Save the theme.
If there is any problem to copyBy clicking hereDownload the codes.
