Preloader merupakan sebuah script yang berfungsi sebagai alat jeda waktu yang muncul ketika proses loading berlangsung. Tampilannya juga berfariasi karena memang dibuat supaya pengunjung blog merasa terhibur.
Efek animasi preloading akan muncul secara otomatis dan akan hilang saat data blog atau situs sudah berhasil dimuat.
Akan tetapi perlu digaris bawahi,pemasangan script ini sebaiknya tidak dilakukan apabila kondisi loading blog kalian benar-benar lambat akibat terlalu banyak memuat gambar,video,iklan ataupun kode-kode script lain dari hasil modifikasi tampilan blog. Karena dengan menambahkan script efek preloading tentu akan membuat proses loading blog semakin berat walaupun ada segi positif dari efek animasi yang ditampilkannya. So....silahkan pertimbangkan terlebih dahulu sebelum memasangnya. Kecuali jika memang blog kalian tidak ada masalah loading ketika diakses maka tidak ada salahnya memasang script ini karena proses loading biasanya banyak terjadi pada para pengguna internet akibat kondisi jaringan internet yang lemah.
Cara membuat efek animasi preloading.
Masuk ke akun blogger kemudian pilih menu tema lalu klik edit html.
Langkah pertama silahkan cari kode </head> dan letakan script di bawah ini tepat di atas kode </head>.
<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>
.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>
Langkah kedua silahkan cari kode <body> dan letakan script di bawah ini di bawah kode <body> tersebut.
<div class="simpelpreloading">
<div class="simpelpreload"></div>
</div>
<div class="simpelpreload"></div>
</div>
Langkah selanjutnya silahkan cari kode </body> dan letakanan script di bawah ini di atas kode </body> tersebut.
<script>
$(window).on("load",function(){
$(".simpelpreloading").fadeOut(1000);
});
</script>
$(window).on("load",function(){
$(".simpelpreloading").fadeOut(1000);
});
</script>
Langkah terakhir adalah klik simpan.
Demikian penjelasan cara membuat efek preloading di blog dan semoga bermanfaat buat semuanya.
Tidak ada komentar:
Posting Komentar