Hello! Welcome to Vin Star css.
The more users like your blog the more time they will spend reading your content. Because of this, every blogger designs his blog user-friendly. The blog should have some simple but important gadgets when it comes to user-friendly design. It is very important to put them on the blog because it makes it much easier for users to use.
Users should have the Reading Progress Indicator located at the bottom of the page and the Back To Top Button at the top of the page to find out how much more there is when we come to the bottom of the page as we read the post. I will combine these two together and give it a new look. It will be set right at the bottom right of your webpage.
Go to the demo page and check out its functionality.
How to make a Back To Top Button With Reading Progress Indicator?
Creating a Back To Top Button With Reading Progress Indicator for your Blogger Website will not require much knowledge about HTML, CSS, or JS because I have already designed it for you. What you need to do is to implement the codes in the right place in your Blogger Theme XML.
Important!Before you start adding codes in XML, be sure to back up your current theme. If there is any problem by accident, you can recover it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
Style 1 There is an arrow icon in the middle of the skin, Style 2 Shows the height of the page as a percentage in the middle of the skin.
/* Scroll Back To Top Button With Reading Progress */
#progress{
position: fixed;
bottom: 20px;
height: 45px;
width: 45px;
display: grid;
place-items: center;
z-index:999;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
cursor: pointer;
opacity:0;
transition: 0.3s all ease-in-out;
}
#progress-value{
display: block;
height: calc(100% - 5px);
width: calc(100% - 5px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 35px;
color: #001a2e;transition: opacity 0.3s ease-out;
}
@media only screen and (max-width: 896px) {
#progress {
bottom: 80px;}
}
.darkMode #progress-value{background-color:#2d2d30}
/* Scroll Back To Top Button With Reading Progress */
#progress{
position: fixed;
bottom: 20px;
height: 45px;
width: 45px;
display: grid;
place-items: center;
z-index:999;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
cursor: pointer;
opacity:0;
transition: 0.3s all ease-in-out;
}
#progress-value{
display: block;
height: calc(100% - 5px);
width: calc(100% - 5px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 400;
font-size: 14px;
transition: 0.3s all ease-in-out;
}
@media only screen and (max-width: 896px) {
#progress {
bottom: 80px;}
}
.darkMode #progress-value{background-color:#2d2d30}
If your template has a dark mode feature and you want these to get a different color when in dark mode, you can customize the codes to suit your needs. Each template may have a different Dark Mode class, so adjust it and change the .darkMode class with your Template Dark Mode Class.
Step 6: Now add the following JavaScript just above to </body> tag. If you don't find it, it is probably already parsed so find </body>.
<!--[ Style 1 ]-->
<script>/*<![CDATA[*/
let calcScrollValue = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollValue = Math.round((pos * 100) / calcHeight);
if (pos > 100) {
scrollProgress.style.opacity="1";
} else {
scrollProgress.style.opacity="0";
}
if (pos > 100) {
scrollProgress.style.right="20px";
} else {
scrollProgress.style.right="-50px";
}
scrollProgress.addEventListener("click", () => {
document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;
/*]]>*/</script>
<!--[ Style 2 ]-->
<script>/*<![CDATA[*/
let scrollPercentage = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrollValue = Math.round( pos * 100 / calcHeight);
if (pos > 100) {
scrollProgress.style.opacity="1";
} else {
scrollProgress.style.opacity="0";
}
if (pos > 100) {
scrollProgress.style.right="20px";
} else {
scrollProgress.style.right="-50px";
}
scrollProgress.addEventListener("click", () => {
document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#008fff ${scrollValue}%, #c0c0ff ${scrollValue}%)`;
progressValue.textContent = `${scrollValue}%`;
}
window.onscroll = scrollPercentage;
window.onload = scrollPercentage;
/*]]>*/</script>
If you have selected CSS style 1 in step 5 then use style 1 in JavaScript too.
Step 7: Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed so find <body>.
<!--[ Style 1 ]-->
<div id="progress">
<span id="progress-value"><svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-180.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg></span>
</div>
<!--[ Style 2 ]-->
<div id="progress">
<span id="progress-value"></span>
</div>
If you have selected CSS style 1 in step 5 then use style 1 in HTML too.
Step 10: Lastly, Save the changes by clicking on this icon
That's All! You will now see a Back To Top Button With a Reading Progress Indicator on the bottom right of your website
Conclusion
So this article is about Adding Scroll Back To Top Button With Reading Progress Indicator for Blogger. I hope you like this article if you got any queries kindly do comment below. And like and follow our blog for more posts like this daily.
© Copyright:
css.vinstartheme.com