Membuat Efek Loading Di Blogger Anda

 


Ada banyak banget cara untuk mempertampan tampilan blog, salah satu cara mempertampan blog yaitu dengan memasang efek loading (pre loading) keren di blog anda.

Untuk cara kerja efek loading di blogspot anda nantinya yaitu, akan muncul sebuah transisi tampilan loading saat pengunjung sedang memuat halaman  blog anda. Dan otomatis transisi efek loading di blogger anda akan hilang saat pengunjung blogger anda berhasil membuat halaman blog anda.

Widget loading untuk blog anda yang akan Cepot bagikan ini gak akan mempengaruhi performa kecepatan blog anda. Karena kode yang Cepot bagikan murni kode ikon svg dan kode CSS saja tanpa gambar sama sekali.

Memasang Efek Preloading Keren Di Blogger Anda

Sebelum menambahkan kode yang akan Cepot bagikan, perlu di ketahui oleh sobat Cepot. Kalau kode yang akan Cepot bagikan akan berjalan dengan sangat baik jika sobat Cepot menggunakan jQuery migrate.

Buka blogspot sobat Cepot > pilih tema > edit html cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt;

Dan pasang kode ini sebelum kode tersebut.


<script>
//<![CDATA[
// Preloader
$(window).load(function(){
  $(".spinner").fadeOut(),
  $("#preloader").delay(350).fadeOut("slow"),
  $("body").delay(350).css({overflow:"visible"})
});
//]]>
</script>

Lalu pasang kode ini sebelum kode </body> atau di tata letak blog kamu.



<div id='preloader'>
  <svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='https://www.w3.org/2000/svg'>
    <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
  </svg>
</div>

Kemudian pasang kode CSS ini di setingan CSS template blogger anda.


Lalu klik simpan dan lihat hasilnya apakah tampilanya akan seperti di bawah.


See the Pen Card Flip With Manual JS by Bang Alex Indonesia (@Bang-Alex-Indonesia) on CodePen.


terima kasih sudah berkunjung ke blogcepot.com

Artikel Terkait

0 Comments