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(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> 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..!
Previous
Next Post »

41 komentar

Write komentar
May 21, 2013 at 9:43 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
May 22, 2013 at 1:45 PM delete

sip jangan lupa masang artikel sumbernya!

Reply
avatar
August 9, 2013 at 9:20 AM delete

kalo gak ada ]]> bagaimana ?

Reply
avatar
Henry Dwi.s
AUTHOR
August 9, 2013 at 10:12 AM delete

maksudnya bagaimana gan?

Reply
avatar
Aditya Ryan
AUTHOR
September 26, 2013 at 6:30 PM delete

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

Reply
avatar
Alfian Junior
AUTHOR
October 4, 2013 at 9:27 AM delete

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

kunjungi juga gan

http://binggo88.blogspot.com/

Reply
avatar
toni lagi
AUTHOR
October 13, 2013 at 7:40 AM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
October 15, 2013 at 9:05 PM delete

hehe emg seperti itu gan,agak lama

Reply
avatar
November 4, 2013 at 10:01 PM delete

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

Reply
avatar
imam suhendra
AUTHOR
November 16, 2013 at 4:04 PM delete

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

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

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

Reply
avatar
Henry Dwi.s
AUTHOR
November 27, 2013 at 9:20 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
December 28, 2013 at 10:47 PM delete

benar sekali bro.. makanya ane udh gak pake

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

tmabah loading nya jdi keren gan?
seppzz

Reply
avatar
@iqbal_miko
AUTHOR
January 2, 2014 at 8:20 AM delete

bagus nih sudah saya coba
trimakasih

Reply
avatar
January 6, 2014 at 6:41 PM delete

Kok pas mau cari yang body gk ada gan?

Reply
avatar
Heri Hayufa
AUTHOR
January 8, 2014 at 12:41 PM delete

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

Reply
avatar
January 28, 2014 at 9:16 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
January 29, 2014 at 6:23 PM delete

hapus kodenya aja bro...

Reply
avatar
Adolph pay
AUTHOR
January 30, 2014 at 5:48 AM delete

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

Reply
avatar
March 1, 2014 at 9:07 AM delete

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

Reply
avatar
March 29, 2014 at 4:18 PM delete

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

Reply
avatar
Hanya Ngeblog
AUTHOR
April 8, 2014 at 12:35 AM delete

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

Reply
avatar
agan husaeni
AUTHOR
April 20, 2014 at 6:32 PM delete

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

Reply
avatar
Doni Feryal
AUTHOR
June 17, 2014 at 3:07 PM delete

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

Reply
avatar
Henry Dwi.s
AUTHOR
June 17, 2014 at 3:11 PM delete

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

Reply
avatar

=======================================================
• 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]
======================================================= EmoticonEmoticon