Cara Membuat Lazy Page Loading Effect ke Blogger

Tweet

Cara Membuat Lazy Page Loading Effect ke Blogger - Loading efek pada blog ini adalah widget yang dimana membuat tampilan blog Anda akan semakin indah dimata pengunjung Anda, tentu saja dengan pengunjung yang memakai koneksi internet yang baik. Untuk itulah saya menuliskan Cara Membuat Lazy Page Loading Effect ke Blogger untuk Anda.

Cara Membuat Lazy Page Loading Effect ke Blogger:

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/AVvXsEgvkgTJyEzUmRZXCO0LskfycZFssU4RpZQUOXqrxUiSJUWEAoiU7UMNbURmnwdpH38j25KhfZlNrcM1ESsQ3mZZIwDrNOtBLQE1fFlF9OELovXwlSsOAou_4RdUo-hfjqMpCVxjaxisDZE/s1600/MBL-Loading-1.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXeUH_x2ClgpbB6B8mA1RMvBrr5OlxQzGyYwH4y90b0V8zsvn5HpxqhFAio-lR6lxjdYFON1D5ckSFY01QPRBt5aONu6XyphyphenhyphenESYnvI8TsTki3xmyUgZyEpKNYKNWDy5_6E7WVe5rI7dI/s1600/MBL-Loading-2.gif

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggCPncyQdEeg08TJ8Bl0Av9VSXGepCm96eoyA_d_ybam-Pu2NL5moGFq_B6vYT3ycX31HITl5deW02YEBtWc8Vcbh-jLovWCiUcJ64p6ceXS5t3OdJk6Q9H0FvwCWK_0q6g7vsfewqawI/s1600/MBL-Loading-3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbeEnOe-kjB2oFj9yR4SXWBcU8OKNxPigQW7udfbCwN3p9H2wuEsQu_PuowMHCYP75hORTL95vq3bblq1cAS50Yw6hyphenhyphenklEt4QzP0EgdgQz5CSpDccTs36c2JHYcaqHlNuDBvvt_By0C9I/s1600/MBL-loading-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEC8EmWfsJ0t2kT-5QrFTzYh-v0q7aFBZQlJjsw1_CKfbAYyAgaLwUJXaflGttGlt4GJpEZ_8Tqw_A0HPZ6pKghRVvrH-S_6v7_ZqFspQi4tFgwUwVH8F-QkvNIKf22tISRYP93jk601Q/s1600/MBL-loading-5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHRQXiwUNglvOhXZpAutIzuULCWRAr1Mg7XO3BQeBPo-US136Bv65sfYKaKG1zDTEkjPWp_8US9SKfAvuxSwNxapryDTLOBAwfnppMVwmOvd0yj7gpf9-zBfUNfDBJl0rv9QAr7j0vspA/s1600/MBL-loading-6.gif

Maka demikianlah artikel Cara Membuat Lazy Page Loading Effect ke Blogger, semoga dapat membatu Anda untuk lebih paham lagi. Terima kasih sudah membaca artikel diatas..