Skip to main content

How To Add Animated Page Loading Effect In Blogger

Hey Friends, welcome to the amazing world of tips and tricks. After many SEO tips I am back with some cool Blogger Tricks. In this post I will show you how to animated page loading effect in Blogger. Isn't it cool to show of your visitors a loading effect while your page loads. It will surely give your blog a professional feel. In this post I will provide you different ways to add animation effect in Blogger blog. You can also add animated loading effect on Blogger sidebar. I will explain you each and every ways to create a beautiful animation effect in your blog.
You may be receiving users who don't have much faster Internet speed. And sometimes they may feel bored by waiting while the page loads. If you will add animated page loading effect in your Blogger blog than it will make your users a little less boring experience. Now we can start the tutorial. Lets start with the easy method.

How To Add Animated Page Loading Effect In Blogger

Animated Page Loading Effect For Blogger

This method is very easy and you will not face any difficulties in adding this effect for your blogger blog. This method is mostly based on CSS. It means it can slow your Page loading. If you have many Java scripts and large CSS codes in your blog I will not recommend to add this types of effects as it may slow your page loading time. If you want to add this page loading effect in your blog than follow the steps given below:

How To Add Animated Page Loading Effect In Blogger
Your Loading Image Will Something Look Like This Picture
Let me first remind you to make a backup of your template. It will surely help you if by chance you destroy your template. To make a backup of your template Go to Blogger Home > Dashboard > Template. Now in Template page click on Backup/Restore template and than Download your Template.
Now as you have made a backup of your Blogger Blog. We may now know the trick on adding animated page loading effect in your Blogger Blog.
  • First of all Go To Blogger Home.
  • Now Go to dashboard. In dashboard click on template.
  • In the Template page Click on Edit HTML.
  • Press anywhere on the HTML page and than press CTRL+F to open search box. Now search for "]]><" without quotes.
  • Now you have to paste the code given below just above "]]><".
#loader{background:#F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfMtBEHPfKnluJRSjOnDRxaj9Ykuk-RYok4uHtiuOiQz4TsBvRzfuAtwFw4ZG5R10YooIBHGB_vA3m02GkdRXt91Fb6RJah1_LFyXFgtFlBaqVnXJtzOVaT5DKHquGTCC1rKZRMfypd4/s1600/Loading+(5).gif) no-repeat 50% 50%;bottom:0;color:#FFF;display:none;left:0;padding:1em 1.2em;position:fixed!important;right:0;top:0;z-index:99999}
  • After you paste the above code as specified we can proceed to next step.
  • Now search for "</body>" tag without quotes. Now paste the code given below just above/before </body> tag.
<script type='text/javascript'>$(function(){$(document.body).append("<div id='loader'></div>");$(window).on("beforeunload",function (){$('#loader').fadeIn(1000).delay(6000).fadeOut(1000);});});</script>
  • Now save the template. You have just added animated page loading effect in your blog with just little CSS codes.
You can also change the image of loading. To insert your custom gif file in place of default image than you can replace the URL in blue with your preferred image.

In the previous method you learnt adding animation on your page loading with CSS method. As I said I will make you familiar with many ways. In this method I will show you adding Cool animated page loading effect with Jquery. This is more advance and easy. It will not slow your page loading so much.  Let's see this method.

Animated Page Loading Effect With Jquery For Blogger Blog

As the title explains this method is based on Jquery. Jqury is really a fun and it helps in adding different types of functions and effects with ease. If you love Jquery and want to prefer this method for adding on your Blogger blog than follow these easy steps.
  • Make sure you have a backup of your Template.
  • Now Go to blogger Home > Dashboard.
  • Now Go to template. In template page click on edit HTML.
  • Now find the </head> tag. Now paste the code given below just above/before </head> tag.
<style> /* jQuery page loading effect  */ #ht-loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbfMtBEHPfKnluJRSjOnDRxaj9Ykuk-RYok4uHtiuOiQz4TsBvRzfuAtwFw4ZG5R10YooIBHGB_vA3m02GkdRXt91Fb6RJah1_LFyXFgtFlBaqVnXJtzOVaT5DKHquGTCC1rKZRMfypd4/s1600/Loading+(5).gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .HT #ht-loading { display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #ht-progress-bar { position: absolute; top: 0; left: 0; background: #FFFFFF; opacity: 0.8; width: 0; height: 18px; } #ht-loader { height: 100%; display: none; } </style> <script> (function($){ $("html").removeClass("HT"); $("#header").ready(function(){ $("#ht-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#ht-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#ht-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#ht-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>
  • After pasting the above code in the specified place Search for </body> tag. Now you will paste the code given below just above the </body> tag.
<div id='ht-loading'><div id='ht-progress-bar'></div><div id='ht-loader'>Loading...</div></div>
  • Now Save Template. Congrats! you just added Animated page loading effect with Jquery in your Blogger blog.
Further Customization On Jquery Method
  1. You can change the Loading image if you want to change it. To change replace the image URL which is in blue with your own image. It will be good idea to keep animated image.
  2. If you think background color doesn't fit with your animated page loading effect image than you can change the background color of the loading page. To do this change the hex color value #FFFFFF with your preferred background color.
That's all about the amazing page loading effect.

Well these were the two methods of adding animated page loading effect on Blogger blog. I know this loading effect is really cool. I hope it will give your blog more professional feel and you will be able to impress your lovely users with this cool animated page loading effect for Blogger blogs.
If you are facing any type of problem than feel free to ask me.

Labels:

Comments

Post a Comment

Popular posts from this blog

Need for Speed (NFS) Carbon Cheats, Codes and Unlock Parts

Need for Speed makes some great racing games like NFS Most Wanted, Rivals etc. and Need for Speed Carbon is another 10th addition to their NFS series. It's the first game to get the PEGI rating 12+. It's a very good game with it's story line. If you are looking for some adventure and a good racing than this one will be in your game list. While playing the game you will face some difficulty in completing this game. And from than onwards you may look some cheat codes that can help you in completing NFS carbon. And to make it easier for you here is the list of some working cheat codes and trainer. But you proceed to know about cheats and tricks for Need for Speed Carbon you would like to know the adventurous story of the game. So let's start. The game is set in the fictitious city of Palmont. Soon after the player leaves the Rockport City ( remember jumping of an old bridge in last scene of NFS Most Wanted) the player drives on a route to Palmont city with his BMW ca...
2 comments
Read more

How to Watch Any TV Show or Movie on Kodi

Kodi is a cross-platform media center solution developed by XBMC/Kodi Foundation, a non-profit technology association. Kodi which was previously known as XBMC has been growing rapidly from last few years. While the application offers to play local media files, but, it has plethora of third party add-ons, which, we can use to increase it's usefulness. In this post, you'll learn the process to install Indigo and Exodus on Kodi 18 (64-bit). The process is similar on version 17 of this app, however, I haven't checked the previous versions. Note : Streaming copyrighted content is illegal, nevertheless, it's completely legal to use Kodi for viewing the content you've purchased. First, we'll need to add Indigo Installer. Follow the following steps to know how to do it: Open Kodi . Click on the Gear button (settings). Select File Manager . Double Click on Add Source . Click on <None> ... ...type  http://fusion.tvaddons.ag and...
Post a Comment
Read more

Top 5 Alternatives to Extratorrent

In an unforeseen move, Extratorrent decided to shut down few months ago. It was one of the most popular torrent site, but now users who visit it's homepage are greeted with a message which clearly states they are not going to return in the future. Now that they are gone, various clone sites such as extratorrent.cd has been setup to squeeze money from the confused visitors via its advertisements. People visiting these clone sites should know that the original ExtraTorrent owners have deleted all data, and none of the impostors have access to the old ExtraTorrent files. There are many alternatives out there. You just need to look at the right place. Take a look at the following original torrent sites which might entice you. 1337x.to 1337x is probably the best designed torrent site you'll ever come across. Although it lacks the ExtraTorrents' rating system, nonetheless, most of the contents are verified by moderators. The site has easy-to-navigate subsections whic...
Post a Comment
Read more