Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
link : Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
Preloader adalah sebuah transisi atau tampilan yang berfungsi sebagai alat jeda waktu sekaligus hiburan bagi pengunjung saat proses sedang loading. Tampilan ini muncul secara otomatis saat sumber daya blog sedang dimuat dan akan hilang setelah halaman berhasil dibuka sepenuhnya. Intinya, ketika pengunjung membuka isi halaman blog, maka sebelum halaman itu terbuka akan tampil efek animasi preloader ini agar pengunjung menunggu sampai halaman berhasil dimuat. Ketika halaman telah terbuka, maka efek preloading ini juga akan secara otomatis menghilang dari hadapan pengunjung.
Jika dicermati, pemasangan efek preloading ini sebetulnya memang akan menambah berat proses loading halaman meski tidak seberapa. Namun jika dilihat dari fungsinya, hal itu tampaknya seimbang dari dampak positif yang ditimbulkannya. Tidak hanya itu saja, tampilan blog juga akan semakin menarik dengan adanya efek preloading ini. Hanya saja, sebelum memasangnya ada baiknya perhatikan terlebih dulu kecepatan loading blog anda. Jika kecepatan loading masih dalam batas wajar, silahkan anda bisa memasang fitur pleloader ini di blog anda.
Hal ini penting karena jika loading blog anda sudah cukup berat, maka tampilan preloader ini justru akan membuat halaman semakin lama untuk terbuka. Ia hanya akan berputar-putar sementara pengunjung tidak sabar lagi untuk menunggunya. Oleh karenanya, jika anda tidak ingin ditinggalkan pengunjung, tingkatkan lagi kecepatan loading blog anda sebelum memasang efek preloading ini. Ohya, tampilan prealoader yang akan kita buat kali ini cukup simpel tapi keren untuk membuat tampilan blog anda semakin menarik.
Artikel yang sedang anda baca Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/10/artikel-menarikcara-membuat-efek.html
Judul : Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
link : Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
Masalah kecepatan loading blog memang menjadi topik menarik yang sering muncul dalam setiap pembahasan artikel berkategori blogging. Berbagai cara dicoba untuk mengatasi masalah tersebut. Selain membuat loading blog semakin ringan saat diakses, kita juga bisa menyiasati hal tersebut dengan memasang preloader. Pada postingan kali ini, saya ingin membagikan sebuah cara untuk membuat preloader atau efek animasi preloading yang muncul sebelum halaman blog dimuat dengan sempurna.
Preloader adalah sebuah transisi atau tampilan yang berfungsi sebagai alat jeda waktu sekaligus hiburan bagi pengunjung saat proses sedang loading. Tampilan ini muncul secara otomatis saat sumber daya blog sedang dimuat dan akan hilang setelah halaman berhasil dibuka sepenuhnya. Intinya, ketika pengunjung membuka isi halaman blog, maka sebelum halaman itu terbuka akan tampil efek animasi preloader ini agar pengunjung menunggu sampai halaman berhasil dimuat. Ketika halaman telah terbuka, maka efek preloading ini juga akan secara otomatis menghilang dari hadapan pengunjung.
Jika dicermati, pemasangan efek preloading ini sebetulnya memang akan menambah berat proses loading halaman meski tidak seberapa. Namun jika dilihat dari fungsinya, hal itu tampaknya seimbang dari dampak positif yang ditimbulkannya. Tidak hanya itu saja, tampilan blog juga akan semakin menarik dengan adanya efek preloading ini. Hanya saja, sebelum memasangnya ada baiknya perhatikan terlebih dulu kecepatan loading blog anda. Jika kecepatan loading masih dalam batas wajar, silahkan anda bisa memasang fitur pleloader ini di blog anda.
Hal ini penting karena jika loading blog anda sudah cukup berat, maka tampilan preloader ini justru akan membuat halaman semakin lama untuk terbuka. Ia hanya akan berputar-putar sementara pengunjung tidak sabar lagi untuk menunggunya. Oleh karenanya, jika anda tidak ingin ditinggalkan pengunjung, tingkatkan lagi kecepatan loading blog anda sebelum memasang efek preloading ini. Ohya, tampilan prealoader yang akan kita buat kali ini cukup simpel tapi keren untuk membuat tampilan blog anda semakin menarik.
Anda tertarik untuk membuatnya?, silahkan ikuti langkah-langkah penerapannya di bawah ini.
Cara Memasang Preloader Simpel Keren di Blogger
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode </head> dan letakkan kode CSS berikut ini di atasnya.
Cara Memasang Preloader Simpel Keren di Blogger
1. Buka akun blogger anda.
2. Pilih menu thema dan klik edit html.
3. Cari kode </head> dan letakkan kode CSS berikut ini di atasnya.
<style>
.simpelpreloading{
width: 100%;
height: 100vh;
background-color: #fff;
position: fixed;
display: flex;
z-index: 99999;
align-items: center;
justify-content: center;
}
.simpelpreload{
width: 50px;
height: 50px;
border: 5px solid;
color: #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: simpelpreload 1.2s linear infinite;
}
@keyframes simpelpreload{
25%{
color: #2ecc71;
}
50%{
color: #f1c40f;
}
75%{
color: #e74c3c;
}
to{
transform: rotate(360deg);
}
}
</style>
4. Selanjutnya cari kode <body> dan letakkan kode berikut ini di bawahnya.
<div class="simpelpreloading">
<div class="simpelpreload"></div>
</div>
5. Terakhir cari kode </body> dan letakkan kode berikut ini di atasnya.
<script>
$(window).on("load",function(){
$(".simpelpreloading").fadeOut(1000);
});
</script>
6. Simpan kembali template anda dan lihat hasilnya.
Demikianlah Tutorial tentang Cara Membuat Efek Preloading Simpel Keren di Blog. Semoga bermanfaat.
Demikianlah Artikel Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic
Cukup sampai disini artikel Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.
Artikel yang sedang anda baca Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/10/artikel-menarikcara-membuat-efek.html
0 Response to " Artikel menarikCara Membuat Efek Preloading Simpel Keren di Blog - Black Exotic"
Posting Komentar