![]() |
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 ज्यादा हो जाएंगे।
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>
<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
Related Article: How To Create Fake WhatsApp Account? Full Guide
Related Article: How To Get Google AdSense Approval(2020)?
Related Article: Google Adwords Coupon Codes 2020: Get $100 Coupon Code Now
Related Article: How To Do Blogspot SEO Settings? Indexing Crawling And Meta Tags?
Related Article: Make $100 in Just 10 Days with Za.gl
Related Article: How To Submit Your Website/Blog into Google Search Engine?
Related Article: What is Sitemap in Website? How To Create A Sitemap?
Related Article: How To Submit Your Website or URL To Search Engine? | Yandex and Bing Search
You May Like Also
Related Article: How To Create Fake WhatsApp Account? Full Guide
Related Article: How To Get Google AdSense Approval(2020)?
Related Article: Google Adwords Coupon Codes 2020: Get $100 Coupon Code Now
Related Article: How To Do Blogspot SEO Settings? Indexing Crawling And Meta Tags?
Related Article: Make $100 in Just 10 Days with Za.gl
Related Article: How To Submit Your Website/Blog into Google Search Engine?
Related Article: What is Sitemap in Website? How To Create A Sitemap?
Related Article: How To Submit Your Website or URL To Search Engine? | Yandex and Bing Search
Related Article: Geo-targeting: What Is Geotargeting?
Related Article: How To Earn/Make Money Online Top 5 Incredible Ways
Related Article: What Is a URL? How does it Work?
Related Article: What is a DDoS (Distributed Denial of Service) Attack?
How to Add Stylish Preloader Effect on Blogger 2020
Reviewed by Tech Wala Dost
on
August 20, 2020
Rating:

i cant copy a singel code . bullshit site . useless post .
ReplyDeleteHello moonsky, i have already mentioned above that you cant copy these codes so have to download them separately. Well you can click here to download all the required codes Preloader codes download
DeleteThank you