Cara Menampilkan Effect Loading di Blogspot Ketika Sedang Memuat Artikel
sumber gambar: symbolsnet.com
Proses terbukanya sebuah laman di blog atau website inilah yang sering disebut dengan proses loading.
Menunggu loading sebuah artikel agar terbuka sangat menjengkelkan, apalagi jika kita terburu-buru ingin segera tahu isi artikel yang bersangkutan.
Yang mahasiswa atau pelajar pasti setuju kan ^^, karena tugas dari dosen sudah hampir dead line hehe.
Proses loading ini pula yang dapat menyebabkan blog kita banyak mengalami bounce rate yang jika dibiarkan akan berdampak pada posisi blog di mesin pencari seperti google.
Bounce rate adalah persentase pengunjung yang meninggalkan web/blog anda setelah hanya membuka satu halaman saja. Misal, pengunjung tersebut membuka halaman utama web/blog atau halaman tertentu web anda, namun tidak membuka halaman lainnya (jokosusilo.com)
Nah, agar para pengunjung blog atau website kita tidak bete saat menunggu loading dari blog yang kita punya maka alangkah baiknya jika kita memberi effect loading.
Efek loading ini bisa memberi rasa nyaman bagi pengunjung sebuah blog, saya tidak tahu persis apa alasannya namun itulah kenyataanya.
Oke tanpa berlama-lama berikut cara menampilkan effect loading di blogspot
1. Silahkan login ke akun blogspot Anda
2. Pilih tema
3. Pilih Edit HTML
4. Cari kode ini
]]></b:skin> atau </style>
5. Jika ketemu, copy kode dibawah ini dan letakan di atas kode no empat (langkah empat)
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNTq9kGdZm8ZSa1Hd_MYIgR3eBPrLMudlFuzJz4XypQCxY-zn6m4bx-9hkb9nTMONv-cjPprJy9TzOUvS73rNv3bYyWWXc-DQYOUE51BRaP3Gg6kw3BW_fo2Y7xN8uPe0E5dXHbu2_mo/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuNTq9kGdZm8ZSa1Hd_MYIgR3eBPrLMudlFuzJz4XypQCxY-zn6m4bx-9hkb9nTMONv-cjPprJy9TzOUvS73rNv3bYyWWXc-DQYOUE51BRaP3Gg6kw3BW_fo2Y7xN8uPe0E5dXHbu2_mo/s200/load6.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
6. Copy kode di bawah ini, dan paste di atas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
Note : Lewati langkah 6 diatas, jika template blog kalian telah dipasangkan Jquery.
7. Masukan kode di bawah ini tepat di atas </body>
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
8. Lalu simpan template
Selesai, saat ini blogspot anda sudah punya effect loading jika ada orang yang mengunjung. Dengan effect loading ini maka para visitor jadi lebih sabar dalam menunggu loading dari laman di blog Anda.
Terimakasih sudah berkunjung, salam.
Sourch: http://bisnisblogtop.blogspot.co.id Sumber http://poliskom.blogspot.com/
