Cara Memasang Efek Animasi Preloader Di Blog dengan tampilan Keren

Cara Memasang Efek Animasi Preloader Di Blog dengan tampilan Keren

Jalak Ikal 15 May 0 komentar
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 &lt;/head&gt; , jika sudah ada lewati saja tahapan ini.

Step selanjutnya :
  •   Masuk Blogger Sobat 
  • Tema > Edit Tema 
  • Lalu Cari Kode </head> atau &lt;/head&gt; 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 &lt;body&gt; 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 &lt;/body&gt; 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.

loading...
Ratings: 
Posted by Jalak Ikal, Published at 15 May and have 0 komentar

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi