Pretty posts

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 Template>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>
  8. Paste below code above ]]></b:skin> tags
  9. #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;
  10. Again search following code
  11. <body>
    <body expr:class='"loading" + data:blog.mobileClass'>
  12. After finding anyone of these code, just paste following code after it
  13. <div id='preloader'>
       <div id='status'>
          <img alt='' height='64' src='' width='64'/>
  14. Again search following code
  15. </body>
  16. Paste following code before </body> tags
  17. <script>
    * Preloader Effect
     $(window).load(function() {
  18. Click on Save template. That's it.

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