19 Efek Loading Keren di Blogger Yang Wajib Kamu Coba

  • Whatsapp
Efek Loading Keren di Blogger
Efek Loading Keren di Blogger
5/5 (1)

Memasang Efek Loading Keren di Blogger » Selain seo biasanya pemilik blog atau Website juga mempercanti tampilan blog dengan beberapa efek, Salah satu efek untuk mempercantik blog adalah dengan Memasang Efek Loading Keren di Blogger.

Efek Loading Keren di Blogger
Efek Loading Keren di Blogger

Seperti judul artikel ini, Saya akan membagikan panduan Cara Memasang Efek Loading Keren di Blogger yang keren, Cara kerja script ini adalah Transisi yang akan muncul otomatis ketika blog loading dan akan selesai, jika halaman sudah terbuka sempurna.

Lalu Apakah Efek ini Nantinya Akan Membuat Loading Blog Menjadi Lambat?

Santai saja panduan Membuat Efek Loading Keren di Blogger ini tidak akan membuat loading blog menjadi lambat, Hal tersebut dikarenakan semuanya murni CSS dan SVG tanpa ada gambar sama sekali. Oke langsung saja kita simak panduan Memasang Efek Loading Keren di Blogger  dibawah ini.

Memasang Efek Loading Keren di Blogger

Seperti biasa hal pertama yang harus kamu lakukan adalah masuk halaman Dasboard Blogger kamu, Kemudian pilih tab Template kemudian klik tombol Edit HTML.

Kemudian tambahkan script dibawa ini tepat sebelum kode </body> atau kode &lt;!--</body>--&gt;&lt;/body&gt;

jQuery
<script type=’text/javascript’>
//<![CDATA[
// Preloader
$(window).load(function(){$(“.spinner”).fadeOut(),$(“#preloader”).delay(350).fadeOut(“slow”),$(“body”).delay(350).css({overflow:”visible”})});
//]]>
</script>

Tambahkan lagi kode dibawa ini tepat dibawah kode <body>

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

Jika sudah tambahkan lagi kode CSS ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

CSS
<style type=’text/css’>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% – 20px);left:calc(50% – 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

Terahir klik tombol Simpan Template dan lihat, Hasilnya akan seperti dibawah ini.

See the Pen Memasang Efek Preloading Keren di Blogger by LapakLama.com (@Lapaklama) on CodePen.


Pilihan Efek Loding Keren di Blogger

Disini saya menyediakan pilihan HTML dan CSS untuk membuat Efek Animasi Loading Yang Keren di Blogger.

Untuk Pilihan Efek Loading Blog Yang Keren Lainya ada di Halaman Selanjutnya Gan

Nilai Kualitas Konten

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

2 Komentar