Cara Membuat Animasi Loading Page Di Blog

TutorialBlog46 - Cara Membuat Animasi Loading Page Di Blog - Sebagian dari kita pasti sudah tahu apa yang dimaksud dengan proses loading. Ketika proses loading membuka halaman blog lama biasanya yang muncul adalah halaman berwarna putih sebelum halaman yang dimaksud tampil.

Dengan adanya animasi loading page di blog diharapkan pengunjung terhibur dan tidak pergi (kita bisa membuat animasi loading page yang keren dan menarik) begitu saja ke tempat lain. Cara ini secara prinsip sama ketika kita membuat sebuah navigasi di dalam blog yaitu mempermudah pengunjung untuk mencari artikel sehingga tidak begitu saja pergi meninggalkan halaman blog :) .

Dan untuk membuat/memasang animasi loading page di blog kita memerlukan sebuah kode JavaScript dan animasi loading page itu sendiri. Jika masih ada yang belum tahu mengenai loading page silahkan buka atau klik artikel yang ada di dalam TutorialBlog46 dan lihat animasi loading page yang keluar sebelum tampil artikel yang diklik tadi.

Jika masih penasaran dengan topik membuat animasi loading page dan ingin tahu bagaimana cara membuatnya silahkan disimak langkah-langkah berikut:

Cara Membuat Animasi Loading Page Di Blog

1. Log in kedalam akun blogger
2. Pilih menu Template >> Edit HTML
3. Cari tag penutup </body> dan letakkan kode dibawah ini tepat diatasnya

#loading-page {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3D8BbwyZ-yst3-1Zvt1_GPBcJe7_3-GzUvGvo7h1t-Q-9N1PkLCeGeILP2Ye7QMrlJOYeDSBEtWrdRoiLtUkfMUKsUjS6g-CwRTcVA5J-4eT0TsI9pP3ipkhwsaVVf-YpcdoLZyQHIY/s1600/loading-page.GIF') no-repeat 50% 50%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}

4. Klik tombol [Pratinjau template] untuk mereview terlebih dahulu perubahan yang terjadi dan jika sudah sesuai silahkan klik tombol [Simpan template]
5. Selesai

Untuk merubah jenis animasi loading page silahkan ganti url background-nya background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl3D8BbwyZ-yst3-1Zvt1_GPBcJe7_3-GzUvGvo7h1t-Q-9N1PkLCeGeILP2Ye7QMrlJOYeDSBEtWrdRoiLtUkfMUKsUjS6g-CwRTcVA5J-4eT0TsI9pP3ipkhwsaVVf-YpcdoLZyQHIY/s1600/loading-page.GIF') no-repeat 50% 50%; yaitu alamat url yang berwarna merah. Dan untuk meletakkan posisi animasi loading page di halaman blog silahkan rubah koordinat X, Y (50% 50%).

Jika sobat blogger belum punya animasi loading page maka silahkan kunjungi beberapa penyedia free animasi loading page berikut http://www.ajaxload.info/ http://preloaders.net/ http://www.chimply.com/ http://www.loadinfo.net/ dan silahkan unduh atau download animasi tersebut.

Gimana sob? masih ada pertanyaan kah seputar judul tersebut diatas? jika iya, silahkan sampaikan pertanyaan melalui kotak komentar dan jika tidak ada tetapi ingin berbagi pengalaman dengan sobat blogger yang lainnya silahkan berbagi pengalaman melalui kotak komentar juga ya :)

Sekian tulisan artikel blog mengenai cara membuat animasi loading page di blog yang dapat disampaikan. Terimakasih atas kunjungannya, selamat mencoba dan salam sukses [Selesai/]