Bishal Creations Complete PC Solutions And Games Download

How To Add Stylish Page Loading Effect In Blogger

Well recently I added an effect on my blog that used to Add Loading Effects In Blogger as someone clicks on any post link. So this effect looks cool and also removes the waiting time problem when visitors has a slow connection. Well now by waiting time it will not actually make your blog fast (I think it will effect the loading time) but when visitors click on any post link he will see this loading effect which will make him believe that the post is just loading and it will popup any time soon. So now if you are still thinking about what kind effect I am talking about just try to click on any post link and you will see the grey background fade in with that Ajax loader .gif file. So now if you think this effect looks awesome well just add this effect to your blog too and enjoy. [Demo] so you saw this awesome effect right.
So now let me remind you its just a work of CSS and JavaScript, so you are not really adding a loader to your site but it’s a visual widget that gets loaded when we command it too, and it might even increase your blogs loading time as it’s a script based work, so if you are already using enough JavaScript files then do not add this widget else it works fine just give it a try.




    •   Open Blogger > Template > Edit HTML.
    •   Search for  </head> 
    • Paste the following code above  </head> (Skip this step if you have already added this code in your template)
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>









    • Now search for </body>
    • Paste the following code above  </body> 





    • <style>
      #nbl-page-loader {
              position: fixed!important;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 9999;
              background:#000 url(&#39;http://1.bp.blogspot.com/-R3POBgkVhrw/VeGe4umHVfI/AAAAAAAAEr0/C4blkxPJ6jM/s1600/Bishal%2BCreations.gif&#39;) no-repeat 50% 30%;
              color: #FFF;
              display: none;
              font: 0/0 a;
              text-shadow: none;
              padding: 1em 1.2em;
              opacity: 0.5;
      }
      </style> 
      <script type='text/javascript'>
      //<![CDATA[
      $(document.body).append('<div id="nbl-page-loader">Loading...</div>');
      $(window).on("beforeunload", function() {
          // ... Show the Animation `.fadeIn()`
          $('#nbl-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
      });
      //]]>
      </script>
      
      • Save your template

      Final Words

      This was a short tutorial on adding stylish page loading effect to your website. How do you like it? Share your views in the comments below. 

       Happy Blogging! 

      Previous
      Next Post »
      Post A Comment Using..

      No comments :

      Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
      Note:
      1. Make sure to click the "Notify Me" link below the comment to be notified of follow up comments and replies.
      2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
      3. Please "Do Not Add Links" to the body of your comment as they will not be published.
      4. Only "English" comments shall be approved.
      5. If you have a problem check first the comments, maybe you will find the solution there.
      ConversionConversion EmoticonEmoticon