Cara Memasang Efek Animasi Preloader Di Blog dengan tampilan Keren

adscblog

Pada kali ini kami akan memberikan sebuah tutorial bagaimana cara memasang animasi preloader responsive dan keren pada blog anda, namun sebelumnya mengenai apa sih gunanya preloader itu bagi blog anda ?

Preloader merupakan sebuah fitur sederhana dalam meload sebuah halaman guna memberikan waktu jeda terhadap server untuk mersepon data dari sebuah halaman itu.

Tak hanya itu saja guna nya preloader juga banyak digunakan sebagai animasi untuk mempercantik pada blog sobat. nah tak perlu berlama-lama lagi berikut ini cara memasang animasi preloader keren di blogger.

Note : cara ini berkerja apabila template sobat sudah menggunakan JQuery Ajax di template sobat contohnya adalah kode di bawah ini :

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

Jika Template blog sobat belum memasang kode tersebut silahkan tambahkan diatas kode </head> atau </head> , jika sudah ada lewati saja tahapan ini.

Step selanjutnya :

Masuk Blogger Sobat
Tema > Edit Tema
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>

Kemudian Cari Kode <body> atau <body> lalu pastekan kode dibawah ini tepat dibawah kode tersebut :

<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>

Lalu Cari lagi Kode </body> atau </body> dan paste kode dibawah ini tepat di atas 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>

Kemudian Save Template dan Lihat Hasil nya

Nah Itulah cara Membuat Efek Animasi Preloader di blog dengan tampilan Efek yang Keren
Semoga ARtikel ini bisa membantu SObat blogger semua,selamat mencoba.

adscblog

ads1

Posted by Dede Ubed, Published at 15 Mei and have 0 komentar

GbloG

Cara Memasang Efek Animasi Preloader Di Blog dengan tampilan Keren

Dede Ubed

Lagi Populer

Template

GbloG

Cara Memasang Efek Animasi Preloader Di Blog dengan tampilan Keren

Previous

Next

Dede Ubed

Lagi Populer