Cara membuat Loading Animasi PRELOAD untuk Website dan Blogger agar tampil Elagan

Apakah sobat blogger pernah memasang kode Loading Animasi PRELOAD untuk  Website dan Blogger  teman teman semua. Menurut saya ini keren sih.. sembari menunggu loading waktu masuk ke tampilan website atau blogger, pengunjung  disuguhkan tammpilan minimalis yang elegan.

Saya merancang kode ini dan sudah diaplikasikan ke blogsite GoSMK Bakti Pangkalpinang dan Toko Bedoeit Online. Untuk teman teman yang berkenan menerapkan dan mengaplikasikan nya juga di blog dan website nya, langsung saja penerapannya. Cekidot wae..

PENGAPLIKASIAN KODE  :

1. Masuka ke mode Dashboard blogger teman teman semua, tambah Widget Edit HTML di Tata Letak. Masukkan kode dibawah ini. Kode saya bagi menjadi 3 Kotak ya teman teman agar tidak semerawut dan berantakan nantinya.

Kode Kotak 1:

</> Kotak 1 CSS

<style> /* CSS Halaman Loading Screen Penutup Penuh */ #custom-blog-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #121212; /* Latar belakang gelap sesuai galeri video */ z-index: 999999; /* Memastikan berada di lapisan paling atas */ display: flex; justify-content: center; align-items: center; opacity: 1; visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; } /* Kotak Penampung Konten Tengah */ .preloader-content-box { display: flex; flex-direction: column; align-items: center; gap: 25px; /* Jarak antar elemen */ } /* Pengaturan & Animasi Denyut Logo Emas Huruf B */ .preloader-logo-animated { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 30px rgba(255, 204, 0, 0.25); /* Efek kilau emas */ animation: elegantPulse 2s ease-in-out infinite; } /* Animasi Putar Ring Spinner */ .preloader-spinner-ring { width: 35px; height: 35px; border: 3px solid rgba(255, 204, 0, 0.1); border-radius: 50%; border-top-color: #ffcc00; /* Warna kuning emas */ animation: fastSpin 0.8s linear infinite; display: block !important; } /* Teks Status Loading */ .preloader-text-status { color: #a0a0a0; font-family: 'Segoe UI', Roboto, sans-serif; font-size: 13px; letter-spacing: 2px; margin: 0; font-weight: 600; text-transform: uppercase; } /* LOGIKA ANIMASI KEYFRAMES CSS */ @keyframes elegantPulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(255, 204, 0, 0.5); } 100% { transform: scale(1); } } @keyframes fastSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Optimasi Skala Ukuran Khusus Layar HP Cerdas */ @media (max-width: 600px) { .preloader-logo-animated { width: 110px; height: 110px; } .preloader-spinner-ring { width: 28px; height: 28px; } .preloader-text-status { font-size: 11px; letter-spacing: 1.5px; } } </style>

Kode Kotak 2:

</> Kotak 2

<!-- KODE PRELOADER BLOG REVISI FINAL --> <div id='custom-blog-preloader'> <div class='preloader-content-box'> <!-- LOGO HURUF B DENGAN KODE EMBED AMAN (ANTI BROKEN LINK) --> <img alt='Loading SMK Bakti' class='preloader-logo-animated' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJEdqYexwQmY_nEpVSogodbelrnZPDVX5VjNeyMbznD0XemVonJmLxFq87lqhqWeNmaRH8bZ_9pxjsryrSJ_4VFMyuQvOJwY1xmeLy5XS6F5suLKK2f3fxjPULMHQG6Jnu_gu8RQsY0x-O3gf_TJvHmFmgMELyIaprAmJMyVQFEFnmFb2Zz_7u2hT9x4Du/s492/logoSMKAI.png'/> <!-- Animasi Lingkaran Putar Halus Di Bawah Logo --> <div class='preloader-spinner-ring'></div> <p class='preloader-text-status'>Memuat Halaman...</p> </div> </div>

Kode Kotak 3:

</> Kotak 3 Skrip

<script> // JavaScript dengan Jeda Waktu Sengaja agar Preloader Terlihat Elegan function hideBlogPreloader() { var preloaderElement = document.getElementById('custom-blog-preloader'); if (preloaderElement) { // Memberikan jeda waktu sengaja selama 1.5 detik agar animasi terlihat dulu setTimeout(function() { preloaderElement.style.opacity = '0'; preloaderElement.style.visibility = 'hidden'; // Menghapus elemen dari layar setelah transisi memudar selesai setTimeout(function() { preloaderElement.remove(); }, 500); }, 2000); } } // Menjalankan fungsi penutupan saat web selesai memuat seluruh komponennya window.addEventListener('load', hideBlogPreloader); // CADANGAN: Tetap tutup otomatis setelah 4 detik jika internet pengunjung lemot setTimeout(hideBlogPreloader, 4000); </script> <!-- END KODE PRELOADER -->

2. Gabungkan ke Tiga Kode pada kotak masing masing dengan urutan.,

Kode Kotak Pertama terlebih dahulu, Lalu Kode Kotak Kedua tepat dibawah Kode Kotak Pertama, dan terakhir Kode Kotak ketiga tepat dibawah Kode Kotak Kedua 

3. Simpan Widget Tata Letak. Selesai.

 

KETERANGAN KODE : 

a. Ganti dan rubah kode.,

<img alt='Loading SMK Bakti' class='preloader-logo-animated' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJEdqYexwQmY_nEpVSogodbelrnZPDVX5VjNeyMbznD0XemVonJmLxFq87lqhqWeNmaRH8bZ_9pxjsryrSJ_4VFMyuQvOJwY1xmeLy5XS6F5suLKK2f3fxjPULMHQG6Jnu_gu8RQsY0x-O3gf_TJvHmFmgMELyIaprAmJMyVQFEFnmFb2Zz_7u2hT9x4Du/s492/logoSMKAI.png'/> //dengan URL gambar yang sobat ingiinkan     

b. Ganti dan rubah kode;

setTimeout(function() {
                preloaderElement.remove();
            }, 500);
        }, 2000);  // sesuai waktu jeda yang sobat inginkan 

 

Nah, menarik bukan pengaplikasiannya teman teman blogger, Demikianlah artikel sederhana "Cara membuat Loading Animasi PRELOAD untuk  Website dan Blogger agar tampil Elagan" semoga bermanfaat untuk teman teman blogger semuanya. Selamat berkreasi untuk mempercantik dan memperganteng tampilan webiste dan blogger sobat semua. Apabila ada yang ingin ditanyakan, silahkan Komen dengan bahasa yang baik ke kotak komentar Disqus dibawah ya.. Salam Ngerapik Blog,,!