×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Efek Animasi Preloader Keren Di Blogger

Jagoan Redesign - Kali ini saya akan memberikan sebuah tutorial Cara Membuat Efek Animasi Preloader Keren Di Blogger

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

Cara Membuat Efek Animasi Preloader Keren Di Blogger Desain

Tak hanya itu saja guna nya preloader juga banyak digunakan sebagai animasi untuk mempercantik pada saat loading blog anda. 

Cara Membuat Efek Animasi Preloader Keren Di Blogger

1. Silahkan Login ke Blogger kamu.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Jika Template blog anda belum memasang kode JQuery Ajax silahkan tambahkan kode dibawah ini tepat diatas kode </head> atau &lt;/head&gt; jika sudah ada lewati saja tahapan ini.

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

4. Kemudian Copy kode dibawah ini letakkan kodenya diatas kode ]]></b:skin> atau </style>.

/* Jagoanloader  By Jagoan Redesign */
#jagoanloader{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%}}

5. Selanjutnya anda cari kode <body> atau &lt;body&gt; lalu pastekan kode dibawah ini tepat dibawah kode tersebut

<div id='jagoanloader'>
<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> 

6. kemudian Cari lagi Kode </body> atau &lt;/body&gt; dan paste kode dibawah ini tepat di atas kode tersebut

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

Nah, itu adalah tutorial Cara Membuat Efek Animasi Preloader Keren Di Blogger, Jika mengalami kesulitan silahkan komentar dibawah artikel ini. semoga artikel ini bermanfaat dan terimakasih.

Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

1 Komentar

  1. cara buat icon label otomatis di homepage mirip blog ini gimana ya

    ReplyDelete
  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel