How to Add Stylish Preloader Effect on Blogger 2020

You must have seen a website that shows you an animated gif before it is fully loaded.
Basically, this function or preloader works to connect that user to your website.
This preloader plays an important role when a user has to face the difficulties of slow internet.

That's why today I will tell you how you can add preloader in Blogger
By the way, adding a preloader to a blog is not so difficult but it will not work if it is not properly placed.

What is the preloader?

A preloader is an element of our website or blog that connects a user to our website.
Take an example:-

When a user's internet connection is slow, when he goes to a website, then it will take some time to load the website completely.So there are more chances that the user will close the website.
If the website has a preloader on it, then the user will first see that preloader as soon as the website is opened, this will increase the chances of that user staying on the website.

Same Example in Hindi:-

किसी यूजर का इंटरनेट कनेक्शन स्लो होने के कारण जब वह किसी वेबसाईट पर जाएगा तो वह वेबसाईट पूरी तरह से लोड होने मे थोड़ा टाइम लेगी।तो ज्यादा chances है की वह वेबसाईट को क्लोज़ कर देगा। वही अगर वेबसाईट पर preloader लगा हुआ है तो वेबसाईट ओपन करते ही यूजर को सबसे पहले वह preloader दिखेगा, इससे उस यूजर के वेबसाईट पर रुकने के chances ज्यादा हो जाएंगे।

And to understand it better, watch the video below.

You can apply different types of preloader on your website or blog.
Below I have given some samples of a preloader.

To add a preloader to Blogger you will need some script/codes.
You will not be able to copy these codes, so you can download them.
Click here to download all scripts/codes

To add it to Blogger/Blogspot.com follow my steps mentioned.

1. Go to blogger.com

2. Click on the theme then click edit HTML

Press CTRL+F and find the ]]></b:skin>

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://1.bp.blogspot.com/-S32ZPX-d254/XteyuXk7NvI/AAAAAAAAA2M/uaJA9s_KS447uDrcjj-Sb_bxdmpydhgmwCLcBGAsYHQ/s1600/preloader%2Bbloggers%2Banimation%2Beffect.gif') 50% 50% no-repeat rgb(249,249,249);
}

Replace the red URL with your preloader gif URL
Now paste this☝ code just before ]]></b:skin>

3. Paste this👇 code below <body>

<div class="loader"></div>

4. Place this👇 code before </head>

<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>

5. Click on Save theme

You have successfully added a preloader to your blog.
If you have any problem in applying it,
then you can comment below and talk to me.

Share with your Friends SHARING IS FREE😀

Click here to download all the scripts/codes

You May Like Also