This Website Template Download Here
DOWNLOAD

Welcome To Creator Faruk™

Hi Dear : A New Blog Where You Can Find Blogging Tutorials, Tips, Tricks,Templates and Many More...

  See More Tutorials Here →

How To Add Sticky To To Button With Reading Progress - CreatorFaruk

Add Sticky Button In Blogger Website, How to add sticky to top button in blog website, Back To Top button In blogger site, Stucky To Top Button,
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

How To Add Sticky To To Button With Reading Progress - CreatorFaruk

Hello Dear, I am Faruk. If you want to add a sticky to top button with scroll progress on blogger website then this post is only for you.

Are you worried about your website speed? Don't worry it doesn't affect your website speed.

Also don't worry this accordion section contains dark mode css you just want to change the dark mode class that you provided with your theme dark mode class, you can change it smoothly by following this tutorial properly.

Should you add a reading progress bar?

I'd like to see it, I'd say yes you should add a parsing progress bar to your blogger site because your site guests will consider it as a solid model: the article will help to understand the article as a whole and the progress bar will help to understand the article as a whole for the guests and the impression of your site. for growth.

See More Related Articles

How does the progress bar work? 

When site guests visit the site that adds a progress bar they see a line when looking down and when looking up it works by adding some code to your blogger site. 

So without wasting important time let's check how to add responsive sticky to top button with scroll progress? 

How to add responsive sticky to top button with scroll progress? 

Important! Before we start adding code to the XML, I recommend you take a backup of your current theme If by chance any problem occurs, 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> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above <head/> tag by adding <style></style>
/* Sticky To Top With Reading Progress Bar by CreatorFaruk */ .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}
Step 6: Then find the code </body> and paste the following JS Codes just above to it.
<!--[ Sticky To Top With Reading Progress Bar by CreatorFaruk ]-->
<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>
Step 7: Save Template and Enjoy Sticky To To Button.

Conclusion

In this article I have created a tutorial on adding responsive sticky to top button with scroll progress. I hope you liked this article and please share with your friends and follow the blog for more. 

If you face any problem join our Telegram group and share your problem.

Rate This Article

Thank You So Much How To Add Sticky To To Button With Reading Progress - CreatorFaruk For Reading This Article.

About the Author

Hello Dear Visitor, i am Faruk Ahmed. I Give all Blogger Tutorials For Creating Attractive Websites. There is also an Opportunity To Introduce and Download The Best Templates. Software and Windows tutorials and more are published here. Tutorial Here…

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
Youtube Channel Image
Creator Faruk Subscribe Now To Watch More Blogging Tutorials and Many More..