[Tutorial] Membuat Pre-Loading Kece Pada Blogger Part #1

cara agar membuat blogger mu terlihat keren dengan menambahankan loading kece pada blogger
Sebelum Kita Mulai, Lebih Baik Ucapkan Bismillah Terlebih Dahulu, Jika Sudah...

Langsung Saja Gas Kan...

Part 1

Pertama Silahkan Edit Pada Tema HTML

Sekarang Cari ]]></b:skin> Taruh Script Berikut Sebelum ]]></b:skin>

/* Preloader Animation In Blogger */ .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); } }

Jika Sudah...

Cari </body> Lalu Paste Code Berikut Diatasnya </body>

<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"> Loading... </div> </div> <script> //<![CDATA[ const preloader = document.querySelector(".preloader"); const preloaderDuration = 500; const hidePreloader = () => { setTimeout(() => { preloader.classList.add("hide"); }, preloaderDuration); } window.addEventListener("load", hidePreloader); //]]> </script>

Tinggal Save Dan Lihat Hasilnya :D


Tulisan Dapat Kamu Ubah dengan cara tekan CTRL + F dan Ketik <center><p>Loading...</p></center>

copypaste aja <center><p>Loading...</p></center> Dan Rubah Tulisan Loading Sesuai Yang Kamu Inginkan

Itu Saja Tutorial Dari Saya Terimakasih, Dan Sampai Ketemu Lagi Di Tutorial Selanjutnya (kalo ada lagi :v)

Thanks To LeaF Sebagai Penulis Konten Ini
Dan Di Sunting Ulang Oleh Rizuku

────────────────────

Yuk Support Kami Dengan Cara Berdonasi

Posting Komentar

Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.