Cara Membuat Progress Loading Bar di Blog
Cara Membuat Progress Loading Bar di Blog - Tadi siang saya iseng-iseng membuat gambar animasi loading, lalu saya ingat bahwa gambar animasi tadi bisa dipasang menjadi loading bar blog.
Lalu saya surfing menggunakan chrome milik saya, dan akhirnya saya menemukan cara untuk memasang loading bar di blog ini.
Ternyata caranya cukup simple dan tidak memakan waktu, jadi kalian bisa mempraktekannya sekarang juga.
Tunggu Apa lagi?
INILAH CARANYA
1. Buka blogger.com, pastikan sudah login, kalau belum silahkan untuk login.
2. Pilih template, lalu klik edit HTML.
3. Cari kode </style> dan letakkan kode dibawah tepat diatasnya.
/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('http://s15.postimg.org/s3wsi71cb/my_gif.gif') no-repeat 50% 50%;padding:1em 1.2em;display:none}
4. Setelah itu cari kode </body> dan letakkan kode dibawah tepat diatasnya.
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
5. Simpan dan lihat hasilnya.
KETERANGAN
1. Untuk mengganti gambar, hapus http://s15.postimg.org/s3wsi71cb/my_gif.gif dan ganti dengan gambar yang telah anda sediakan.
2. Jika belum punya, anda bisa mencari di http://preloaders.net
Untuk demo, anda bisa melihatnya dibawah ini.
Refrensi : http://www.ficripebriyana.com/2014/07/cara-membuat-efek-animasi-page-loading-di-blog.html
Mungkin cukup sekian, semoga bermanfaat dan apabila terdapat salah kata mohon maafkan saya.
