Post Tags

Blogger Customize

Pretty posts

By Rubel
jQuery Full Screen Animated Pre loader Effect for Blogger/Blogspot Website
Live Demo
Previously, i have wrote an script on jQuery preloader animation effect for webdesign developer. My one of the reader message me on facebook that he want to add this on his site. I help him on facebook to add this on his website. And i thought that i need to write an tutorial on this.

Sometimes your website taking more times to loading. That's can be frustration for your readers. By adding this jQuery preloader effect, it can be reduced your reader frustration. When a visitor visit your website, they will see it. Then after full page content load, it will be removed.

How to Add jQuery Preloader Effect on Blogger


Let's follow below step to add this on your blogger/blogspot site.
  1. Login to your blogger dashboard
  2. Go to Theme>Edit HTML
  3. Click on Edit HTML
  4. Click anywhere inside the code area or you can read How to Search code in Blogger
  5. Press CTRL+F from keyboard and you will see a search box
  6. Search following code
    7. ]]></b:skin>
  7. Paste below code above ]]></b:skin> tags
    8. #preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222222;
    z-index: 99999;
    height: 100%;
}
#status {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    padding: 0;
}
  8. Again search following code
    9. <body>
    or 
    <body expr:class='"loading" + data:blog.mobileClass'>
  9. After finding anyone of these code, just paste following code after it
    10. <div id='preloader'>
   <div id='status'>
      <img alt='' height='64' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtoPt-rNLsJQhCGl8ssSfz_b3T9NAXrU4W1Gn2s580D9W1IgzdueYwRx8YuJnisAGIHUCcBbZ5Mk3ThUimUNmSX-i76Qzh4pcOP6vjCOuQP_5kKn2nVxR-hhyEsZRkbdNe1ylWBY2G2Uw/s1600/preloader.gif' width='64'/>
   </div>
</div>
  10. Again search following code
    11. </body>
  11. Paste following code before </body> tags
    12. <script>
/*====================================
* Preloader Effect
* www.codiblog.com
======================================*/
 $(window).load(function() {
   $("#status").fadeOut("slow");
   $("#preloader").delay(500).fadeOut("slow").remove();     
 })
</script>
  12. Click on Save template. That's it.

I hope that you have enjoyed this post. Happy Commenting!