1. Login blogger sobat tentunya :D
2. Pergi ke rancangan > edit HTML > centang "Expand Template Widget"
3. lalu cari kode ]]></b:skin> kalo udah Letakan kode CSS berikut di atas nya.
#loading{
position:fixed;
z-index:50;
top:0; left:0;
width:100%; height:100%;
background:#000 url(http://i.picasion.com/pic55/ee97700b9ac3e6344ace19c63925421f.gif) no-repeat center;
line-height:350px;
text-align:center;
font-size:36px;
color:#353231;
text-indent:-9999px}
.v2 #loading{display:none}
#progress-bar{
position:absolute;
top:0; left:0;
background:#f3f3f3;
opacity:0.8;
width:0;
height:18px}
#loader{
background:url(<span style="background-color:#ea9999; ">http://i.picasion.com/pic55/ee97700b9ac3e6344ace19c63925421f.gif</span>) no-repeat center 25%;
height:100%;
display:block}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
(function($){
$("html").removeClass("v2");
$("#header").ready(function(){
$("#progress-bar").stop().animate({ width:
"25%" },1500) });
$("#footer").ready(function(){
$("#progress-bar").stop().animate({ width:
"75%" },1500) });
$(window).load(function(){
$("#progress-bar").stop().animate({ width: "100%" },600,function(){
$("#loading").fadeOut("fast",function(){ $(this).remove(); });
});
});
})(jQuery);
</script>
<div id='loading'>
<div id='progress-bar'/>
<div id='loader'>Loading...</div>
</div>
</b:if>
Oh iya ada yang kelupa'an.. Efek loading yang baru kita buat tadi hanya ber Efek pada "Home page" blog saja.
jadi kalo sobat mau efek loadingnya di seluruh halaman blog sobat. ganti kode yang di Step 5 dengan kode ini :
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
Oke selesai sob. coba di cek blog nya..
Credit by :
![](http://pinterest.com/pin/create/button/?url=http://satria-cyber.blogspot.com/2012/07/cara-membuat-efek-loading-pada-blog.html&media=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBudwvM2xF99ql5XQ0J8NRO6C6xZj5ByBkITGFU6G_zCGs-i-tjb1ugVODwiGrn2KjQAoJ7F6Ppt7I4NIwwunJKoutiB9H9FikqppOjW7r9i4gK4O-S4plAT9ifZjomy5copGDosiMWWIg/s72-c/ee97700b9ac3e6344ace19c63925421f.gif&description= oke Simak bareng-bareng yah. 1. Login blogger sobat tentunya :D 2. Pergi ke rancangan > edit HTML > centang "Expand Templa...){kind=link}
0 comments:
Post a Comment
-Berkatalah yang Baik Dan Sopan.