Ato Blo: Cara Membuat Animasi Loading Untuk Blog

Jumat, 03 Agustus 2012

Cara Membuat Animasi Loading Untuk Blog

Kali ini Saya akan membahas cara membuat animasi loading sebuah blog agar terlihat lebih menarik. Jadi akan seperti komputer yang sedang loading, lihat screenshot di bawah ini ↓

Langsung saja ke langkah pembuatannya :

Login ke blogger.com, jika sudah,
Pilih Template → Edit HTML → Expand Template Widget
Cari kode </head> agar mudah mencari tekan f3
Tambahkan script di bawah ini, di atas kode </head>.

<style type="text/css">/* add loading image */ body { background:#000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhYzG9FHzpDjz9i4YouzpRh4dJRQHx4WejgVLyGZawgkgQDIvgnY-kpHCGhZDMxpo2f-XsLCbfDdNeU6JErJGPK5plbQcqnNHusCSoLccTP-CqAaKsuwLfIr1RmWfpjlaMvfwK3zApDg/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.

Selamat Mencoba !

Read more: http://www.ruki-zone.com/2012/03/membuat-animasi-booting-untuk-blog.html#ixzz1xx4huyxW

Ato Blo

Jumat, 03 Agustus 2012

Cara Membuat Animasi Loading Untuk Blog

Tidak ada komentar:

Posting Komentar