A “back to top” button can be really helpful for your readers, especially if you have a lot of posts appearing on your homepage and no sticky navigation. This post will show you how to add one that will only appear when the user begins to scroll down your blog. An example can be seen on my personal blog here.
Add Now! "Back to Top Button"
Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore 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.
If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.
/* Back to Top by Proclud Design */ .Ttop{display:flex;align-items:center;justify-content:center;position:fixed;right:20px;bottom:70px;width:45px;height:45px;border-radius:50%;cursor:pointer;visibility:hidden;opacity:0;z-index:5;transform:scale(0);transition:transform .3s ease, opacity .3s ease,visibility .3s ease,margin-bottom 1s ease} .Ttop.vsbl{visibility:visible;opacity:1;transform:scale(1)}.Ttop:hover{opacity:.8} .Ttop svg{height:100% !important;width:100% !important;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;cursor:pointer} .Ttop svg .b{fill:#fff;stroke:#e6e6e6;opacity:.9} .Ttop svg .c{fill:none;stroke:#6200ee;stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round} .Ttop svg .d{fill:none;stroke:#08102b} .drK .Ttop svg .b{fill:#2d2d30;stroke:#404045} .drK .Ttop svg .c{stroke:#8775f5} .drK .Ttop svg .d{stroke:#fffdfc}Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.
Step 6: Now add the following HTML Code just above to </body> tag. If you don't find it, it is probably already parsed which is </body>.
<!--[ Back to Top by Proclud Design ]-->
<div class='Ttop'> <svg onclick='window.scrollTo({top: 0})' viewBox='0 0 34 34'><circle class='b' cx='17' cy='17' r='15.92'/><circle class='c' cx='17' cy='17' r='15.92'/><path class='line d' d='M15.07,21.06,19.16,17l-4.09-4.06'/></svg> </div><script>/*<![CDATA[*//* Back to Top by Proclud Design */ var prPt=document.querySelector(".Ttop circle.c"),ptLh=prPt.getTotalLength();prPt.style.transition=prPt.style.WebkitTransition="none",prPt.style.strokeDasharray=ptLh+" "+ptLh,prPt.style.strokeDashoffset=ptLh,prPt.getBoundingClientRect();var updateProgress=function(){var t=document.documentElement.scrollTop,e=document.documentElement.scrollHeight-window.innerHeight;prPt.style.strokeDashoffset=ptLh-t*ptLh/e};updateProgress(),window.addEventListener("scroll",updateProgress);var offset=0;window.onscroll=function(){document.documentElement.scrollTop>offset?document.querySelector(".Ttop").classList.add("vsbl"):document.querySelector(".Ttop").classList.remove("vsbl")}; /*]]>*/</script>Step 7: Save the changes by clicking on this icon
Thank you.
© Copyright:
finestapdesign.com