Menambahkan Animasi Saat Loading Di Blog

Setiap blogger ingin blognya menjadi yang terbaik diantara blog yang lain, minimal menjadi yang terbaik untuk si-empu blog. Jika sobat mengenal blog saya yang sebelumnya Hanya Ingin Jawaban, ada effect ketika loading / menunggu page selanjutnya terbuka, muncul animasi unyu-unyu yang melambai-lambaikan sapu tangan.

Sama seperti setiap kali sobat akan mengklik link apapun untuk meninggalkan halaman ini, sobat bisa melihat perubahannya (sudah tidak digunakan). Untuk menambahkan efek ini, caranya sebagai berikut

Masuk ke Template → Edit HTML, paste kode tersebut diatas </body> (untuk memudahkan sobat bisa menggunakan ctrl+f)

<style>
#abt-page-loader {
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif') no-repeat 50% 30%;
color: #FFF;
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

ket : disana ada URL http://3.bp.blogspot.com/-sW166HTPK4U/UY2kVNdjsFI/AAAAAAAAEHk/fIO-B-mOeCE/s200/load6.gif, silahkan ganti dengan url gambar yang sobat inginkan

Untuk melihat hasilnya silahkan Save template.

Itu saja tutorial menambahkan animasi ketika loading di blog, silahkan dipraktekan kalo mau, semoga membantu

Rekomendasi:

  • Membatasi Hasil Pencarian pada Blog yang Muncul Semua Pada kali ini saya akan memberikan tutorial bagaimana cara membatasi jumlah hasil postingan pencarian pada blog, biasanya ketika hasil pencarian tidak dibatasi, untuk keyword yang kita tuliskan akan muncul sebanyak-banyaknya,…
  • Merapikan Layout Tata Letak Blogger Yang Berantakan Pada postingan kali ini saya akan memberikan tips bagaimana mengatasi tata letak blog yang acak-acakan, cara mengatur tata letak blog agar terlihat rapi ini disebabkan template blogger sekarang banyak yang…
  • Membuat Text Responsive di Blog Jika sobat mengalami permasalahan tulisan pada postingan yang keluar dari garis tepi postingan, biasanya kejadian tulisan yang keluar dari garis seperti itu terjadi pada kolom komentar dalam versi mobile (hp)…
  • Menambahkan Slideshow Manual Responsive pada Blog Terbaru Pada tutorial kali ini saya akan menginformasikan bagaimana cara menambahkan slideshow manual responsive pada blog. Itung-itung sudah terlalu lama saya tidak membahas tentang tutorial blogger. Penggunaan slideshow bersifat optional, bisa…
  • Membuat Headline Breaking News Responsive di Blog Cara membuat breaking news responsive berjalan di blog seperti yang terlihat pada gambar bisa sobat buat dengan mudah. Dengan adanya headline maka blog kita akan terlihat seperti cuplikan berita berjala…
  • Membatasi Jumlah Postingan Label Blog Yang Muncul Semua Bagaimana cara membatasi jumlah postingan label blogger yang muncul semua? Membatasi jumlah label pada blog menjadi salah satu cara agar ketika kita klik label, postingan berdasarkan label tersebut tidak muncul…
  • Mudah Membuat Situs Safelink Menggunakan SafelinkU… Bagi sobat yang biasa mengunjungi blog download pasti pernah menemukan link safelink, link tersebut merupakan salah satu hal yang akan sobat kunjungi ketika akan mendapatkan file download-nya. Terdapat banyak tutorial…
  • Membuat Tampilan Blockquote menjadi Flat di Blog Bagaimana cara membuat blockquote flat di blogger? Pada dasarnya blockquote default pada sebuah template sudah ada, hanya saja tampilannya kurang kece, sehingga di perlukan beberapa perubahan pada kode css nya.…
  • Membuat Random Posts Tanpa Thumbnail SEO Friendly Cara membuat random post di blog - Widget random posts / other posts menjadi sumber bacaan yang di rekomendasi kan bagi yang berkunjung ke blog sobat, bentuk informasi tidak disampaikan…
  • Membuat Multi Dropdown pada Menubar yang sudah Ada Banyak cara membuat Multi Dropdown dengan menambahkan beberapa CSS baru dan kode baru. Akan tetapi bagaimana cara menambahkan multi dropdown pada menu yang sudah ada? silahkan untuk membuka Kode HTML…

Leave a Comment