√ cara membuat efek animasi keren pada loading page diblog

cara membuat efek animasi keren pada loading page diblog

Posted by New's

Sunday, December 13, 2020

syugulnajeh - Efek loading page pada blog itu memang tidak terlalu penting untuk blog. Bahkan dengan adanya efek loading page ini mungkin kecepatan dalam mengakses blog kamu akan menurun karena banyaknya script yang harus dimuat.

Tapi dengan adanya loading page ini desain blog kamu akan lebih cantik lagi dan akan membuat para pengunjung terkesan dengan desain yang dimiliki.

Untuk bisa memasang efek loading lage ini sangatlah mudah. Caranya sama seperti tutorial blogging yang sebelumnya. Dengan memasukan sedikit baris kode CSS dan jQuery pada blog, efek animasi ini sudah bisa dilihat dengan nyaman.

Sebelum kamu memasang efek animasi ini, sebaiknya kamu pikirkan kembali efek samping atau kekurangan yang akan kamu dapat jika kamu memasangnya. Diantaranya adalah :

1. Mengurangi kecepatan loading blog

Kalau kecepatan load blog kamu sangatlah kurang (alias lambat), maka otomatis para pengunjung akan malas mengkases artikel yabg akan dibaca.

2. Menurunkan skor SEO dihalaman Google

Kekurangan yang lainnya jika kamu memasang efek animasi loading page ini adalah dapat menurunkan skor SEO blog dihalaman pencarian Google.

Dan kalau skor blog kamu menurun, maka otomatis artikel-artikel yabg ada diblog kamu semakin lama akan semakin terpendam. Karena Google hanya akan memunculkan artikel atau web dengan kualitas terbaik dan terutama saat loading.

Tapi kalau kamu tetep masih pengen masang efek animasi pada loading page ini, kamu bisa ikuti langkah-langkah dibawah ini.

Cara Membuat Efek Animasi Pada Loading Page Agar Terlihat Keren

1. Masuk ke Daskbor blogger masing-masing.

2. Masuk ke menu Theme --> Edit HTML.

3. Kemudian cari kode ]]></b:skin> atau </style> juga bisa (gunakan CTRL + F untuk memudahkan dalam pencarian kode).

4. Jika sudah ketemu, paste CSS dibawah ini tepat diatas kode tersebut.

/*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/AVvXsEgBO6Xy9DV6Z7Sk2iA3hYHmLoKDFz7eNe925hghw0liddLRXytrO7nRoY6oNuQfA42ny1kkZZ7lh4oGPB1yt6WKNMZ5lBw64h5JBNrgcOAWifzI491RC4kV_ormmQp1dDphaWicau3NrSIx/s1600/LoadingBSU.gif')
no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}

! Ganti teks yang sudah ditandai garis dan tebal dengan link animasi gif yang ingin kamu gunakan

5. Kemudian cari pastekan kembali kode dibawah ini tepat berada diatas tag </body> (tag ini terletak dibagian paling bawah sebelum tag penutup HTML).

<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>

6. Langka terakhir simpan dan lihat hasilnya.

Itulah tutorial singkat mengenai cara membuat efek animasi pada loadkng page diblogger yang bisa saya tulis pada artikel ini.

Ouh iya, untuk url animasi gifnya kamu bisa cari sendiri di Google dengan kata kunci "Loading Page Keren"