Cara Memasang Efek Animasi Preloader Keren Di Blogger
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.
Dan hasilnya adalah sebagai berikut ini dibawah ini,
Bagaimana cantik bukan ?, terimakasih telah berkunjung pada situs kami semoga dapat memberikan manfaat untuk anda semua lalu jangan lupa jika anda menyukai artikel ini silahkan bagikan ke media sosial kalian guna membangun situs ini agar dapat memberikan informasi lainnya yang lebih menarik. salam lewatinaja.com
See the Pen
Preloader by Ade Irawan (@ade-irawan)
on CodePen.
Preloader by Ade Irawan (@ade-irawan)
on CodePen.
Bagaimana cantik bukan ?, terimakasih telah berkunjung pada situs kami semoga dapat memberikan manfaat untuk anda semua lalu jangan lupa jika anda menyukai artikel ini silahkan bagikan ke media sosial kalian guna membangun situs ini agar dapat memberikan informasi lainnya yang lebih menarik. salam lewatinaja.com
Cara Memasang Efek Animasi Preloader Keren Di Blogger
Reviewed by Bella Isyana
on
1/01/2020
Rating:
Reviewed by Bella Isyana
on
1/01/2020
Rating:
Post a Comment