Ini Solusinya Cara Membuat Animasi Loading Page Sederhana Pada Blogger

Hallo sahabat webmuna dimanapun anda berada pada kesempatan kali ini saya akan membagi sebuah tutorial tentang bagaimana membuat animasi loading page saat pertama di buka pada blogger.

Membuat animasi loading page pada blogger selain memperindah tampilan blog juga dapat memperlihatkan kepada pembuka blog sobat bahwa kontenya lagi di memuat atau sedang lagi proses loading.

Nah jika blog sobat sebelumnya tidak menggunakan animasi ini dan ingin mencoba membuat animasi loading page ikuti dan lakukan sesuai dengan tutorial dibawah ini.

TUTORIAL CARA MEMBUAT ANIMASI LOADING PAGE BLOGGER

#1. Untuk langkah pertama sama seperti biasa login dulu kedalam blogger selanjutnya pilih tema atau template selanjutnya klik menu Edit HTML.

#2. Selanjutnya cari kode </head> tekan (Ctrl + F) untuk memudahkan pencarian.

#3. Jika sudah ketemu Copy kode HTML dibawah ini dan Paste atau letakkan di bawah kode </head> seperti pada contoh gambar dibawah.

<div id='loding-awal'>Loading...</div>

 #4. Selanjutnya cari kode ]]></b:skin> kemudian Copy kode CSS dibawah ini letakkan di atas kode ]]></b:skin>

#loding-awal {
  width:100%;
  height:100%;
  position:fixed !important;
  position:absolute; /* IE6 Fallback */
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  z-index:999999;
  background:#fff url(https://media.giphy.com/media/xlWRhbwLsVmJG/giphy.gif) no-repeat center;
  color:transparent !important;
  text-indent:-99999px;
}

#5. Selanjutnya Cari kode </body> kemudian Copy kode Jquery dibawah ini dan letakkan di atas kode </body>

<script>
$(window).bind("load", function() {
    $('#loding-awal').fadeOut();
});
</script>

#6. Terakhir klik menu SIMPAN untuk menyimpan template dan lihat hasilnya.

PENJELASAN :
Jika sobat ingin mengganti icon loading lainnya sobat bisa cari di google kemudian ganti URL Image pada css

background:#fff url(...masukan url image baru...) no-repeat center;
color:transparent !important;

Demikianlah sedikit penjelasan dari saya tentang bagaimana membuat animasi loading page pada blogger semoga dapat membantu dan bermanfaat.

Lihat juga Cara Membuat SlideShow Pada Blogger untuk memperindah tampilan blog.

Selamat Mencoba...