Masalah kecepatan loading blog memang menjadi topik menarik yang sering muncul dalam setiap pembahasan artikel berkategori blogging. Berbagai cara dicoba untuk mengatasi masalah tersebut. Selain membuat loading blog semakin ringan saat diakses, kita juga bisa menyiasati hal tersebut dengan memasang preloader. Pada postingan kali ini, saya ingin membagikan sebuah cara untuk membuat preloader atau efek animasi preloading yang muncul sebelum halaman blog dimuat dengan sempurna.
Preloader adalah sebuah transisi atau tampilan yang berfungsi sebagai alat jeda waktu sekaligus hiburan bagi pengunjung saat proses sedang loading. Tampilan ini muncul secara otomatis saat sumber daya blog sedang dimuat dan akan hilang setelah halaman berhasil dibuka sepenuhnya. Intinya, ketika pengunjung membuka isi halaman blog, maka sebelum halaman itu terbuka akan tampil efek animasi preloader ini agar pengunjung menunggu sampai halaman berhasil dimuat. Ketika halaman telah terbuka, maka efek preloading ini juga akan secara otomatis menghilang dari hadapan pengunjung.
Jika dicermati, pemasangan efek preloading ini sebetulnya memang akan menambah berat proses loading halaman meski tidak seberapa. Namun jika dilihat dari fungsinya, hal itu tampaknya seimbang dari dampak positif yang ditimbulkannya. Tidak hanya itu saja, tampilan blog juga akan semakin menarik dengan adanya efek preloading ini. Hanya saja, sebelum memasangnya ada baiknya perhatikan terlebih dulu kecepatan loading blog anda. Jika kecepatan loading masih dalam batas wajar, silahkan anda bisa memasang fitur pleloader ini di blog anda.
Hal ini penting karena jika loading blog anda sudah cukup berat, maka tampilan preloader ini justru akan membuat halaman semakin lama untuk terbuka. Ia hanya akan berputar-putar sementara pengunjung tidak sabar lagi untuk menunggunya. Oleh karenanya, jika anda tidak ingin ditinggalkan pengunjung, tingkatkan lagi kecepatan loading blog anda sebelum memasang efek preloading ini. Ohya, tampilan prealoader yang akan kita buat kali ini cukup simpel tapi keren untuk membuat tampilan blog anda semakin menarik.
Cara Memasang Preloader Simpel Keren di Blogger
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode </head> dan letakkan kode CSS berikut ini di atasnya.
<style>
.simpelpreloading{
width: 100%;
height: 100vh;
background-color: #fff;
position: fixed;
display: flex;
z-index: 99999;
align-items: center;
justify-content: center;
}
.simpelpreload{
width: 50px;
height: 50px;
border: 5px solid;
color: #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: simpelpreload 1.2s linear infinite;
}
@keyframes simpelpreload{
25%{
color: #2ecc71;
}
50%{
color: #f1c40f;
}
75%{
color: #e74c3c;
}
to{
transform: rotate(360deg);
}
}
</style>
4. Selanjutnya cari kode <body> dan letakkan kode berikut ini di bawahnya.
<div class="simpelpreloading">
<div class="simpelpreload"></div>
</div>
5. Terakhir cari kode </body> dan letakkan kode berikut ini di atasnya.
<script>
$(window).on("load",function(){
$(".simpelpreloading").fadeOut(1000);
});
</script>
6. Simpan kembali template anda dan lihat hasilnya.
Demikianlah Tutorial tentang Cara Membuat Efek Preloading Simpel Keren di Blog. Semoga bermanfaat.
Thanks for reading Cara Membuat Efek Preloading Simpel Keren di Blog. Please share...!
CONTOHNYA MANA BANG SERTAKAN JUGA DONK LANGSUNSUNG ATAU DIBUATKAN 1 BLOG DEGN EFEK INI
BalasHapusCoba aja bang, kalo ingin tahu hasilnya seperti apa buka saja:
Hapushttps://cobasalam.blogspot.com