Cara membuatnya kita hanya butuh code CSS dan sedikit polesan JQuery.
Yowes, biar makin jelas bisa Sobat lihat Demonya dibawah ini:
Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:
1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu cari kode
]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.#loading {
position: fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background: #000 url(URL_GAMBAR_ANDA) 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;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
height: 100%;
display: block;
}
Keterangan:
Perhatikan kode CSS diatas untuk URL_GAMBAR_ANDA
Gantilah gambar loading blognya sesuai kreasi sobat.
Tapi bila ingin seperti gambar yang ada pada DEMO, silahkan pakai gambar ini:
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xbQGE0-oXj6VyMfHYTrZdWf0KkpThAlInRy774IAtYdrjiVb1DmSd69Lfetzsmlo4tljLdgO1qwF_RtDtEB0RuOtkWimnc-h5ViTH_BVhl963Ob2U9zaSMyw94jn_mmQOdTgwDV1vUB7/s1600/loading.gif)
5. Bagian kedua yaitu menambahkan script JQuery, cari kode
</head> dan taruh script JQuery berikut tepat diatasnya:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
Kemudian tambahkan lagi script berikut dibawahnya:
<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>
6. Next lanjut untuk edit HTML. Cari kode
<body> letakan kode berikut tepat dibawahnya.<div id='loading'> <div id='progress-bar'></div> <div id='loader'>Loading...</div> </div>
7. Simpan template dan lihat hasilnya.
Tambahan:
Ingat, untuk hasil yang sudah kita buat diatas itu efek loadingnya disetiap halaman yang kita buka!
Jadi bagi kalian yang hanya ingin tampilan loading blognya hanya di Home Page'nya saja, silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='loading'> <div id='progress-bar'></div> <div id='loader'>Loading...</div> </div> </b:if>
Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini.
misi gan trick nya brhasil, cmn kalo mau kasih loading di url lain selain home page gmn ?
BalasHapustp bkn semua pake loading. cmn url yg di pilih aja..
bisa gag ? di tunggu pencerahan nya ok gan.. ^_^
Seperti penjelasan saya diatas, Loading hanya homepage atau next page saja. untuk loading di url tertentu saya blm mencobanya sob. :)
HapusLangkah tambahan
Hanya di Homepage:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
Dan untuk di next page:
<b:if cond='data:blog.pageType == "item"'>
EFeknya parah... masa g bisa edit page elemen?
BalasHapusApanya yg gak bisa diedit gan ?? :D
HapusTingal diganti kodenya gan ^^
belum berhasil nih gan...
BalasHapusBagian mana yg belum bisa gan.. tanyakan saja :)
Hapuswah boleh dicoba dulu nih, walopun kata yg diatas ane parah :(
BalasHapusSilahkan kreasikan sendiri mas..
HapusWah... ini masternya blog... terima kasih atas share ilmunya.
BalasHapusBerlebihan neh.. saya jg masih belajar masbro
HapusMantap sob, Thanks infonya! It works like a charm for me :D
BalasHapusKeren lah!
Kalau sempat jangan lupa mampir ya ke http://www.kelasinformatika.com
Sip mas...
Hapusthenkyu sob tips untuk para blog...
BalasHapussalam blogger n salam kenal..
mampir ya sob,
http://indra-combination.blogspot.com/
Sip, salam kenal sob :)
Hapusmantap efek loadingnya.. tapi apa ga nambah berat pake tambahan seperti ini gan.. maaf saya kurang mengerti masalah coding..
BalasHapusJelas lah nambah kode CSS, javascrip atau apapun itu nambahin berat blog :D
HapusJadi semua tergantung kalian sob :D
Mantab bro ijin sedoot,follow back please
BalasHapusSilahkan mas, ok ditunggu
HapusThanks gan,, Info nya mangabss.. :D
BalasHapusOk, tq gan..
Hapusbanyak ilmu yang saya dapatkan disini, khususnya yang aku baca saat ini tentang efek tampilan, terimakasih dan salam ukhuwah wahai sauadaraku.
BalasHapusTerimakasih mas dah mampir :)
Hapusterima kasih tips nya gan...
BalasHapusizin saya repost di blog saya...
Sip, silahkan gan... :)
Hapuswah...
Hapusgaga jadi gan,,,
di bukmak aja...
hhe
Dicoba lagi mas, udah ada demonya pasti bisa :D
Hapussearching dan browsing kesana kemari akhirnya terbawa juga ke blog ini...
BalasHapustampilan loadingnya sungguh keren, tapi apakah ini tidak memperberat loading blog???
mohon di balas gan..
Sip mas, selamat mencoba :)
HapusUntuk masalah berat ya jelas mas, Nalarnya saha dengan menambah kode CSS/HTML pasti menambah size blog.
artikel yang menarik,.,terima kasih untuk informasinya
BalasHapusSama' mas..
Hapusmakasih kawan atas info dan ilmunya...
BalasHapusdi tunggu kunjungannya
Sip mas..
Hapussip .. nice share ... :)
BalasHapusmas bro.. wah kren blognya sekarng udh lama gak mampir..
BalasHapusIya neh mas, lama gak login blogger. hohoo
Hapuswah berhasil sukses mas admin.. visit ke blogku yya untuk melihat di ISLANKUDOTCOM
BalasHapusSelamat mas :D
HapusOk, ditunggu
wah, gambar loadingnya ngak timbul.
BalasHapusCoba lagi gan, udah ada demonya pasti bisa koq...
Hapus@dunia ku
BalasHapusTest....
nice share gan , thx infonya yaa :)
BalasHapushuraaaaa mudenkkkk
BalasHapus@Andien
BalasHapusHahaha,, dudul :p
mantap sob,,,, tpi ada yg lainn gk nih sob efek loadingnya???
BalasHapusJelas ada banyak lah sob, tinggal dikreasikan sendiri.
Hapusthanks gan informasinya
BalasHapusthanks gan informasinya
BalasHapusthanks gan http://mencakup-semua.blogspot.com/
BalasHapuskalo aku nih loading gak mau berhenti gimana?
BalasHapusBisa juga karna koneksi gak lancar sob.
HapusKalo mengikuti cara diatas dengan benar pasti gak ada masalah koq.
boleh juga nih sob tutorialnya :)
BalasHapuslink back w gan..
BalasHapussudah saya aplikasikan. hasilnya menarik perhatian. hehe terima kasih gan.
BalasHapusSip, sama" sob...
Hapusmakasih infonya ya
BalasHapusSip mas
HapusKalau pakai cara ini .. yang kasian adalah yang koneksi internetnya lambat ... :)
BalasHapusHohoho... nasib itu mas :D
HapusMantap Nih Gan.. Thank's Ya Info Nya...
BalasHapusOk, sip mas...
Hapusthanks broo..efeknya bagus dan udah tak pasang di blog saya
BalasHapusSelamat mas !! hehe
Hapussore,
BalasHapussaya bingung terhadapa lodingnya, apa bisa loadingnya di ganti sama gambar, misalkan banner. jadi bukan kyak gambar loading yg berputar"
kalau saya ganti gambar, gambar yg saya masukkan ke link tidak muncul
terimakasih
lah itu juga efek loadingnya juga gambar mas, jadi pasti bisa diganti gambar lain.
Hapusyg gambar sudah berhasil ,
BalasHapusterimakasih
1 lagi mas,
apa kah bisa loadingya agak lama, timernya :)
terimakasih
Bisa masbro, perhatikan script fungsion di langkah no5.
Hapus$("#progress-bar").stop().animate({ width: "100%" },600,function()
Perhatikan kode script di atas, pada angka 600, runag menjadi 2000 ketas, semakin ditambah maka akan semakin lambat, begitu juga sebaliknya.
ini yang saya cari2 dari tadi
BalasHapusthax mas langsung praktek :D
Sip masbro, semoga berhasil :)
Hapussaya ada penawaran nih,,,,,,
BalasHapusmw ikut Scout Clan gx ???
Community Creative Blogger
.::[ http://scout-clan.blogspot.com ]::.
MY Blog: http://rully-sc.blogspot.com
Please Visit Back
Sip mas, makasih :yaya:
Hapusmo coba ah...makasih tips nya...
BalasHapusSip, selamat mencoba mas :-bd
Hapushttp://rcyshared.blogspot.com/
BalasHapusgan Tuh Link gw.. :D
Kok Scroll Bar nya gx ada ya??
jadi nya Hilang
Bagus sob tutorialnya dan saya sudah coba di blog saya :D
BalasHapushttp://acep-computer-science.blogspot.com
saya sudah coba... tapi di akhir2 kok saya nggak ada code <body> nya? -- minta bantuan... :(
BalasHapusboleh di coba triknya, terimas kasih master
BalasHapusMakasih masbrow.. :D
BalasHapuskunjungi enbeseven.blogspot.com
kalau membuat loading page cms joomla gimana ya untuk halaman home saja mohon pencerahannya
BalasHapusmantap bos...
BalasHapusSalam kenal bro. Artikel nya keren . Mo tanya dulu sblm praktek..Jadi berat gk loadingnya? Tx
BalasHapuspusing juga men
BalasHapusmampir ya http://z-cybertycku.blogspot.com/
bro ane minta url gambar yang demonya bro soalnye ga bisa di kopi urlnya jadi susah masangnya bro terimakasi sebelumya bro atas triknya
BalasHapusmampir jugah yah di http://andirifki25.blogspot.com/
BalasHapusgan, kode theme blog yg ada gambar ganja / shaun the sheep punya gak? =p* yg lain juga gapapa.... minta ya gan B)
BalasHapuskutunggu kunbalnya http://tgardpwnsyh.heck.in/
kalau mau ganti gambarnya gimana???
BalasHapusKomentar ini telah dihapus oleh pengarang.
BalasHapusthanks gan tutorialnya, sangat membantu. coba lihat hasilnya : http://demo-undanganonline.blogspot.com/
BalasHapusthanks, nice tutor :-bd
BalasHapussaya request kode seperti www.ballxcode.com donk :D
kuunbalnya, www.ri-cyber.blogspot.com ^_^
kalau memperbesar ukuran gambar saat loading g'mana y'
BalasHapusmhon bantuanya.
tnkz gan,, salam knal ya http://tersenymuntuku.blogspot.com
BalasHapusbikin berat sob
BalasHapusbikin berat sob
BalasHapusSipp Thanks Broo. Udah Bisa
BalasHapusKunjungi Blog Ane Yah http://cyber-xeroz.blogspot.com/
terima kasih tutorialnya mas
BalasHapusnyimak aja
BalasHapusmantep,..berhasil thx
BalasHapusJual Obat Aborsi Batam
BalasHapusJual Obat Aborsi Jakarta
Jual Obat Aborsi Balikpapan
Jual Obat Aborsi Kupang
Jual Obat Aborsi Medan
Jual Obat Aborsi Malang
Jual Obat Aborsi Bali
Jual Obat Aborsi Bandung
Jual Obat Aborsi Makasar
Jual Obat Aborsi Semarang