6 Langkah Mudah Membuat Skeleton Loading Screen di Blogger
Pedia Lover - Enam langkah mudah membuat skeleton loading screen di blogger.
Seperti judul artikel pada hari ini "membuat skeleton loading screen". Skeleton loading saat ini sudah banyak digunakan pada website, blog, maupun aplikasi. Contohnya seperti, Twitter, Facebook, YouTube, dan lain sebagainya.
Apa itu Skeleton Loading?
Skeleton loading adalah teknik yang digunakan dalam pengembangan antarmuka pengguna (UI) untuk meningkatkan kecepatan dan pengalaman pengguna. Biasanya, saat aplikasi atau halaman web sedang memuat konten yang memerlukan waktu, seperti daftar item atau bagian yang kompleks, pengguna akan menghadapi jeda atau penundaan yang membuat mereka tidak tahu apa yang sedang terjadi.
Dalam skeleton loading, daripada menampilkan tampilan kosong atau pengumuman penundaan, sebuah "kerangka" atau "kerangka gambar" ditampilkan yang menggambarkan tata letak dan struktur elemen yang akan datang. Kerangka ini sering kali berupa garis atau pola yang mewakili posisi dan ukuran elemen yang sebenarnya.
Dengan menggunakan skeleton loading, pengguna mendapatkan umpan balik visual tentang kemajuan proses loading dan merasa bahwa aplikasi atau halaman web tetap responsif. Ini membantu mengurangi rasa frustrasi atau kebingungan pengguna saat menunggu konten sebenarnya dimuat. Setelah konten sebenarnya selesai dimuat, kerangka digantikan oleh elemen aktual yang berisi data atau gambar yang relevan.
Skeleton loading juga dapat meningkatkan kesan kecepatan dan kualitas produk, mengurangi tingkat penolakan pengguna, dan memberikan pengalaman pengguna yang lebih baik secara keseluruhan.
Nah ... Untuk membuat skeleton loading ini, sobat bisa mengikuti langkah-langkah yang sudah mimin berikan di bawah:
Membuat Skeleton Loading Screen di Blogger
1. Masuk ke Blogger
Masuk ke dasbor Blogger sobat dan pilih blog yang ingin ditambahkan skeleton loading screen.
2. Klik Tema dan Pilih Edit HTML
Pada menu sisi kiri, klik "Tema" dan kemudian pilih "Edit HTML".
3. Cari Elemen Body
Cari elemen <body> dalam kode HTML template sobat. Biasanya, elemen ini ditemukan di awal atau dekat awal kode.
4. Tambahkan Kode CSS
Tambahkan kode CSS berikut sebelum tag penutup </head>:
<style>
/* Styling untuk skeleton loading screen */
.skeleton-screen {
animation: skeleton-loading 1s infinite linear;
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 200% 100%;
border-radius: 4px;
overflow: hidden;
position: relative;
}
/* Animasi untuk skeleton loading screen */
@keyframes skeleton-loading {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
</style>
5. Tambahkan Struktur HTML untuk Skeleton Loading
Di dalam elemen <body>, tambahkan struktur HTML untuk skeleton loading screen. Misalnya, jika sobat ingin menampilkan skeleton loading screen pada konten utama, sobat dapat menggunakan struktur berikut:
<div class="skeleton-screen">
<!-- Konten skeleton loading screen -->
</div>
<!-- Konten sebenarnya -->
<div>
<!-- Konten sebenarnya di sini -->
</div>
"Sobat dapat menyesuaikan struktur HTML di atas sesuai dengan kebutuhan."
6. Simpan Tema
Setelah menambahkan kode di atas, klik tombol "Simpan tema" atau "Update" untuk menyimpan perubahan.
Penutup
Setelah sobat mengikuti langkah-langkah di atas, skeleton loading screen akan ditampilkan saat halaman dimuat. Skeleton loading screen ini akan berupa latar belakang bertahap yang terlihat seperti kerangka tampilan halaman yang sebenarnya, memberikan kesan sedang dimuat. Setelah konten sebenarnya selesai dimuat, skeleton loading screen akan menghilang dan konten sebenarnya akan ditampilkan.
Artikel ini pertama kali tayang di pedia lover pada jum'at, 07/07/2023.
Posting Komentar untuk "6 Langkah Mudah Membuat Skeleton Loading Screen di Blogger"
Kebijakan Berkomentar:
Harap diperhatikan! Berkomentarlah dengan bijak menggunakan kata-kata yang sopan, tidak menyertakan link aktif, Rasis, Harasmen, dan lain sebagainya. Apabila kedapatan ada kata-kata kasar/kotor, kami selaku pemilik blog ini akan segera menghapusnya.
Terimakasih!