Memodifikasi Loading Page Blog Dengan Efek

Saat anda mengunjungi sebuah blog, sebelum masuk ke halaman blog,  anda akan menemukan bahwa saat loading akan terlihat halaman putih saja, blank page ini akan hilang bila halaman telah selesai loading. Anda mungkin berpikir bahwa halaman loading tidak dapat diganti dengan animasi sehinggaanda tidak bosan saat anda menunggu hingga halaman selesai loading. Tapi tahukah anda? anda dapat memodifikasi loading page ini dengan menggunakan kode tertentu dan memasang animasi yang anda inginkan di dalamnya. Apakah anda penasaran? Silahkan anda simak caranya berikut ini.

Cara Memasangnya di Blog

Sebelum anda melakukan perubahan pada halaman HTML Template, sebaiknya anda mem-backup template anda terlebih dahulu. 

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>

    /*  TKB Page Loading Effect (www.thekampoengblogger.blogspot.com) */
    #TKBloadingeffect {
        position: fixed;
        z-index: 50;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #FDFEF8 url(URL Gambar Loading GIF disini) no-repeat center;
        line-height: 350px;
        text-align: center;
        font-size: 36px;
        color: #353231;
        text-indent: -9999px;
    }
    .MD #TKBloadingeffect { display: none; }
    @media only screen and (device-width: 768px) {
        #loading {
            position:absolute;
            width:1040px;
            min-height:768px;
        }
    }
    #TKBprogressbar {
        position: absolute;
        top: 0; left: 0;
        background: #de1301;
        opacity: 0.8;
        width: 0;
        height: 18px;
    }
    #TKBloader {
        height: 100%;
        display: none;
    }

Step 3

Letakkan kode berikut tepat di atas kode </head>

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

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

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

 Step 4

Letakkan kode berikut di atas kode </body>

• Bila anda ingin Loading Page ini tampil hanya pada halaman Homepage saja, maka copy kode berikut

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div></b:if>

• Bila anda ingin Loading Page ini tampil pada semua halaman, maka copy kode berikut

<div id='TKBloadingeffect'><div id='TKBprogressbar'></div><div id='TKBloader'>This Loading Effect is Powered By<a href="http://thekampoengblogger.blogspot.com">Blogger</a></div></div>

 Step 5

Klik Save Template

Catatan !

• Ganti URL Gambar Loading di Sini dengan URL Gambar anda sendiri (dalam format GIF)
• Anda dapat mengganti warna background #FDFEF8 dengan kode warna yang lain (lihat kode warna RGB dan HEX)
• Anda juga dapat mengganti warna progress bar dengan warna lain, dengan cara mengganti kode warna #de1301 dengan kode warna yang lain. 

Berikut adalah URL Gambar loading yang bisa anda pilih

Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6R-zF94R3NPVTdTrdcD8MCVQoqhYo5eq0u0VDMXF9FeXCO8cuk2rJ8mdVMCzy_YarPllhgZWmVTWZDfHWs-OMhX2JlVFDGhL9aNQrruYzKA7Y48Tco0okBD4gKqv847HvuzI83fEpHwGd/s1600/TKB-Loading-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zeoDv0GzhGFPB85T1O3c3npCrtZkzebFCXGjS6EkZ6hZtxySiBqDzdsdGxfO3_vIMlAbQGro-LHuYTmWjRfsMLShJsRmWOOFRzSqhc30-1ImewMDxaXiZKVeGkKIag-cInnEguLXC_t6/s1600/TKB-loading-2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9mtRYEzWfpNbY2N90IvrfXXnNJD12H713R-HyjH3903lGabH3r5ftfRGcvNtOXXe7U7EGspWE0fwqAe-z5obK1knIE3ZAwsAp94YOfQe9cPo84Gy6CuaRVHmxZLQClV0g-zSySa4T634/s1600/TKB-Loading-3.gif

Biru

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3e-EdAta2Qp9mowd_HGNgAVwRfrO5Po5-NQB1bGy5j9AUwdP3EX2pX6p7QfcwDvWthMshhHg4G6UqggsMWYB3QiuCX4NpCbC5bHpvuKnvk_dWyjMXy99j9XTWCV_9MyDC9plaTDsl6SsS/s1600/TKB-Loading-Blue-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi99KXrW_dxXgBe1IJ3b-c2CCF_6_y2WlUAly4kFfMe12XUiSsQu8LTB2ebY3ceCkHeJL1-NUUDPM0be2agd9JYzFFvR68gKs5-Nj4v-d_rH90jv9ys_xZmpM8EU4KnvkfmZk4r-E7MtKEs/s1600/TKB-Loading-Blue-4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLltMdo6LZ1428Ki1j2s5bNjMtXnGsXGspm9d2jv1Nc1FsjhPWjG-7UQi5TBDi-1QzwsA7kVOzA01q9Bv9ZcNEdC9ELxvWeWsmNhyphenhyphenmgUeeZRCt15Fyvxx3QEp_kJ7E2kVbE32Rq6WWGnoS/s1600/TKB-Loading-Blue-5.gif

 Hijau

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzF2YzZz45EKAry5opHuNBmFOB0NapwrZ1EPWycOP6Rh3Xi7w8o5za7zXZ-YHaVKWQbBZOvxEm3FBZ3tP1YrMf2veo0uAKrBBirDseWhU3fckf1R_PPKy6kMHsqjgM66ZzGF-yZkIOPFS5/s1600/TKB-Loading-Green-1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgToiYa9K9pFYywQcNwNMHCQ28FwlSN66XZMurskJ4AutFGWlPT7rR6leVvHnGJE_OYFL8X9y2VzcgXN3jKf1QRxYc-FzF48-ql-jZjMrcGn1u-T_ltYoaKp_rAwzYGVC0MV-kcJJB8CTLz/s1600/TKB-Loading-Green-2.gif

Lainnya

 

  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglW1EbuauwZ7PfTiV-i_65opQK6DKSsx-KwnPVHY73l9YZ5SDnjFz6EIyFiU3YIO3ng7wfUVBZY-e6uqiUB0R41yiLCGz32X6WMTbEkMON0w-eqTQOAZERv0bD9UeKjJ2oYYsX81cGcMW-/s1600/TKB-Loading-other.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia9_ijMKK6GK-oR1yrRobeuyOp2ZgHjEl2nIjF-ibbn-6p12cxamNykmBrEgndAbJb9d2S7DaZGLQ24WpQVd2VbgPmy8N6ccvXh4UlYZ16D-88qyQ0-tcFOOZ6j2u8G7qNHiS-x2gPNWvB/s1600/TKB-Loading-other2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DArqLBQ8nkSXyxQw4S2wB8iv-PuWA9TOHxt-0q3KI-FRduhbnp01qW0egAnauRSkYo0Tdba-VrUjdien_3bRhqOe3Wdy5LrJZBendCHYQ8fjPbJNIEL59fWlobrDpoq5zeyt3HuXgo03/s1600/TKB-Loading-other3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7CtGSamGPzN7MCekuW87NkrZLiu-tC5ggZhEhL0qKGhC1hfdc-GjNqcwePzTVkqjclauLADQZVkut59-hEOoZ-8xsGSxj9K_hcWqNd7fnufj78GTezO9lnrInO6l5dYderK2liobCM0RG/s1600/TKB-Loading-other4.gif

Semoga bermanfaat.
Wassalam.