Minggu, 19 Mei 2013

Cara Buat Animasi Loading Di Blog (SUPER KEREN)

By Unknown   Posted at  18.27   JQuery No comments

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/AVvXsEhtVDu8nhYn83kkcj7aHlG2FmEPAlBBTyPSXLMzqpp1wc2EmKwAfTZOePpAtFyPCgZIrC4UylLqtXMaUuMbr04L5KzVWL-z5JsnrtVwZzlZjgr7AzB9g8smuzvtmUl0rZ2i82nYci-pzALr/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..!

About the Author

Nulla sagittis convallis arcu. Sed sed nunc. Curabitur consequat. Quisque metus enim, venenatis fermentum, mollis in, porta et, nibh. Duis vulputate elit in elit. Mauris dictum libero id justo.
View all posts by: BT9

0 komentar:

Back to top ↑
Connect with Us

What they says

© 2013 Andre B'Genk. WP Mythemeshop Converted by Bloggertheme9
Blogger templates. Proudly Powered by Blogger.