Cara Memasang Efek Preloader Di Blogger

Dvanart - Di Artikel kali ini saya akan memberikan tutorial cara memasang animasi loading Responsive dan keren pada blog anda, namun sebelumnya apa sih gunanya animasi loading itu bagi blog kita?

Animasi loading atau biasa disebut preloader merupakan sebuah fitur sederhana dalam meload sebuah halaman guna memberikan waktu jeda terhadap server untuk merespon data dari sebuah halaman itu.

Tidak hanya itu saja guna nya preloader juga bamyak digunakan sebagai animasi untuk mempercantik pada blog sobat. Oke gaperlu lama lama lagi berikut ini adalah langkah membuat animasi preloader keren di blogger.

Note : cara ini work apabila template sobat menggunakan JQuery Ajac ditemplate sobat contohnya adalah kode dibawah ini:


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

Jika Template blog kamu belum terpasang kode tersebut silahkan tambahkan kode dibawah ini tepat di atas kode </head> atau </head> , jika sudah ada lewati saja bagian ini iya sobat.

Baiklah, tahap selanjutnya

1. Masuk Ke Blogger

2. Tema > Edit Tema

3. Lalu Cari Kode </head> atau </head> dan paste kode dibawah ini tepat diatas kode tersebut:


<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:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>

4. Kemudian Cari Kode <body> atau <body> lalu pastekan kode dibawah ini tepat di bawah kode tadi:


<div id='preloader'>
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>

5. Lalu Cari lagi kode </body> atau </body> dan pastekan kode dibawah ini tepat diatas kode tersebut:


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

6. Kemudian save template sobat dan lihat hasilnya.

Oke itulah artikel Cara memasang efek preloader di blogger jika ada pertanyaan tentang artikel ini silahkan komentar ya gaes.