Cara Membuat LOADING ANIMASI di Website/Blogger

Friday, 12 July 20132comments

Ketika Anda membuka website ini, tentu Anda pasti menjumpai LOADING ANIMASI seperti gambar di bawah ini.
 
Website/blog Anda ingin seperti ini? Ini dia langkah yang harus Anda lakukan :
  • Silakan Anda login ke blogger.com  
  • Cari Kode </head> Agar mudah dalam pencarian tekan Ctrl+F, dan taruh kode di bawah ini tepat di atas kode </head> .

<style>
/*  bloggertrix.com */
#md-loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #FDFEF8 url(http://4.bp.blogspot.com/-57JMakfEz8M/UC8kRA431BI/AAAAAAAAC9Y/VI_wkXKi0Pw/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> untuk memudahkan pencarian 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>

Website rifaus.com sudah berhasil, semoga keberhasilan ini menular pada Anda. Semoga Bermanfaat..!
PERHATIAN : Apabila Anda mendapatkan tulisan di bawah ini mengandung konten pornografi dan SARA, mohon diinformasikan ke rifaus@gmail.com. Terima Kasih
Hosting Gratis
Terima kasih telah membaca artikel Cara Membuat LOADING ANIMASI di Website/Blogger. Artikel tersebut ditulis oleh Rifaus El-Shahrukhany, pada hari Friday, 12 July 2013. Semoga bermanfaat. Kritik, saran dan pertanyaan dapat ditulis di kolom komentar.
Artikel Cara Membuat LOADING ANIMASI di Website/Blogger dapat dibagikan ke pembaca yang lainnya melalui :
Comments
2 Comments

+ comments + 2 comments

14 July 2013 12:37

manteb gan

14 July 2013 17:15

Terima kasih atas kunjungannya, mohon maaf LOADING ANIMASI pada web ini saya hilangkan karena sedikit mengganggu kenyamanan pengunjung.

Post a Comment

rifaus.com berharap kepada pengunjung website ini apabila berkomentar sesuai dengan artikel di atas dengan menggunakan bahasa yang baik dan benar. Terima kasih.