9 Oct 2013

Premium Style Loading Effect On Blogger's Blog

Nowadays All Bloggers wants Their Blog To Be awesome Or to design awesome templates.This Widget is For Those people only.
SO lets Start.











To add this effect to your blog do the following things.

Adding the HTML and Script

Add the below given code just above </body>.
<style>
#mbs-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyIEIypx7Ej0xDaits0aCaxsqjV5I1IjYua4SzIRyyN2WCoTLFysRVa_WiD8ahGuqx47nwNofgBoPlKUlXd6DAQ3zmx8gYzzFno7eVaV28fEsFPM2SwxN53lV-bYM-cjIrs5sYHFYsf4s/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="mbs-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#mbs-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

After adding this code, save the template

IF YOU HAVE ANY PROBLEM WITH THIS WIDGET PLEASE COMMENT BELOW. 

No comments:

Post a Comment

Ads Inside Post