Widget Membuat Efek Preloading di Blogger

Tutorial membuat widget Preloading Blogger

Preloading Blogger

Preloader tanpa jQuery

Preloader adalah sebuah fitur yang memunculkan proses load pada sebuah blog yang dapat kita terapkan dengan menggunakan CSS, HTML dan tanpa jQuery.

Cara kerja dari Efek Preloading di Blogger ini yaitu transisi yang akan muncul otomatis saat memuat halaman di blog dan akan hilang setelah halaman tersebut termuat dengan penuh. Widget efek Preloading yang akan bagikan ini tidak akan mempengaruhi kecepatan blog karena sangat ringan murni CSS tanpa jQuery.

Tutorial

Bagaimana cara membuat Preloading ?. Cara membuat efek Preloading di Blogger, sebagai berikut.

Langkah #1 - Menambahkan Kode CSS

1. Pertama Masuk ke Dashboard Blogger.
2. Pilih Tema.
3. Pilih Edit HTML.
4. Kemudian cari kode ]]></b:skin>, setelah ketemu salin kode CSS di bawah ini dan tempelkan sebelum atau di atas kode ]]></b:skin>.

/* Preloader effect by Blogger Pixabin Official */

.preloader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f7f7f2;
    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);
    }
}

---

Langkah #2 - Menambahkan Kode HTML

Kemudian cari kode </body>, setelah ketemu salin kode script di bawah ini, dan tempelkan di atas </body>.

<div class='preloader'>
        <div class='dots-container'>
            <div class='dot red'/>
            <div class='dot yellow'/>
            <div class='dot green'/>
        </div>

        <div class='preloader-text'>
             Loading...
        </div>
    </div>

---

Langkah #3 - Menambahkan Kode JavaScript

Pada langkah ke-3 ini cari kode </body>, kemudian salin kode script di bawah ini dan letakkan di atas atau sebelum </body>.

<script>
const preloader = document.querySelector(&quot;.preloader&quot;);
const preloaderDuration = 500;

const hidePreloader = () =&gt; {
    setTimeout(() =&gt; {
        preloader.classList.add(&quot;hide&quot;);
    }, preloaderDuration);
}

window.addEventListener(&quot;load&quot;, hidePreloader);
</script>

---

Langkah #4 - Terakhir

Setelah melakukan langkah #1 sampai dengan langkah #3 kemudian Simpan.

Demo

Preloader

Demikian cara membuat Efek Preloading di Blogger, semoga bermanfaat.

Go to Link