Type Here to Get Search Results !

How To Add Loading Animation in Blogger Site on Blogspot

How To Add Loading Animation in Blogger Site


 Add Loading Animation in Blogger Site on Blogspot


Adding a Loading Animation/CSS can improve your user interaction with your blog. user dont feel they are waiting for the page load.


Follow My Steps to Set-up a Loading Animation

Step 1. 

search for </b:skin>

Copy the code & paste before ]]></b:skin>


Replace 'image url' with the link of the gif image.

Infinite loop gif: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5EK5tRFb9T31kKxcfLFVHrHQf1gau46u9YdgwGQehUfB0qniM3NfGNwqgiz1TqlybvDTV6lETcR0pu9rU6wVAjJx7SSRydSIZblR2ngLRWvYxwyHE0diQLzd1NsARMTYBlz6wzDopHgQ/s320/Infinity-1s-204px+%25281%2529.gif

------------------------------------------------------------------------------


.loader {

    position: fixed;

    left: 0px;

    top: 0px;

    width: 100%;

    height: 100%;

    z-index: 9999;

    background: url('Image URL') 50% 50% no-repeat rgb(249,249,249);

}

/* Created by Hive-Store */

------------------------------------------------------------------

Step 2. 


search <body> or <body

copy & paste after body tag start 

---------------------------------------------------

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

---------------------------------------------------


Step 3. 

search for <head> 

copy & paste under head tag

---------------------------------------------------


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


---------------------------------------------------

More Loading Image Visite Now ----https://loading.io/

------------------------------------------------------------------------------------------------------------------------



Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad