Monday, May 20, 2013

Cara Buat Animasi Loading Di Blog (SUPER KEREN)

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>
/*  henry-multimedia-informasi.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/AVvXsEhL7bY32CWityENoTcu15H-hpjDd5UCaZBhQfe9BLnPR5LB_VNEgQnctjkDcnK_PVdIe7T-5dLZhYzo5WCfSE3OkfQgduhuUPLRwdJBQHx7h_oUbEpu2znLECiZ_IOmkdZV8iIaDgL-2Bzu/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..!

Related Posts

Cara Buat Animasi Loading Di Blog (SUPER KEREN)
4/ 5
Oleh

Subscribe via email

Like the post above? Please subscribe to the latest posts directly via email.

40 komentar

Tulis komentar
avatar
May 21, 2013 at 9:43 PM

wah mantep nih gan animasi loading'a, ane ijin copas yaahh!,:)

Reply
avatar
May 22, 2013 at 1:45 PM

sip jangan lupa masang artikel sumbernya!

Reply
avatar
August 9, 2013 at 9:20 AM

kalo gak ada ]]> bagaimana ?

Reply
avatar
September 26, 2013 at 6:30 PM

makasih gan atas infonya.........

Reply
avatar
October 4, 2013 at 9:27 AM

Artikelnya bagus gan ane mau coba nih.....

kunjungi juga gan

http://binggo88.blogspot.com/

Reply
avatar
October 13, 2013 at 7:40 AM

jadi loading trus nih -_- ga tampil blog saya jadinya -_-

Reply
avatar
October 15, 2013 at 9:05 PM

hehe emg seperti itu gan,agak lama

Reply
avatar
November 4, 2013 at 10:01 PM

Ok makasih gan, akn sya coba http://fajar-network.blogspot.com

Reply
avatar
November 16, 2013 at 4:04 PM

Mantep gan... :)
kunjung balik yah,, imamsoehendra.blogspot.com
trims....

Reply
avatar
prd
November 26, 2013 at 11:50 AM

emang lama ya.kok punya ane lama banget,coba lihat di firelordeath.blogspot.com

Reply
avatar
November 27, 2013 at 9:20 PM

emang lama gan, sekarang aja ane udh gak pake ini lagi

Reply
avatar
December 28, 2013 at 10:47 PM

benar sekali bro.. makanya ane udh gak pake

Reply
avatar
Anonymous
December 29, 2013 at 8:56 PM

tmabah loading nya jdi keren gan?
seppzz

Reply
avatar
January 2, 2014 at 8:20 AM

bagus nih sudah saya coba
trimakasih

Reply
avatar
January 6, 2014 at 6:41 PM

Kok pas mau cari yang body gk ada gan?

Reply
avatar
January 8, 2014 at 12:41 PM

makasih gan infonya,
kunjungi juga http://anzontoyotamurah.blogspot.com gan

Reply
avatar
January 28, 2014 at 9:16 PM

gAn kLw aq Mw hpz bgAimn gAn,,,???

Reply
avatar
January 30, 2014 at 5:48 AM

http://blackbocor.blogspot.com/
Mantap , Follback y

Reply
avatar
March 1, 2014 at 9:07 AM

Udah dihapus kok tetep kayak gitu gan? Gak bisa hilang?

Reply
avatar
March 29, 2014 at 4:18 PM

mantap nih...
mw cob jg akh...
c-nema21.blogspot.com

Reply
avatar
April 8, 2014 at 12:35 AM

mampir gan
:-d http://janganngeblog.blogspot.com/

Reply
avatar
April 20, 2014 at 6:32 PM

Di sedot dikit ah kang , hehehe makasih :)
blog baru , ada masukan ?
visit --> http://aganhusaeni-tm.blogspot.com

Reply
avatar
June 17, 2014 at 3:07 PM

terimakasih mampir gan http://doni-f.blogspot.com/

Reply
avatar
June 17, 2014 at 3:11 PM

silakan sedot gan, sama-sama, blognya bagus dan simpel

Reply
avatar
February 10, 2019 at 2:00 PM

Agen Togel Online Terbaik & Terlengkap!
Tersedia Pasaran Hongkong - Sydney - Singapore
Potongan Diskon 2D = 30% | 3D = 59% | 4D = 66%
Dapatkan Keuntungan Dalam Menebak Angka Hingga Ratusan Juta Setiap Hari..
Yuk Gabung Bersama Bolavita Di Website www. bolavita .fun
Untuk Info, Bisa Hubungi Customer Service Kami ( SIAP MELAYANI 24 JAM ) :
BBM: BOLAVITA
WA: +628122222995

Reply

=======================================================
• Untuk menyisipkan kode, gunakan tag [code]... KODE ...[/code]

• Untuk menyisipkan kode panjang, gunakan tag [pre]... KODE ...[/pre]

• Untuk menyisipkan catatan, gunakan [quote]...CATATAN ...[/quote]

• Untuk menyisipkan gambar, gunakan [img]..URL GAMBAR..[/img]

• Untuk menyisipkan video, gunakan [youtube]..URL VIDEO..[youtube]
=======================================================