Cara membuat animasi preloader di Blogspot
Meningkatkan pengalaman pengguna (user experience) di website adalah salah satu faktor yang sangat penting dalam pengoptimalan SEO. Salah satu cara efektif untuk melakukannya adalah dengan menambahkan preloader ke blog Anda. Preloader adalah animasi atau gambar yang muncul sementara waktu saat halaman website sedang dimuat, memberikan kesan profesional dan menjaga pengunjung tetap tertarik sambil menunggu konten muncul.
Namun, selain meningkatkan estetika dan user engagement, preloader juga dapat berpengaruh pada kecepatan loading halaman, yang menjadi faktor penting dalam peringkat SEO di mesin pencari seperti Google. Dalam tutorial ini, kami akan membahas cara membuat preloader di Blogspot secara mudah dan cepat, serta bagaimana implementasinya dapat memberikan keuntungan bagi optimasi SEO blog Anda.
Berikut tutorialnya.
Pertama buka Edit HTML kemudian letakkan kode HTML berikut di bawah <body>
<div class='preloader'>
<div class='backdrop' />
<div class='dots-container'>
<div class='dot red' />
<div class='dot green' />
<div class='dot yellow' />
</div>
<div class='preloader-text'> Loading... </div>
</div>
Kemudian langkah kedua letakkan pula kode CSS berikut di bagian sebelum </b:skin>
/* Preloader */
.preloader{position:fixed;width:100%;height:100vh;background:var(--bgcolor);left:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all 400ms;z-index:9999}
.preloader.hide{opacity:0;pointer-events:none}
.preloader .preloader-text{color:var(--fontcolor);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)}
Yang terakhir pasang javascript ini di atas </body>
<script>
const preloader = document.querySelector( & quot;.preloader & quot;);
const preloaderDuration = 1500;
const hidePreloader = () = & gt;
{
setTimeout(() = & gt;
{
preloader.classList.add( & quot; hide & quot;);
}, preloaderDuration);
}
window.addEventListener( & quot; load & quot;, hidePreloader);
</script>
Selesai, tinggal disimpan dan lihat hasilnya.
Menambahkan preloader ke Blogspot Anda bukan hanya tentang memberikan tampilan yang lebih menarik, tetapi juga tentang memperbaiki pengalaman pengguna dan meningkatkan kinerja SEO blog Anda. Dengan memastikan pengunjung tidak merasa terburu-buru menunggu konten muncul, Anda dapat mengurangi bounce rate dan meningkatkan waktu tinggal di halaman, yang keduanya adalah faktor penting dalam algoritma peringkat Google.
Jangan lupa untuk selalu menguji kecepatan situs setelah penambahan preloader, karena terlalu banyak animasi atau elemen yang memperlambat waktu muat dapat memengaruhi kinerja SEO secara negatif. Dengan memadukan desain yang menarik dan pengoptimalan yang tepat, blog Anda akan lebih bersaing di mesin pencari, sekaligus memberikan pengalaman yang lebih baik bagi setiap pengunjung.
Demikian tutorial cara memasang animasi preloader di blogspot. Semoga bermanfaat.