|
| Tutorial Preloader untuk Blogger |
Preloader adalah sebuah widget loading yang bertujuan untuk menutupi halaman sementara, agar halaman dapat termuat sempurna terlebih dahulu.
Widget ini berguna untuk mempercantik tampilan Blogger. Widget ini juga tidak menggunakan javascript luar, sehingga tidak terlalu memberatkan template.
Khusus untuk yang menggunakan Blogger, berikut cara pemasangannya.
Panduan pemasangan
Seperti biasa, sebelum pemasangan, alangkah baiknya Backup terlebih dahulu template yang mau Kamu modif. Hal itu bertujuan untuk menghindari terjadinya error ketika salah saat pemasangan.
Langsung saja Kita ke tutorial berikut:
- Masuk ke Blog
- Pilih menu Tema
- Klik Edit Tema
- Lalu cari kode </style>
- Silhakan Copy kode berikut:
Tambahkan CSS berikut ini:
/* Loading by Dizhaowa */
#dizhaowaloader{position:fixed;z-index:1800;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(255, 255, 255, 0.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}.no-js #dizhaowaloader,.oldie #dizhaowaloader{display:none}#loader{position:relative;width:2.5em;height:2.5em;transform:rotate(165deg)}#loader{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em)}#loader:after,#loader:before{content:'';position:absolute;top:50%;left:50%;display:block;width:.5em;height:.5em;border-radius:.25em;transform:translate(-50%,-50%)}#loader:before{animation:before 2s infinite}#loader:after{animation:after 2s infinite}@keyframes before{0%{width:.5em;box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}35%{width:2.5em;box-shadow:0 -.5em rgba(225,20,98,.75),0 .5em rgba(111,202,220,.75)}70%{width:.5em;box-shadow:-1em -.5em rgba(225,20,98,.75),1em .5em rgba(111,202,220,.75)}100%{box-shadow:1em -.5em rgba(225,20,98,.75),-1em .5em rgba(111,202,220,.75)}}@keyframes after{0%{height:.5em;box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}35%{height:2.5em;box-shadow:.5em 0 rgba(61,184,143,.75),-.5em 0 rgba(233,169,32,.75)}70%{height:.5em;box-shadow:.5em -1em rgba(61,184,143,.75),-.5em 1em rgba(233,169,32,.75)}100%{box-shadow:.5em 1em rgba(61,184,143,.75),-.5em -1em rgba(233,169,32,.75)}}
Letakan kode HTML berikut dibawah <body> atau cari <body, letakan dibawahnya. Berikut kodenya:
<!--preloader start--> <div id='dizhaowaloader'> <div id='loader'/> </div> <!--preloader end-->
Untuk terakhir, letakan kode Javascript berikut diatas </body>.
<script>
//<![CDATA[
//preloader by Dizhaowa
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('#dizhaowaloader').style.display ='none';
}, 3000);
});
//]]>
</script>
Sesuaikan yang di block 3000 dengan waktu yang diinginkan. 3000 berarti 3 detik.
Simpan jika sudah selesai, dan preloader akan tampil disetiap halaman
Untuk demo, bisa dilihat ketika masuk postingan ini.
