Cara Install Animasi Preload Blogger Terbaru 2024 Anti Delay
1Sekolahers - Apakah kalian sedang mencari artikel tentang Cara Install Animasi Preload di Website Blogger? Jika ya, kalian berada pada artikel yang tepat.
Halo, Sobat 1Sekolahers! Di artikel kali ini, kita akan membahas cara menambahkan animasi preload di website Blogger.
Animasi preload sangat bermanfaat untuk meningkatkan pengalaman pengguna saat mengunjungi situs web sobat 1sekolahers. Dengan adanya animasi preload, pengunjung tidak akan merasa bosan saat menunggu halaman web sobat terbuka sepenuhnya.
Mari kita bahas lebih lanjut tentang pentingnya animasi preload dan bagaimana cara memasangnya di website Blogger sobat.
Memahami Apa Itu Preload!
Pertama-tama, Sobat 1Sekolahers, animasi preload berfungsi untuk menampilkan elemen visual saat halaman web sedang dimuat. Ini membantu menciptakan kesan pertama yang baik dan profesional bagi pengunjung situs.
Animasi ini juga dapat mengurangi tingkat bounce rate, yaitu pengunjung yang meninggalkan situs karena terlalu lama menunggu halaman terbuka. Dengan animasi preload, pengunjung akan lebih bersabar menunggu karena mereka disuguhi tampilan yang menarik.
Cara Install Animasi Preload
Bagi Sobat 1Sekolahers yang ingin menambahkan animasi preload di Blogger sebenarnya cukup sederhana dan bisa dilakukan tanpa perlu pengetahuan mendalam tentang coding, Berikut langkahnya:
Langkah 1: Masuk atau login ke akun blogger kalian.
Langkah 2: Klik icon Bars, di pojok kiri atas.
Langkah 3: Pilin Tema.
Langkah 4: Klik icon disamping tombol Sesuaikan, Lalu pilih edit HTML.
Langkah 5: Tambahkan code CSS berikut di atas code ]]></b:skin>.
/* CSS Preload || Situs: https://1sekolah.com */
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #0f0f0f;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;
}
.preloader.hide {
opacity: 0;
pointer-events: none;
}
.preloader .preloader-text {
color: #838383;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 15px;
}
.preloader .dots-container {
display: flex;
margin-bottom: 48px;
}
.preloader .dot {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;
}
.preloader .dot.red {
background: #ef476f;
animation: bounce 1000ms infinite;
}
.preloader .dot.green {
background: #06d6a0;
animation: bounce 1000ms infinite;
animation-delay: 200ms;
}
.preloader .dot.yellow {
background: #ffd166;
animation: bounce 1000ms infinite;
animation-delay: 400ms;
}
@keyframes bounce {
50% {
transform: translateY(16px);
}
100% {
transform: translateY(0);
}
}
/* End CSS Preload || Situs: https://1sekolah.com */
Langkah 6: Selnjutnya cari kode <body>. lalu letakan code berikut setelahnya.
<!-- Html Preload -->
<div class="preloader">
<div class="dots-container">
<div class="dot red"></div>
<div class="dot green"></div>
<div class="dot yellow"></div>
</div>
<div class="preloader-text">
<!-- Teks Loading Preload -->
Loading...
</div>
</div>
<!-- End Html Preload -->Langkah 7: Cari code </body>. lalu letakan kode berikut tepat diatasnya.
<script>
const preloader = document.querySelector(".preloader");
const preloaderDuration = 400;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
</script>Langkah 8: Langkah terakhir Save Template.
Kesimpulan
Kesimpulannya, Sobat 1Sekolahers, menambahkan animasi preload di website Blogger adalah cara yang efektif untuk meningkatkan pengalaman pengguna dan membuat situs Anda terlihat lebih profesional dan menarik.
Dengan animasi preload, pengunjung akan lebih sabar menunggu halaman web terbuka sepenuhnya, yang pada gilirannya dapat mengurangi bounce rate dan meningkatkan kepuasan pengunjung.
Proses pemasangan yang sederhana dan banyaknya sumber daya online membuat langkah ini mudah diikuti bahkan oleh pemula. Semoga artikel ini bermanfaat dan membantu Sobat 1Sekolahers dalam menambahkan animasi preload di situs Blogger sobat. Selamat mencoba dan semoga sukses!
Posting Komentar