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 :
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 :
1. Masuk Blogger Sobat
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 dibawah kode tersebut :
5. Lalu Cari lagi Kode </body> atau </body> dan paste kode dibawah ini tepat di atas 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> 5. 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> 6. Simpan template anda.