How to Add Preloader in Blogger Website Using HTML CSS and JavaScript
How to Add Preloader in Blogger Website Using HTML CSS and JavaScript



How to Add Preloader in Blogger Website 


Good day, lovely website viewers. We've gone over the most important aspects of using the Blogger platform. You can now go on to the practical while also being attractive. Surely you've noticed that when you first visit some websites (blogs), a tiny animation appears on your screen that lasts exactly as long as the site takes to fully load the visited page.

A specific animation item will squirm in front of you until all of its components are loaded. This is clearly done not simply for aesthetic reasons, but also so that the visitor may see all of the components of the sites in front of him at once, rather than separately. Furthermore, such a widget demonstrates that your website is more than professional. The more credible the design, the better.


How to Add Preloader in Blogger - Steps:

1. Go to end of the post and download the code.

2. Open the code in notepad or any text Editor

3. After Opening, you will see four section

  •  b:skin
  • <body>
  • </body>
  • Some Preloader Effects
4. So after this, go to Blogger Dashboard.

5. Click on THEME > EDIT HTML

6. Then Press CTRL + F and find the ending tag of "b:skin".

7. After Finding, Copy the b;skin section code(which code you 
have download - SECTION 1  ) and paste it above of the ending tag if b:skin.

8. Then again press CTRL + F and find the "Body" Starting tag. And then copy the code of body section(which code you have download - SECTION 2) and paste it below of staring tag of body.

9. Then again press CTRL + F and find the ending tag of body. And then copy the body ending tag code(Which you have download - SECTION 3) and paste it, above of the body ending tag.

10. Finally save your blog and Check the result.


Note: After checking the result, if you are not satisfied the default animation, you can change it.

Changing Animation -  Following these Steps:


1. At the First section of the code, you will see this line (background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-b5M5DKDp2Pt9TNfcHAEVcF_6-8d-XqPiZN0QypKctMCPkjZUmJVLJGQfhZ0COSUo4qp4N4ZLawhnuVvHbS_70liHlbF1f7PKLp_ai75O7XCQFfpK2jIhb3ZofPQmU3dniPbb35Pyes/s1600/preloader.gif);)

2. In Small brackets() URL Replace with other Animation. Some animation URL, i have also provide some amazing and cool animation URL in  SECTION 4.

3. Finally, Save your blog and check result again.




Video Instruction




If you want to learn more and have a any problem, when you working on blogger, and during your work, you feel some problems of any topics of blogger, just go below the comment box and explain your problem with #crazyeditingstudio. 

When your comment will receive me than I will check your problem and try to solve your problem. And if need a dedicated article of your problem, I will must upload it.