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:

  • Baca Novel : Ancika, Dia yang Bersamaku Tahun 1995 - Pidi… Prolog Kisah yang akan saya bagikan ini dimulai dari masa remaja saya, 24 tahun yang lalu. Ini bukan cerita yang luar biasa, tapi merupakan kisah nyata tentang saya, yang saya…
  • Menambahkan Advanced Social Widget pada Sidebar Blogger Jika sobat berkunjung ke maxmanroe.com pada bagian bawah sebelah kanan ada widget subscribe. Widget tersebut sangat komplit karena selain subscribe email, informasi yang ditampikan juga berupa jumlah followers twitter, page…
  • Helen dan Sukanta - Pidi Baiq BAB I. Lacheden Javaan 1 Bulan Juni 2001 itu, saya merasa sangat senang bertemu dengan Nyonya Helen di restaurant Lachende Javaan, yaitu sebuah restaurant Indonesia yang cukup populer di Haarlem,…
  • Manuskrip Amsterdam - Pidi Baiq Cerita ini saya repost dari blog Pidi Baiq, selamat membaca... *** I DE DAMPKRING 1 Langit warna abu-abu dan rendah, tetapi belum hujan. Itu bulan Mei yang khas di tahun…
  • Sejarah Berdirinya Persatuan Islam (PERSIS) Persatuan Islam (Persis) berdiri pada permulaan tahun 1920-an, tepatnya tanggal 12 September 1923 di Bandung. Idenya bermula dari seorang alumnus Dâr al-‘Ulûm Mekkah bernama H. Zamzam yang sejak tahun 1910-1912…
  • 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…
  • Meningkatkan Kecepatan Internet Dengan Command Prompt (CMD) Kecepatan internet yang lambat adalah masalah yang tidak pernah berakhir yang mengganggu pengguna internet setiap saat. Terkadang masalah tersebut disebabkan konfigurasi jaringan, bisa juga masalah pada PC bahkan ISP itu…
  • Daftar Lengkap Buku dan Novel Pidi Baiq Pidi Baiq adalah seorang seniman yang punya banyak kelebihan. Selain sebagai seorang musisi dan pencipta lagu, ia juga seorang penulis, ilustrator, pengajar dan komikus. Pidi Baiq mengaku imigran dari surga…
  • Kata Bijak Untuk Para Pemimpin Dalam Menghadapi Tantangan… Tidak sulit menjadi seorang pemimpin jika dicintai oleh rakyatnya. Kata bijak yang ditunjukan untuk seorang pemimpin ini merupakan kumpulan kata bijak kepemimpinan dari orang-orang luar biasa, mereka telah lebih dahulu…
  • 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…

Leave a Comment