Cara Membuat Lazy Page Loading Effect ke Blogger

Jika Anda telah melihat Google Dinamika Tema View untuk Blogger, maka Anda mungkin menyadari fakta bahwa sebelum seluruh template akan terkena ICON Jquery Kecil pemuatan muncul yang benar-benar menyentuh perhatian kita semua. Misalnya, Anda berpikir untuk memainkan game PC jadi sebelum Anda bisa mulai bermain Anda harus melalui bagian LOADING. Demikian pula, kita akan memasukkan Efek Jquery Memuat luar biasa untuk Blogger kami sehingga pengunjung kami tidak akan melihat gambar atau konten mendapatkan beban sebaliknya kita akan menunjukkan kepada mereka loading halaman Jquery lucu yang benar-benar akan menghibur mereka. Hari ini kita akan meningkatkan akun Blogger Anda dengan cara membuat lazy page loading effect ke blogger yang akan bermuka masam menarik perhatian pembaca.

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.

Langkah :

1. Buka akun Blogger Anda.
2. Masuk ke menu Template >> Edit HTML >> Proceed
3. Sekarang dalam cari kode dibawah ini :

]></b:skin>

     4.  Pastekan kode dibawah ini diatas pada kode diatas :

/*  D-Copy Lazy Page Loading Effect ( http://d-copy.blogspot.com) */
#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;
}

     5.  Cari kode dibawah ini :

</head>

     6.   Pastekan kode dibawah ini, diatas pada kode dibawah ini :

<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>

     7.  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://d-copy.blogspot.com">D-CopyBlog</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://d-copy.blogspot.com">D-CopyBlog</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/AVvXsEh3yRIFH0hW4w1ZVQM5fIHA7rRteiiiqpsRHPmAWi8-ptbqh3-M8NhjMd2sH-qx4WN0CaVGdI9IiPyHeoERMfY7RxXR4gsPhKzoRM0lY6XKSd_Hyq1PGKdWYfWZrZZ3KQLhvqGUmizd2fs/s1600/MBL-Loading-1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-H3kjXYkMaIS3GMkAKv8s8lw1kWJK0OdljtJW-aZwEUQnusFijKyBBxkdRPG2jQWphamaiz0Gbt51BsNXF4V2ARhespfx2Pl3f2sUDyjivFGh0Y10NVA41d83qU4am5KofmUFDZCMSc/s1600/MBL-Loading-2.gif

 

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUmP-Gb5Fyp42QiEsHj9KrUtxaRerKfNvYaV7zbThC8BxUTM5UrH-boHJzlqt5q2epjAaTjP109Z6wTDqU46k5D3FzHe3jHJBp4KBDb9tEnD3qN4UxZ-VZ2OBPdBrczya3qQzFdynOl_0/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GmjssiJQg_tUiSVapzWpBlbpNvRz5Bac5iBaPPIK9S9VC5gLzGIzbZ2thKHWF4aiQBqc49M-_hu5cpCa7ZT1FMYqNFhRODYbIhbHNvkc18LMieRTKhyphenhyphenP9GSnbneq5wcisNTcM4KZW-0/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8eCnCBRf55h6OON_qbrqTSX4gktJjxObUyI7A6vwzzXzzOO5n770D-5xMGFgHAB2jCEJZ8pw6QZalYecrrbH4kVoCz-Ju9ohntB64ZQNrOs1zycUdsschR98v6sJY_PrTtbvrRlHvDX8/s1600/MBL-loading-6.gif

sumber informasi :
http://d-copy.blogspot.com/2012/09/ara-membuat-lazy-page-loading-effect-ke-blogger.html