Tuesday, January 5, 2010

How to improve the loading time of your blog




Hello friends...
Do you know, image in your blog will make your blog more interesting?
But the present of images in your blog will make the loading time of your blog is longer.
The long time taken for the loading will make the readers uninvited to read your blog.
By using the jQuery Lazyload, the loading time of your blog will be improved.
The image in your blog will be loaded when you 'look' at them.
So, to improve the loading time of your blog, you have to make some adjustment to your blog.


Step 1: Login to Blogger.com

Step 2: Go to Layout > Edit HTML

Step 3: Find this <b:skin><![CDATA[/*  tag and paste this code above it. If you already put this code please ignore this code:

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


Step 4: Use Ctrl+F and search for this </head> code.

Step 5: Replace the </head> with this code:


  <script src='http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' type='text/javascript'/>
<script type='text/javascript'>

    $(function() {
      $(&quot;.post img&quot;).lazyload({
        placeholder : &quot;http://i195.photobucket.com/albums/z105/dantearaujo/box.gif&quot;,
        threshold : 200
      });
    });

</script>
</head>


Step 6: Save your template and done.



Credits:

- The Lazyloader is inspired by  YUI ImageLoader.Utility by Matt Mlinac
- BloggerTuts
- Demo



  If you have any problem when installing the code, please leave a comment. You comment will be replied soon...

7 comments:

Mrs Nurul on January 8, 2010 at 6:51 PM said...

what do u mean by "look" the item.. how does this thing will work?

Admin on January 8, 2010 at 9:11 PM said...

oke thanks keep post

Syarhan on January 9, 2010 at 2:52 AM said...
This comment has been removed by the author.
Syarhan on January 9, 2010 at 2:53 AM said...

to ipin:
thanks for the comment bro. Please visit me again...

Syarhan on January 9, 2010 at 3:00 AM said...

to neon: 'look' the item means the pictures on the page will be loaded immediately when we stay on the section which contain the images or heavy image to be loaded...
for more details please click this DEMO

Ipin on January 15, 2010 at 8:12 AM said...

its ok
im wait next article
nice infoo

syarhanz on January 15, 2010 at 8:09 PM said...

thanks ipin... i'll post many new articles today... please do visit me again

Post a Comment

 

Blogger Tips and Style Copyright © 2009 Community is Designed by Free Blogger Template