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
Sekarang cari kode <body> agar mudah dalam penacrian tekan Ctrl+f
dan sisipkan kode di bawah ini Tepat di bawah kode <body> .
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..!
Cara Buat Animasi Loading Di Blog (SUPER KEREN)
4/
5
Oleh
akuntest123
39 komentar
Tulis komentarwah mantep nih gan animasi loading'a, ane ijin copas yaahh!,:)
Replysip jangan lupa masang artikel sumbernya!
Replykalo gak ada ]]> bagaimana ?
Replymaksudnya bagaimana gan?
Replymakasih gan atas infonya.........
ReplySama-sama gan!
ReplyArtikelnya bagus gan ane mau coba nih.....
Replykunjungi juga gan
http://binggo88.blogspot.com/
sip gan!
Replyjadi loading trus nih -_- ga tampil blog saya jadinya -_-
Replyhehe emg seperti itu gan,agak lama
ReplyOk makasih gan, akn sya coba http://fajar-network.blogspot.com
Replysama-sama gan...
Replykali maksud nya
ReplyMantep gan... :)
Replykunjung balik yah,, imamsoehendra.blogspot.com
trims....
emang lama ya.kok punya ane lama banget,coba lihat di firelordeath.blogspot.com
Replykok lama banget ya gan
Replyemang lama gan, sekarang aja ane udh gak pake ini lagi
Replylama gan loadingnya
Replyemg lama bro
Replybenar sekali bro.. makanya ane udh gak pake
Replytmabah loading nya jdi keren gan?
Replyseppzz
sip
Replybagus nih sudah saya coba
Replytrimakasih
sama-sama
ReplyKok pas mau cari yang body gk ada gan?
Replymakasih gan infonya,
Replykunjungi juga http://anzontoyotamurah.blogspot.com gan
gAn kLw aq Mw hpz bgAimn gAn,,,???
Replyhapus kodenya aja bro...
Replyhttp://blackbocor.blogspot.com/
ReplyMantap , Follback y
Udah dihapus kok tetep kayak gitu gan? Gak bisa hilang?
Replysilakan di coba gan..
Replymampir gan
Reply:-d http://janganngeblog.blogspot.com/
Di sedot dikit ah kang , hehehe makasih :)
Replyblog baru , ada masukan ?
visit --> http://aganhusaeni-tm.blogspot.com
terimakasih mampir gan http://doni-f.blogspot.com/
Replypasti ada gan
Replymantap hehe
Replysilakan sedot gan, sama-sama, blognya bagus dan simpel
Replysama-sama gan
ReplyAgen Togel Online Terbaik & Terlengkap!
ReplyTersedia 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
=======================================================
• 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]
=======================================================