Cara Membuat Animasi Loading Pada Blog Dengan JavaScript. Pertama, pilih saja dulu salah satu animasi preloader dari dua layanan ini Preloader atau Ajaxload, kemudian simpan hasil gambar dalam format gif tersebut. Kalo sudah, silahkan upload file gambar tadi ke hosting anda.Langkah kedua silahkan copy script di bawah, kemudian simpan kode dibawah ini dengan nama preloader.js (pastikan ekstensi berakhiran JS, bukan TXT)
var ld=(document.all);<br />var ns4=document.layers;<br />var ns6=document.getElementById&&!document.all;<br />var ie4=document.all;<br />if (ns4)<br />ld=document.loading;<br />else if (ns6)<br />ld=document.getElementById("loading").style;<br />else if (ie4)<br />ld=document.all.loading.style;<br />function init()<br />{<br />if(ns4){ld.visibility="hidden";}<br />else if (ns6||ie4) ld.display="none";<br />}
langkah ke tiga, upload script js tadi ke file hosting anda.
langkah ke empat, masuk account blogger anda, pilih edit html
langkah selanjutnya,cari kode <body> ganti kode tersebut dengan script berikut
<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://lokasi-simpan.com/gambarloading.gif'/></div>
<script src='http://lokasi-simpan/preloader.js' type='text/javascript'/>
Selanjutnya, ganti url yang di tebalkan dengan url file gambar dan script tadi.
Save.
Perhatian! saya belum tahu apakah merubah tag ini melanggar TOS blogger apa tidak, jadi saya sarankan jangan di coba langsung di blog utama. silahkan bereksperimen di blog uji coba anda . Kalau terjadi apa2 jangan salahkan saya OK!
UPDATE: Cara Baru...!!!
1. Cari kode </head> dan letakkan kode css dibawah ini tepat diatas kode tersebut.
<style>
div.loading-invisible{
display:none;
}
div.loading-visible{
display:block;
position:absolute;
top:200px;
left:0;
width:100%;
text-align:center;
background:#fff;
opacity:.75;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd;
}
</style>
2. Letakkan kodenya tepat dibawah kode </body>.
<div class='loading-invisible' id='loading'>sumber : http://wahyu-production.blogspot.com/2011/12/membuat-animasi-loading-pada-blog.html
<p><img alt='loading' src='https://lh4.googleusercontent.com/-PgZBrw2Z2wo/TrNYttNC8cI/AAAAAAAAAg4/Rmq2Gjq4uLE/s100/loading.gif'/></p>
</div>
<script type="text/javascript">
document.getElementById("loading").className = "loading-visible";
var hideDiv = function(){document.getElementById("loading").className = "loading-invisible";};
var oldLoad = window.onload;
var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
window.onload = newLoad;
</script>
1 komentar:
kok ketutupan sama artikel yah?mohon pencerahan dan salam kenal
Posting Komentar