Cara Membuat Efek Page Loading Pada Blog



       Hey sob? kali ini saya akan memeberikan sebuah cara bagaimana caranya untuk membuat atau menambahkan sebuah fitur animasi efek page loading gif pada sebuah blog, mungkin kalian pernah melihat pada beberapa blog dan salah satu ini blog sejuta umat juga menggunakan animasi gif page loader, oleh karena itu saya akan bagikan cara ini untuk kalian semua yang ingin menambahkan efek page loading pada blog kesayangan anda.

       Untuk menambahkan sebuah efek animasi page loading pada blog sebenarnya cukup mudah, hanya saja anda harus tau kode dari script tersebut, untuk membuat agar blog anda menjadi ada efek gambar gif saat mengganti ke halaman lainnya anda bisa simak pembahasan yang dijelaskan di bawah ini. Menambahkan efek loading blog merupakan sebuah fitur yang unik dan keren untuk mempercantik tampilan blog anda, Oke bagi anda yang tidak sabar dengan bagaimana cara memasang sebuah widget loading page pada blog bisa langsung simak pembahasannya di bawah ini.

Cara Menambahkan Efek Loading Blog

1. Login pada Blog anda.

2. Lalu masuk pada menu "Template" dan klik "Edit HTML".

3. Setelah itu anda cari kode "</style>" (gunakan ctrl+f untuk mempermudah pencarian).

4. Jika kode </style> sudah ketemu, anda bisa letakan kode di bawah ini tepat diatas kode </style>.

/* BlogSejutaUmat_Loading Page */
#page-loader {position:fixed! important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url (&#39;https://lh3.googleusercontent.com/-Us1G783moTk/ViY4TStzELI/AAAAAAAAG9M/A0XGcSSM4qQ/s1600/LoadingBSU.gif&#39;)
no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}
Keterangan : Anda bisa ganti url gambar gif berwarna merah dengan gambar milik anda sendiri.

5. Setelah itu cari kode "</body>" dan letakan kode di bawah ini tepat diatas kode </body> tadi.

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>

6. Terakhir "Simpan Template" dan lihat hasilnya.

Oke sangat mudah bukan untuk membuat sebuah fitur loading pada blog anda? mungkin itu saja yang bisa saya berikan mengenai "Cara Membuat Efek Page Loading Pada Blog" ini, semoga dengan apa yang sudah saya berikan ini dapat bermanfaat bagi Anda. Jangan lupa untuk like dan follow akun kami untuk mendapatkan info serta update terbaru dari kami. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar anda. Terimakasih.

Previous
Next Post »

► Dilarang meninggalkan link aktif
► Dilarang komentar yang mengandung sara, pornografi dsb.
► Semoga artikel bermafaat
► Terimakasih sudah berkomentar :)
Out Of Topic Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Powered by Blogger.