 |
| How To Add Preloading Effect To Blogger? |
How To Add Preloading Effect To Blogger?
IN 2021 the internet user became more impatience and more punctuate in terms of time because of the results or a webpage doesn't load in less than 5 seconds then the user skip your website and switch to another website in order to get a satisfactory result which the user wants
So this leads to a huge loss of traffic and ranking, plus it harms your website SEO by increasing the bounce rate of your website but this problem can be solved by adding a preloading effect on your blogger website yes by pasting some j query codes on your theme you will save your all traffic and visitors
In this article, you will learn to add a cool preloader effect to blogger in order to keep maintain the user in your website
How do I add a Preloading effect to Blogger?
For Installing a Preloader Effect in Blogger you have to Follow The given Procedure Step by Step Carefully.
Add Preloading Effect To Blogger
1. Open Blogger Dashboard >> GoTheme Option
2. Click On Edit HTML section
3. Press CLT+F and Search for </head>
4. Copy the Code and Paste it Before </head> Tag
NOTE: Before performing the above procedure first you have to add a jquery Library to your theme code
Replace the jquery code with this given code in your theme HTML
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>STEP1: Adding CSS
Press Clt+F OR CMD+Fand search for ]]></b:skin>Tag then add the CSS code just before the <skin> tag
CSS.loader { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('Image URL HERE') 50% 50% no-repeat rgb(249,249,249); }
- Replace the image URL with your desired gif URL
STEP2 Adding HTML
Search for </boday> or <body..>tag by pressing Clt+F OR CMD+F then paste the HTML code code the <body> tag
HTML<div class="loader"></div
STEP3: Adding JavaScript
Navigate to </head> tag on your theme and copy the given code and paste it just before the <head> tag
JavaScript<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(window).load(function() { $(".loader").fadeOut("slow"); }) </script>
STEP4: Click Save and Check
you are almost done now click on the save button and visit your blog to check the loading animation is working or not? visit any blog post on your website then the loading animation will be visible while the page is loading
you can use unlimited loading effect by changing the Gif URL check out some unique loading gif animation bellow
How a Preloading effect help my website?
The preloading animation work to grab the attention of the visitors for some time and prevent the user from distracting or substituting/leaving your website
Because the preloader inform the user that the page is loading and it takes time to show up results
This loading signal helps the user to wait and prevent the user from getting frustrated
What is a preloading effect?
The pre-loading effect is an animation that only appears when a user visits a page and the page take some time to load then the loading screen effect display automatically on the screen and ensure the user that the page is loading and it will take some time to deliver the requested results
The loading transition goes on until the webpage doesn't load fully and get exposed
What are The Benefits of Preloader effect?
The preloading bar gives a very user-friendly look and it enhances the quality of your website in terms of user experience, instead of showing nothing while the page is loading on the browser it is better to have a preloading effect
The cool animation and effect of the preloader provide a beautiful interface and help users to stay connected unless and until the requested page is ready & live on screen
What is the best loading effects for blogger?
14 Best-animated loading effect styles add to blogger all preloading effects are free to use add this loading effect in your blogger website to give a better look and performance
in front of your audience.
Choose any one effect for your website
conclusion
So I hope you understand how to add a preloading effect to your blogger website if you face some problem while doing the process then let me know in the comment box I will solve your problem until that wait for my other blog post and stay connected.