Advertisement

Diberdayakan oleh Blogger.
Beranda » Tutorial BLogger » Cara Membuat Loading Blogger Keren

Cara Membuat Loading Blogger Keren

Ditulis oleh: -
Sambil nunggu pertandingan bola nih, dari pada bete nungguin mendingan berbagi ilmu lagi nih!Langsung aja deh sekarang saya mau berposting tentang Cara Buat Animasi Loading Di Blog tetapi kali ini animasinya beda dari yang lain pokoknya keren deh.. ini adalah sreenshotnya:



Gemana? keren kan.. oke langsung aja nih caranya
  • Buka editor Template dengan cara mengeklik Template > Edit HTML > Lanjutkan
  • Cari Kode </head> Agar mudah dalam pencarian tekan Ctrl+f, dan sisipkan kode di bawah ini Tepat di atas </head> .


<style>
/*  bloggertrix.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipv7OfoeeFvRQorA2DmDuHhBxOvAfNjnr1NcF3zC5L5MxC3uEOdNNyRantNfk-0r8ceyrNifMYiu-66Ya5WB6HRy_Nkrvcpw16GtbTK_zDBwD6yaEfcXPJYEOzdZPRQTqKNy2abUB-txzf/s1600/Bloggertrix-loading.gif) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.MD #md-loading { display: none; }

@media only screen and (device-width: 768px) {
    #loading {
        position:absolute;
        width:1040px;
        min-height:768px;
    }
}
#md-progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #0d5ff6;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#md-loader {
    height: 100%;
    display: none;
}
</style>
<script>

(function($){

$("html").removeClass("MD");


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


$(window).load(function(){

    $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#md-loading").fadeOut("fast",function(){ $(this).remove(); });
    });

});
})(jQuery);
</script>

Sekarang cari kode <body> agar mudah dalam penacrian tekan Ctrl+f 
dan sisipkan kode di bawah ini Tepat di bawah kode <body> .
<div id='md-loading'><div 
id='md-progress-bar'></div><div 
id='md-loader'>Loading...</div></div>
Bagaimana mudahkan?Oke Cukup sekian, Semoga Bermanfaat..!

Artikel terkait :

0 komentar "Cara Membuat Loading Blogger Keren", Baca atau Masukkan Komentar


Posting Komentar

Admin Menyaran Kan ,Di Comment Ini Anda Harus Berbuat Sopan,Jika Kasar Akan Di Hapus Dan,Jika Anda Berkomentar Lebih Baik Saya Akan Membalasnya Lebih Baik Itu Insyaallah,

Lebih Jelas Lagi:
Jangan Berkata Bahasa Binatang Anjing,Bagong,monyet
Jangan Berkata Bahasa Jorang
Jangan Berkata Kasar