Beranda  ›  Blogger  ›  Css  ›  Tutorial

Cara Memasang Preloader di Blogger

Selasa, 12 Desember 2023 2 Komentar Edit
Halo kali ini aku mau membagikan tutorial Cara Memasang Preloader di Blogger agar situs blogger kamu terlihat sangat keren dengan memasang tutorial Cara Memasang Preloader di Blogger siapa sih yang gatau tentang preloader di blogger, jika kamu belum tau fungsi memasang Preloader ini aku mau jelasin sedikit mengenai Preloader ini.

Memasang Preloader di Blogger

Apa itu Preloader di Blogger

Preloader merupakan sebuah widget loading yang dimana widget ini berfungsi untuk menutupi halaman sementara agar halaman dapat termuat sempurna terlebih dahulu.

Widget ini juga dapat mempercantik tampilan website atau blog kamu agar makin keren dan kece dan tentunya akan memanjakan para pengunjung diblog kamu.

Cara Memasang Preloader di Blogger 

1. Masuk Ke Dashboard Blogger > Tema > Edit HTML
2. Lalu kamu cari kode </style> dan salin kode dibawah ini dan letakan tepat diatas kode </style>
  /* 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)}}

3. Letakan Kode HTML dibawah ini dan letakan tepat dibawah kode <body>
  <!--preloader start-->
<div id='dizhaowaloader'>
<div id='loader'/>
</div>
<!--preloader end-->

4. Langkah terakhir salin kode Javascript dibawah ini dan letakan tepat di atas </body>
<script>
//<![CDATA[
//preloader by Dizhaowa
document.addEventListener('DOMContentLoaded',function(){
setTimeout(function(){
document.querySelector('#dizhaowaloader').style.display ='none';
}, 3000);
});
//]]> 
</script>

5. Kemudian Simpan

Yang ditandai 3000 Silahkan kamu ubah dengan waktu yang kamu inginkan 3000 sama dengan 3 detik
"Jangan Lupa Bagikan Artikel Ini Ya"

2 Komentar untuk "Cara Memasang Preloader di Blogger"

Langganan: Posting Komentar (Atom)