LWTHacker

Add Page Loading Effect To You Blog

,

Adding page loading effect to your blogger blog will reduce your readers get boring. Its main purpose is to tell your readers that "your content is loading, please be patient".  This effect works with jQuery. I hope it can help your visitors to stay for  a while till it gets loading.

Just follow below simple steps carefully to add this jQuery Page Loading Effect to your blogger blog:


1. Go to Blogger Dashboard > Template.

2. Backup your Template before making any changes to your blog.

3. Click on Edit HTML.

4. Tick Expand Widget Templates.

5. Press Ctrl + F and search the </head>.

6. Now add the below code just Above/Before </head> (Download as .TXT):

<style>
/*  jQuery page loading effect by Lwthacking.blogspot.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdGW8tL6_6zkaXC-et1CkisE1DkYA0e3Igglzz_i3_HKDFmlYs-ZZt8QYYgciv8v-FDihVfJ_jvi_GWkRU52dmRsNAt5r_nLamhPowF5CcvCNgDuQ0UReTk26uz1B4KZtc6sPTFUtOUiQZ/s1600/MD-Lodding.gif) 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 {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");

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

$(window).load(function(){

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

 You can change the page loading image by changing image url in the above highlighted line.

7. Now search for code <body> too (use Ctrl+F to find the code)
8. Copy & Paste below code just Below/After <body>

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


Note: If you wanna show this page loading effect only in homepage Replace the code Above with the Given below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <div id='md-loading'><div id='md-progress-bar'></div><div id='md-loader'>Loading...</div></div></b:if>

Preview your blogger template and if you are satisfied you can save your template. Now you're done!
DMCA.com