Cara membuat Efek Loading di Blog

Posted by : Unknown Jun 10, 2012

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

Okeh lah. karena tutorialnya cukup rumit (bagi blogger newbie pastinya). tp kalo dah sering pasang/edit kode HTML pasti sangat mudah untuk tutorial semacam ini. ^_^

oke Simak bareng-bareng yah.

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/pic54/305bc5df270fa999f5001db641a6168b.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/pic54/305bc5df270fa999f5001db641a6168b.gif</span>) no-repeat center 25%;

height:100%;

display:block}

keterangan :

yang tulisan merah : ganti dengan Url gambar sobat masing2

4. Bagian kedua yaitu menambahkan script "JQuery", cari kode </head> dan taruh script JQuery berikut tepat diatasnya:

NB : jika kode script JQuery sudah ada di blog sobat, sobat tidak perlu menambahnya lagi ^^

Kemudian tambahkan lagi script berikut dibawahnya:

(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>

5. Oke kalo udah kita next ok. sekarang Cari kode <body> letakan kode berikut tepat dibawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'/>
<div id='loader'>Loading...</div>
</div>
</b:if>

6. nah abiz itu simpan/save Templatenya.

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='loader'>Loading...</div>

</div>

Oke selesai sob. coba di cek blog nya..

semoga post ini dapat membantu sobat blogger sekalian yah.. ^_^

and yang mau komment dan bertanya" boleh kok :D

Sekian dari saya, salam buat bapak sama Ibuk di rumah yah. (Lho) bruakakak XD

sampai jumpa di post berikutnya. ^^

Source : http://kode-blogger.blogspot.com/

{ 3 comments... read them below or Comment }

UnknownWednesday, June 20, 2012 4:35:00 AM
mr blazter,,, untuk edit gambar itu kita dapat html dri mne.... maklum newbie. sukron
ReplyDelete
Replies
UnknownWednesday, June 20, 2012 5:45:00 AM
itu gambarnya Buat sendiri dlu gan. abiz itu baru deh kita upload ke situs upload gambar. seperti photobucket.com , fileden.com dan lain-lain.. ^_^
ReplyDelete
Replies
CaturSunday, January 06, 2013 6:23:00 AM
bang, tapi kok abis loading layar blog aku langsung putih?
blank gitu??
ReplyDelete
Replies