1 / 8

tricksyidea.com-How to add a stunning Reading Progress Bar In WordPress Website without Plugin

In this post, we gonna show you, How you can add a reading progress bar without plugins using CSS, and javascript code only, So letu2019s create the reading meter, or you can say reading progress bar in WordPress websiteu2019s post, or you can be altered to the entire website.

Jasim2
Download Presentation

tricksyidea.com-How to add a stunning Reading Progress Bar In WordPress Website without Plugin

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. How to add a stunning Reading Progress Bar In WordPress Website without Plugin tricksyidea.com/how-to-add-a-stunning-reading-progress-bar-in-wordpress-website-without-plugin Home Blogs Most scrumptious tips, you should know………….. Jasim Ns March 16, 2022 4.0 ????? 4/5 In this post, we gonna show you, How you can add a reading progress bar without plugins using CSS, and javascript code only. Table of Contents 1/8

  2. Let’s create the reading meter, or you can say reading progress bar in WordPress website’s post, or you can be altered to the entire website. and let me explain one more thing that you don’t have to worry about where to do and we don’t have any programming skills. Just only read briefly and you can progress bar on your website. Please copy the below code and paste it into your Elements Box. Now you are confusing what is element box, So you don’t have to worry about just read below and you can add progress meter on your website. <!---Website-Reading-Progress-bar-by-Tricksyidea--> <style> #site-navigation{ margin-top:10px!important; } .web-insights-reading-meter { position: fixed; top: 0!important; z-index: 1111; width: 100%; background-color: #f1f1f1; } .web-insights-progress { width: 100%; height: 6px; z-index: 1111; background: #ccc; } .progress-bar { height: 6px; background-color:#0045FF; width: 0%; } </style> <div class="web-insights-reading-meter"> <div class="web-insights-progress"> <div class="progress-bar" id="myBar"></div> </div> </div> <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> Appearance section 2/8

  3. Log into your WordPress dashboard and click on Appearance section. Once we have to activate most thing, So just read below artical below Generate Press Then click on your theme like I have Generatepress theme, You would have any other theme like – Astra, OceanWp and Onepress. there are lots of themes available on WordPress so you can purchase any theme as you’d like. But make you have a premium version of this theme like I have a premium version of Generatepress. If you don’t have any themes Pro version then you can’t add the progress meter. but if you have then doesn’t matter just follow these. steps.. Activate the elements Once we have to activate the elements just scroll down and then activate them because if we won’t activate then you can’t able to add a progress meter instead of this. If you activated them so follow the further steps.. 3/8

  4. Create the elements Once we have to create a new elements where you can add the top CSS, javascript code that we provided so just follow the further steps.. Select the Hook Once we have to click on – Add new elements – then select the hook and boom! our new elements created where you can create progress met ̣ er.. 4/8

  5. Past the code here Past the code here – Copy the code from here… Click on Wp_head Click on wp_head – and select wp_body_open it will help you show your progress meter when someone opens your websit ̣ e’s content. 5/8

  6. Tick the execute PHP Tick the Execute PHP it is the most important setting, cuz it will help show the reading progress bar on the WordPress websites.. Click on display rules.. Click on the: Display rules where we can customize some important settings.. 6/8

  7. Choose the Location Select a location where you want to show the reading progress bar like the entire website. I’m going to select the Post when someone clicks on my posts then it will be shown. So now just click on Publish and clear your website’s cache. now boom!…. Now the progress meter or reading progress bar is showing on your elegant WordPress website. if you have any questions do let me know in the comment section below.. Customize any website’s scrollerbar using css code In this post, you’ll be able to modify and customize the scroll bar in any WordPress website using custom CSS code only. We already know that our default scroll bar does not look appealing and lovable. But now we have decided to customize our scroll bar to a stunning scroll bar. Read more 7/8

  8. 8/8

More Related