Saturday, August 18, 2012

Attractive Blogger Page Loading Effect With Jquery

This is  also another cool trick to your blog. Most of the time will take 2,3 seconds to view your blog.So, do you like to add some loading effect for that 2,3 seconds? So this is the right tutorial for you.This effect working with Jquery, You better to check the demo link below. You will figure-out , how will it works. Follow these steps to add it your blog.

1. Log in to blogger account and Go to Design >> Edit HTML

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    </head>

4. Paste below code Before </head> tag

/* */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url( no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
#md-loader {
    height: 100%;
    display: none;



$("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) });


    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });


5. Now Find this code  by using Ctrl+F <body>

6.  Paste 1 of below code after <body> code

* Add this code for showing this effect for all blog pages.
<div id='md-loading'><div 

* Add this code for showing this effect only home page.
<b:if cond='data:blog.url == data:blog.homepageUrl'> 

 <div id='md-loading'><div  

7. Now save your template
 you are done.