20 Ways To Make $5000+ From Home. Earn Now!

Table of Content

How To Add CSS Webpage Loading Animation Fade Out Effect

learn trick to create display the css webpage loading animation effect on when website loaded,Stylish fade in fade out black background transparent load animated function on my blogger template
How To Add CSS Webpage Loading Animation On Website loaded in blogger template
Hello Guys,Today in this tutorial we are going to explain How to Add CSS Animation Effect On page Loading.Any hint what we are going to explore? Let me tell you , this trick works with on webpage load effect.When the visitor will go to next page this loading effect will be acitve and on screen it will show beautifully loading effect unless and until page is not fully loading the loading image will keep buffering and when its loading your page will be display and the loading CSS effect animation will be fade out.When the webpage is loaded fully of your blogger template it will automatically stop.So if you want to try this trick on your website or blog just follow the steps mentioned below.

How to install Blogger Page loading animation effect on template

installation steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Click on -> Template -> Edit HTML.
Step 3. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 4. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.
#cssonload {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_eb6FmmU3dEx0G6Gw2wyE9hY7pLUk1FCa7jvCx8IpLzduD4GwfyvBlvXCSoSS4LwJ8MMsPNA-1_OKCVII9JLIRsgM6qzy_ddk16PifokrZAUQiGBFEiKxlSTlt7rOL69BIdh4iewJvYb/s1600/bloggersstand+cssonload+gif+image.gif) no-repeat center;background-color:rgba(0,0,0,0.36);width:100%;height:100%;position:fixed;left:0;top:0;z-index:1000;}
Step 5. Now Search for <body> tag and add the following below tag just below <body>.
<div id='cssonload'/>
Step 6. Now Search for closing </body> tag and add the following below jquery code just above </body>.
<script type='text/javascript'>
// CSSOnLoad By www.Bloggersstand.com
Step 7. Now Save your Template..Done ! 

Post a Comment