4 January 2013

Add Loading Effect Into Your Blog


loading effect

Blogs are like child for bloggers like us.We do several things to make it popular and attracted on the eyes of our blog reader.So we do several tweaks with our blog template and add several widgets on our blog.Those surely make some extra priority on our blog visitors eye.If they love to land our blog we feel satisfy.So just like you we also try to experiment these tweaks on our blog.During those tweaks we just got to know about a tweak and just wished to share with our reader,How about giving a shocking loading effect to your visitors.Engage them into your blog using something new,something special.you may take a look to the below screenshot.

animated loading
Hope now you got what we're talking about.Like it and Wanna add it in your site?Ok here we go.

Add Loading Effect on Blogger

  • Log onto Blogger Dashbord > Template > Edit HTML.Search for <head> tag and add the below jquery library just after <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

After adding this you also have to add the following script  after the previous one.

<script> (function($){ $("html").removeClass("v2"); $("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#progress-bar").stop().animate({ width: "100%" },600,function(){ $("#loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>

  • Add the following code just after the <body> tag 

<div id='loading'><div id='progress-bar'></div><div id='loader'>Loading...</div></div>

  • Now add the following code before  ]]></b:skin> tag

#loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #3c5a76 url(http://2.bp.blogspot.com/-3EigcNX6oak/UFRyQBMI8-I/AAAAAAAAAF0/59LtO4wgKV8/s1600/downgif.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .v2 #loading { display: none; } #progress-bar { position: absolute; top: 0; left: 0; background: #7fb061; opacity: 0.8; width: 0; height: 18px; } #loader { background: url(http://1.bp.blogspot.com/-lOxi3br4DF4/UFR0jN1OiPI/AAAAAAAAAF8/6rSbuKr91lg/s320/down1.jpg) no-repeat center 25%; height: 100%; display: block; }

NOTE:If you want to change the loading text or animated loading image according to your site then just change those coloured url..

 Must Read :  Add Scroll Back To Top Button On Blogger

Now save template and you're done.Now it's time to make your blog reader shocked with this amazing effect.Happy blogging..!!

Articles You May Like

8 comments: Leave Your Comments

  1. Another helpful tutorial for bloggers. Thanks!

  2. awww another blogger thing! cool though! hehehe I hope there's a girlier loader. hehehe :D

  3. Won't this just add up to the loading times of your blog? I am concerned that people may have to wait a little longer before they can read the page. But thanks for sharing the concept.

    1. Yup,you are right in this matter,it increase the loading time of your blog but it make your blog looks different.Those who want to make their blog look better,may prefer this loading effect.

  4. Thanks for this cool tip. Might consider using it one of these days. :)

  5. Wow! So cool. Great idea to have like this on my blog. Thanks for sharing.

  6. A great tip, I might well end up using this one day.