Bagaimana Membuat Efek Loading / 'Memuat' dalam Blogspot Blogger?
Dari tetangga sebelah sob,sekalian mo promosi blog sahabat di AkuPunya.Com,script ini sengaja kami ambil untuk sekedar berbagi trik dan tips membuat efek loading di blog.
Bentuk fisiknya sobat dapat lihat di SINI,saat sobat membuka halaman atau mengklik link posting misalnya akan ada efek menunggu atau istilahnya dengan 'animation loading page widget'.
Jadi sambil sobat menunggu konten blog tampil sempurna,widget ini akan tampil dengan gambar animasi yang telah disediakan dalam script.
Seperti yang telah AkuPunya.Com ciptakan,berikut bahan yang dibutuhkan:
1.Script dengan ekstention *.js,silakan lihat di:http://tc.comze.com/js/preloadpage.js
2.Gambar yang akan tampil,disini adalah yang berformat *.gif yang beralamat di:http://lh3.googleusercontent.com/-kcn5J_HBL0k/TjwQzEsyEAI/AAAAAAAAAcw/fyuDdV9NDmU/ajax-loader.gif
Tampilan akan seperti ini (gambar ini akan tampil jika yang bersangkutan masih mengabadikannya pent-):
3.Langkah dan caranya.
Langkah dan Cara Membuat Efek Loading Blog dari AkuPunya.Com
Pertama,pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3).Lihat Gambar ya :D
(1)
(2)
(3)
Nah,selanjutnya cari kode
<head> (Gunakan Ctrl+F),setelah ketemu sob,tepat dibawahnya letakkan kode berikut:<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>Setelah itu,cari lagi kode
<body>,setelah ketemu hapus kode tersebut dan ganti dengan kode ini:<body onLoad='PreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<script type='text/javascript'>PreLoading();</script>
</div>Simpan dan lihat hasilnya :D
