Cari Artikel

Selamat datang! di blog The Kampoeng Blogger , silahkan tinggalkan pesan di kolom komentar bila terdapat kode yang error.

March 17, 2013

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.

loading page

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




http://3.bp.blogspot.com/-vd1FeVCm7-o/UUV_xCzQNzI/AAAAAAAABX4/WjykjvCKPoY/s1600/TKB-Loading-1.gif
http://1.bp.blogspot.com/-VFI8K06DykY/UUWARlGw6oI/AAAAAAAABYI/TdLK8YvSz2A/s1600/TKB-loading-2.gif

http://2.bp.blogspot.com/-P4iKcPU-GUE/UUWApgtbJyI/AAAAAAAABYQ/Sg3RQRpmTf0/s1600/TKB-Loading-3.gif

Biru

 http://1.bp.blogspot.com/-PD3anyW494Q/UUWBhcMRL1I/AAAAAAAABYY/uIPX5eFg2dc/s1600/TKB-Loading-Blue-1.gif
http://2.bp.blogspot.com/-R_Rmq6XKKLY/UUWCXb43xHI/AAAAAAAABYg/bgUKykgRIIw/s1600/TKB-Loading-Blue-4.gif

http://4.bp.blogspot.com/-a4rE2T0lt9I/UUWCieakVUI/AAAAAAAABYo/rR2ym8NB7_I/s1600/TKB-Loading-Blue-5.gif

 Hijau

 

http://4.bp.blogspot.com/-Pm8jJpD9iYQ/UUWDRjlVKgI/AAAAAAAABYw/rsqulih4CKw/s1600/TKB-Loading-Green-1.gif

http://2.bp.blogspot.com/-S4qAlvhVJ3w/UUWDl5W64AI/AAAAAAAABY4/Poto6gMDrMA/s1600/TKB-Loading-Green-2.gif

Lainnya

 

  http://1.bp.blogspot.com/-JEdhhH-abAM/UUWEkW3sQVI/AAAAAAAABZE/yxOekBw7Rok/s1600/TKB-Loading-other.gif

http://2.bp.blogspot.com/-UqG46a9kSw4/UUWEkRQc_tI/AAAAAAAABZQ/AH-b-bTAAsQ/s1600/TKB-Loading-other2.gif


http://2.bp.blogspot.com/-nwlgx-by6Pc/UUWElOGTdzI/AAAAAAAABZY/IygFd-TxSOA/s1600/TKB-Loading-other3.gif
http://4.bp.blogspot.com/-H6G9KMp7Mv8/UUWEli_2v8I/AAAAAAAABZg/ki6-eqgSp6Y/s1600/TKB-Loading-other4.gif

Semoga bermanfaat.
Wassalam.

Written by: Rysmah Zainal Arifin
The Kampoeng Blogger, Updated at: 5:01 PM

0 comments :

Tinggalkan Komentar Anda di Sini:

Komentar yang mengganggu, berbau SARA, porno, mengandung iklan dan mencantumkan link aktif akan segera kami hapus.
Terimakasih atas perhatiannya.