Membuat Loading Page di Blogger. Nah sobat, pada waktu yang lalu saya telah membagikan efek loading weather loader di Blog dan animasi loading page dark style, maka kesempatan ini saya akan membagikan lagi efek loading Blog yang lain, dan lebih sederhana dari efek loading blog sebelumnya.

Ada banyak alasan mengapa pemilik blog memasang efek loading di blognya, misalnya ingin membuat pengunjung blog terkesan, biar kelihatan "wah" atau "wow", atau karena halaman blog yang cukup berat di muat.

Membuat Loading Page Animation Delay Di Blog
Loding Page

Loading Page Animation Delay

1. Di Blog Blogger
2. Pilih menu template > Edit HTML
3. Letakan kode dibawah ini diatas </head>
<style>
/*Loading Page*/
#load-page-seocips { background-color:#FDF11C; width:100%; height:100%; position:fixed; left:0; top:0; z-index:+100000; }
.seocips { position:absolute; width:100%; background-color:#FDF11C; margin:0 auto; text-align:center; padding:200px 0; color:#EB0684; font-family:Verdana; font-size:1.5em; }
.seocips span { animation:crecer 3s infinite; }
.seocips span:nth-child(2) { animation-delay:0.37s; }
.seocips span:nth-child(3) { animation-delay:0.74s; }
.seocips span:nth-child(4) { animation-delay:1.11s; }
.seocips span:nth-child(5) { animation-delay:1.48s; }
.seocips span:nth-child(6) { animation-delay:1.85s; }
.seocips span:nth-child(7) { animation-delay:2.22s; }
.seocips span:nth-child(8) { animation-delay:2.59s; }
.seocips img { border-radius:20px; padding:5px; }
@keyframes crecer {
    0% { font-size:1em; } 50% { font-size:1.8em; } 100% { font-size:1em; }
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/></script>
<script src='https://cdn.rawgit.com/Brando07/share/newbe/load-seocips.js'/></script>
Note:
Jika tidak bisa di save, hapus kode </script> di kode diatas.
4. Letakan kode dibawah ini dibawah <body>
<div id='load-page-seocips'>
<div class="seocips">
  <img src="http://4.bp.blogspot.com/-nD2_uLgR3A8/VgpFuri3mBI/AAAAAAAAFUo/BTTzNdRc2wA/s200/Seocips-logo-head.png"><br>
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
</div>
  </div>
Ganti kode link berwarna hijau diatas denga link gambar atau logo gambar, milik kamu (baca:cara membuat logo secara online)
5. Save template dan selesai.



Bagaimana? jika kamu belum puas dengan efek loading blog ini dan ingin efek loading yang lain, kamu dapat melihatnya di kumpulan efek loading blog. Sekian, terimakasih telah berkunjung.
1 Komentar untuk "Membuat Loading Page Animation Delay Di Blog"

hi Bro sensei! ^O^/
Kenapa saat saya memasang di HTML selalu ada peringatan bahwa
nya harus di ending dengan
sudah berulang kali mencoba tetap tidak bisa -_-
bagaimana cara mengatasinya?