We always want to make our blogs look more interesting, so we always use different methods, templates, gadgets, etc. One such topic to discuss today is – how to add stylish website loading animations?
I think this loading animation plays a very good role for any site. Not only does this give your site a nice look, but it also has a great benefit. I will say that but first I will say what is the function of website loading animation?
The function of website Loading animation
Each of our websites has a specific database where all the data or files of the site are stored. This data center has stores, it is called hosting. In the case of Blogger, it is free, but you have to buy it for WordPress or any other platform.
However, when a visitor wants to open a link or file on your site, the request will go to your site’s data center. This request takes some time to return to the data center.
How much time this request will take depends on the hosting provider and the internet speed. The time it takes to fetch the data of a site, the website becomes blank until the data is fetched.
If you add this website Loading animation to your site, the website will not show blank during loading time. At that point, the animation you set will be the show. Now I will tell you why to use website Loading animation?
Benefits of website Loading animation?
Suppose if your site has a low loading speed, it is too late to open any page. Then most of the visitors will land on your site but if the loading is delayed then the visitors will return.
As a result, the bounce rate of your site will increase, and if the bounce rate of the site increases, the ranking of the site will decrease. If you add a stylish website Loading animation to your site, then visitors will enjoy and wait for that animation.
So loading animation is used for two main reasons –
- To reduce bounce rate,
- And increase page views.
How to add Website Loading animation effect to Blogger site?
Since it is a blogger website, you need to edit the theme code, so follow the next steps carefully. Because if there is any wrong editing, it can have an effect on your entire site. Now, look at the steps –
1. Backup your theme:-
- Click on the Theme option,
- you can find the backup option under the Edit HTML section,
- Click here and download the theme.
2. Header code placement:-
- Open the theme by clicking on the Edit HTML option,
- Search <head> tag,
- Past following code after <head> tag,
- Save changes.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>- 3. Body code placement:-
- Then find </body> tag,
- Copy following code and past before </body> tag,
- Save changes.
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(500).delay(8000).fadeOut(500);
});
//]]>
</script>4. CSS code placement:-
- Now search ]]></b:skin> tag,
- Then copy following code and past code before ]]></b:skin> tag,
- Add your GIF url by replacing GIF URL text,
- Finally save changes.
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999999;
background:#FFFFFF url('GIF URL') no-repeat 50% 50%;
padding:1em 1.2em;
display:none;
}How to Create Custom Image/GIF URL?
- Go to blogger dashboard,
- Click the Pages option,
- Create New Page,
- Upload your custom image/GIF,
- Then publish Page,
- Visit page,
- Right-click on Image/GIF and copy the link address,
- This is your image/GIF URL.
NOTE:- Must be an image / GIF in png format.
Some free Stylish Website Loading animation GIF
- TAGS:- add loading animation to website, website loading animation, CSS loading animation, how to add loading animation in blogger, loading animation, add preloader to website, blogger loading animation, custom site loading animation in blogger in 2020, loading animation to blogger website, loading animation CSS, how to add animated page loading effect in blogger, add loading animation in blogger, loading animation for blogger, blogger loading animation 2020.
