Cara Membuat Efek Loading Keren Blogger

Nah pas banget nih sobat, karena diartikel kali ini akan menjawab sebuah rasa penasaran dan ingin mencari jawaban atas pertanyaan dan penasaran sobat akan perihal cara membuat effect loading blogger keren dengan mudah, yang akan saya bagikan ditulisan saya pada artikel kali ini untuk tutorial dan langkah-langkahnya, jadi silahkan disimak dan dibaca sampai habis yah, sebagai berikut.

1. Pertama-tama terlebih dahulu login ke dalam blogger.

2. Masuk ke dashboard blogger milik sobat tersebut.

3. Pilih Theme atau Tema.

4. Lalu sobat cari dan temukan kode tag ]]></b:skin> ini, nah untuk mempercepat pencarian kode tag dari ]]></b:skin> ini, maka sobat dapat menekan tombol CTRL+F dari keyboard dari komputer atau laptop.

5. Nah untuk sobatku semuanya, silahkan salin kode script dibawah ini dan tempelkan tepat di atas kode tag ]]></b:skin> tersebut.

/* EFEK LOADING KEREN BLOGGER BY GOARNIBLOGMU.MY.ID */

.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);

    }

}

6. Setelah itu, salin kode script dibawah ini dan tempelkan tepat diatas kode tag </body> ini ya sobat.

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

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

7. Langkah terakhir, sobat pilih Save atau Simpan dan lihat hasilnya di blog sobat tersebut.

Nah, sekarang blog atau situs sobat ketika dikunjungi oleh pengunjung untuk membaca setiap tulisan diartikel pada postingan blog sobat tersebut, maka akan dilihat pengunjung efek loading keren diblog sobat dan menarik pengunjung lain untuk membaca tulisan sobat diartikel blog sobat dengan mudah.

Jadi begitulah kira-kira sobatku semuanya, untuk tulisan saya diartikel mengeni topik pembahasan saya yaitu Cara Membuat Effect Loading Keren Blogger, jadi efek loading blog keren di blog sobat sudah berhasil terpasang dan membuat tampilan di blog sobat akan semakin menarik dan keren tentunya, semoga bisa bermanfaat dan membantu, jika ada kata-kata saya yang salah, saya memohon minta maaf sebesar-besarnya untuk para sobat semuanya, terimakasih kepada para sobat sudah mau berkenan datang mengunjungi situs atau blog sederhana milik saya ini.