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.
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 ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXTOfhGWoPTFgi7Xkn-PFLvt0jEJsu6a8kL8o9My-BC0HcAeQ8Wrx29oJ38SLQ5V9uPv_hynsawrPrFAUl19NBn1LadU-9C8uToeBu9ClgDQMqZD20qkTeEtRbgl9n2sLgWMNscjlLbPE/s1600/LoadingBSU.gif')
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.#page-loader {position:fixed! important;position:absolute;top:0;right:0;bottom:0;
left:0;z-index:9999;background:#fff url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXTOfhGWoPTFgi7Xkn-PFLvt0jEJsu6a8kL8o9My-BC0HcAeQ8Wrx29oJ38SLQ5V9uPv_hynsawrPrFAUl19NBn1LadU-9C8uToeBu9ClgDQMqZD20qkTeEtRbgl9n2sLgWMNscjlLbPE/s1600/LoadingBSU.gif')
no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}
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>
//<![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 mungkin itu saja yang bisa kita berikan mengenai artikel "Cara Membuat Efek Page Loading Pada Blog" ini, semoga dengan apa yang sudah kita berikan ini dapat bermanfaat bagi Kalian. Jika ada Kesalahan atau ada Pertanyaan serta Tambahan bisa isi pada kolom komentar. Terimakasih.
Posting Komentar