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

One of my obsessions as a web designer is ensuring that I do everything that I can to make a site as user-friendly as possible. You may have noticed the trend some websites are following, in particular, blogs. Many blog owners are providing some type of animated indicator feature to give their readers an indication of how far along they have read a blog post or page article.Reading Position Indicator (RPI):I’ve seen quite a few web pages that have some kind of an indicator to display the current reading position. Normally, such a Reading Position Indicators are used on blog posts or long-form articles and help users to understand how far they are from finishing the reading but you may also find it Chrome’s android application in the form loading bar (and Apple’s browser Safari, a very similar-looking loading bar).Some authors want to add progress bars to their blog. However, most authors are not web designers or developers. So they don’t know how to do this. Well, there is a secret in the HTML development world. The secret is that “Everything is easy once you know how to do it.” Yes, it is actually pretty easy to add a progress bar. I just added a progress bar to my blog.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.CLICK HERE TO SEE DEMOFeatures: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 Blogspot?Please follow this tutorial very carefully to avoid errors. We will start with implementing HTML, Javascript and CSS then move onto the final step. Just follow this three-step to insert a reading progress bar in a blogger.1.) Go To Your www.blogger.com2.) Open Your Desire “Blog”.3.) Go To “Template”.4.) Click “Edit HTML”.5.) Now “Click” Within Code Box.6.) Press [CTRL+F] To Search Code.7.) Now “Copy” The Below JavaScript And “Paste” It Before Upper Code. 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 + "%";} 8.) Again Press [CTRL+F] To Search ]]> Code.9.) Now “Copy” The Below Code And “Paste” It Before Upper Code. .progress-container{width:100%;position:fixed;z-index:99;top:0;left:0;}.progress-bar{height:5px;background:#F86152;} 10.) Again Press [CTRL+F] To Search Code.11.) Now “Copy” The Below Code And “Paste” It After Upper Code. 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 Errors:Do 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 blogger 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.