Kali ini Saya akan membahas cara membuat animasi loading sebuah blog.
Agar sebuah blog terlihat lebih menarik ketika menunggu loading, lebih baik kita buat animasi loading. Jadi, pengunjung yang menunggu tidak akan bosan dan akan betah berlama-lama di blog kita, sambil melihat animasi loading yang membuat mereka penasaran. Berikut ini cara membuat animasi loading seperti pada gambar di bawah.
Cara membuatnya:
- Login ke blogger.com, jika sudah,
- Pilih Template → Edit HTML
- Cari kode </head> agar mudah mencari tekan f3
- Tambahkan script di bawah ini, di atas kode </head>.
<!-- Loading Page Script -->
<style type="text/css">
/* add loading image */
body {
background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZ5xWhIFmZ-FxZ1RZf6G34S-mWP04VAHVg0yzAT2bnGT7S7EKiDY5viPTdZeYYCKyKNv56ay0KBXe2XOqhPLcFjYvbKsMRX6EEMhIUKFJViLabMvsqcwqgZ8yjaNSnylooNBWnyy9sX8/s1600/loading_thumb%5B1%5D.gif) no-repeat fixed center;
}
/* hide page div */
#page{
display:none;
}
</style>
<script type="text/javascript">
function css(classORid,rules){
try{
var css=document.createElement("style");
css.innerHTML=classORid+"{"+rules+"}"
document.body.appendChild(css);
}
catch(e){}
try{
document.styleSheets[document.styleSheets.length-1].addRule(classORid,rules);
}
catch(e){}
}
function loaded(){
css("#page","display:block!important");
css("body","background:#000 url()");
}
if(window.addEventListener)window.addEventListener("load",loaded,false);
else if(window.attachEvent)window.attachEvent("onload",loaded);
else if(document.getElementById)window.onload=loaded;
</script>
- Setelah itu cari kode <body>
- Setelah itu, silahkan sobat tambahkan kode <div id="page"> di bawah kode <body>.
- Setelah itu Tambah kode </div> di atas kode </body> kemudian simpan hasil editan sobat tersebut dan silahkan lihat hasilnya.
Itulah tutorial mengenai Cara Membuat Animasi Loading Keren di Blog. Semoga bermanfaat untuk kalian.
Tidak ada komentar:
Posting Komentar