Lazy Page Loading Effect

Fitur yang dimiliki Lazy Page Loading Effect :

Ini adalah membuat search engine yang ramah sehingga tidak akan mempengaruhi kecepatan situs apapun. Hal ini kompatibel dengan browser hampir setiap yaitu Chrome, Firefox, Internet Explorer, dan lain-lain Ini memiliki efek memuat yang beragam, sehingga Anda dapat memilih sesuai dengan kebutuhan keinginan Anda. Hal ini fleksibel coding sehingga Anda dapat menyesuaikannya tanpa keraguan apapun. Ini juga akan membantu blog mereka yang mengambil sedikit waktu untuk memuat karena fitur pemuatan akan menjaga pengunjung Anda tertarik pada blog Anda.

Cara Membuatnya:

Buka akun Blogger Anda.
Masuk ke menu Template >> Edit HTML >> Proceed
Sekarang dalam cari kode dibawah ini :
]></b:skin> 
Pastekan kode dibawah ini diatas pada kode di atas:

#mbl-lazyloading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(Loading-GIF-Here) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #mbl-lazyloading { display: none; }
@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#mbl-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #de1301;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#mbl-loader {
    height: 100%;
    display: none;
}

Cari kode dibawah ini :
</head>
Pastekan kode dibawah ini, diatas pada kode </head>

<script>
(function($){
$("html").removeClass("MD");

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

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

Cari lagi kode </body> dan pastekan kode dibawah ini diatasnya :

• Kode ini ditampilkan jika Anda ingin menunjukkan ini efek pemuatan yang hanya ada di Home Page. (Recommended)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://putradoi.blogspot.com">Mazz Puji</a></div></div></b:if>

• Paste code berikut jika Anda ingin melihat efek loading pada setiap halaman dari blog Anda.

<div id='mbl-lazyloading'><div id='mbl-progress-bar'></div><div id='mbl-loader'>This Loading Effect is Powered By<a href="http://putradoi.blogspot.com">Mazz Puji</a></div></div>

TIP:

Anda harus memilih apakah Anda ingin menampilkan efek pemuatan hanya pada homepage atau website masing-masing dan setiap yang ada di blog Anda. Menurut kami, Anda harus menjaga efek pemuatan di situs Anda karena efek beban berulang dapat mengganggu pengunjung Anda.

Sekarang dari coding CSS di atas Ganti  Loading-GIF-Here dengan salah satu efek pemuatan berikut animasi yang paling Anda sukai.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjujeIiOe4pPanQIyawq2bdUq3ccbuU3N4IglGtKe5DeCALo5fPorEZsYyPM09kYM2dYOEOXyvJVoNrhLLTlxipZ95CJVnHd1WpqgtIaTqcR6bAn9PyJoK4nP2F0DKTSBj8E-0dO8zb7s0/s1600/MBL-Loading-1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tjf9tCUa4Lv9Nou4bMK9_GC-e6InwTHEXFjW1NZIt27jSoq9V3dEafJWsedKtZLiReuLwr6ckpOMDOmm2nrw4JhcZkwan1N-7KHsfDXBQypaWIL5gfA20Rj8RSt8_kYZcuZSgNocjbM/s1600/MBL-Loading-2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIJjTwLBqv4Oef4KBVshX1JXi68l_bfYYmpO2zNEdxUjRWSjFY-mJsWpzbI69St6JG2j3upW5aRGTW7FyrRSOrA8L_QO53TCLZYCNp1xH_6JIawncG_f0gboGlZxnASkQ2wPRPk5nAooo/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis1oFJsGkasUkH_7sAY8VUvrimWzpFyecmya8yvoiRQNEBDFa0r-kl7q1Dg8hGituh7E97Fv2rMMSsq8P1TlrMfvuPoGmx0CPAoZNUNBNbX2b5v-ZYczcA2tqTRgoKCPYi6tmneUeeaIo/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQyvOp-8sYo72nL3FAQyAs1TwjEWShHln4tvQe9wJujp_axs3n_ZdObVfjexa7cdAADMg5EBSxE-hUO4TNp63pOTuRhYdu8xFFWLVUNc-mGwACRai7kpI6LXa2NM9QSUsmMaXsn6-7uBQ/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEXxhkqx50jLQwCJ7ZzfQXukDrz2fCO8_SJD9GypHTmaSPnfIk9bGI3swPpbRhO7o2Fo9IH80AtdQthyphenhyphenL_wa74OxDNU_yDrPfAe5L0k3FrwUj-Q8SwA_D74oMGztO-CdB4BPh8X1YdJQc/s1600/MBL-loading-6.gif

Oh Za Sob Yang Terakhir Jangan Lupa Simpan Tamplate_Nya Za... Good Luck Sob Happy Blogger