2020 July 30 Archive - EXEIdeas – Let's Your Mind Rock

Ever come across a web page that had a visually appealing progress bar indicating how far you have read? In case you didn’t know it before, this incredible tool is called ‘Reading Progress Bar’. Because of its interactive nature, it can help you to instantly get your audience hooked up on your website.Or Have you ever been reading an article on a website and wondered how far through you had gotten? Many websites show you how far you have read using a type of progress bar. Fortunately, you can easily add a reading progress bar to WordPress with the use of a smooth plugin.Why Add A Reading Progress Bar?A WordPress reading progress bar is a great tool that will allow your site to stand out. It is also a fantastic tool for your website users to have access to. The progress will tell your readers how far they have read into an article and show them how long they have left.Why Should You Add Reading Progress Bar?It is good for blogs that publish long-form articles. Usually, readers skip reading long articles because of time. But if you are using a progress bar on your blog then it will encourage readers to read your blog post. Having a bar that shows estimates the gauge you need to read more. It shows that you value your readers’ time. Adding a reading progress bar is very easy to add in the WordPress blog and you can add it for FREE.Add Custom JavaScript:In some situations, you may need to add custom JavaScript to your site. Normally, this would involve modifying your theme files. However, there is a less intrusive alternative. But we recommend that do not do this. Make it easy via using the perfect way and know How To Add Custom Scripts And Styles In WordPress Header And Footer? else you will end up broken your theme.Now there are many snippets available online or on many other blogs and website but everyone is not able to optimize your blog or website so you need some optimized code snippet. So now checkout out code snippet for your blog and website that will give you all features for your desired code. Now grab the ready to use code and paste it where you want.Features:1.) No JQuery File Added.2.) JavaScript Little Snippet Added But No External File.3.) Basic CSS Added.4.) Simple And Quick Load.5.) Can Work With Any Browser.How To Add In WordPress?Readout our previous post about How To Add A Top Reading Progress Bar in WordPress Without Plugin? and follow that to add this to your WordPress Footer. 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 + "%";} .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}.progress-bar{height:5px;background:#F86152;} 12.) Click “Save Template” And Done.Customization:Edit your CSS if you are a pro and want more customization. To change the color edit the background:#F86152 and replace it with your preferred color code. If you need to color code of various colour please visit here. And to change the size of your progress bar edit height:5px and replace the 5px.Troubleshooting the ErrorsDo it with concentration and patience. Check your alls steps and again and all codes or scripts. If you find any error you can contact us anytime via comment or better via email, We are always here to help you.Last Words:That’s all we have. We hope that you liked this article. If you have any problem with this code in your WordPress template then feel free to contact us with a full explanation of your problem. We will reply to you as time allows us or If you have any doubts and problem please comment below. We are happy to help you!If you liked this article, Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in the next article.