Tutorial Cara Membuat Efek Loading Warna Warni di Blog

Efek loading warna warni di blog - Pada kesempatan kali ini saya akan membuat blog kalian lebih keran dengan memberikan tutorial cara membuat efek loading di blog. Sebelum kita lanjut ke tutorialnya sebaiknya kalian mengetahui terlebih dahulu apa itu efek loading di blog. Loading blog merupakan suatu proses membuka suatu halaman di blog tersebut. Pada default blog tidak memiliki efek loading, namun karena berjalannya waktu sekarang banyak tamplate yang memiliki fitur efek loading pada template blognya. Ada banyak macam efek loading blog seperti rubik, circle, animasi dan masih banyak lagi. Namun tampilan seperti itu menurut pandangan saya membuat blog kita seakan melambat. Di sini saya akan membagikan efek loading warna warni di blog yang tidak membuat blog kita terasa lembat. Pernahkah kalian mengunjungi blog arlina design dan kalian melihat loading di bawah navigasi atas, itulah bentuk efek loading warna warni di blog. Bagaiaman cara membuatnya ? simak tutorial di bawa

Cara Membuat efek loading warna warni di blog

1. Pertama kalian masuk ke dashbord blogger > tamplate > edit html.
2. Setalah masuk di dalam menu edit html kalian masukan script ini dibawah kode <b:skin><![CDATA[

.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::before,myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:&#39;&#39;}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::before{right:50%}
myloader [role=&quot;progressbar&quot;][aria-busy=&quot;true&quot;]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

Baca Juga : Tips Menentukan Niche Blog Yang Tepat Untuk Pemula

3. Setelah itu kalian masukan kode di bawah terserah mau di pasang di mana

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/>
</myloader></div>
<div class='page-loader' id='pagingx'/>
  <form action='/search' id='search-us' method='get'>
<table>
<tbody>
<tr>

4. Masukan kode di berikut tepat di atas lode </body>

<script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

5. Setelah itu kalian bisa save tamplate, dan lihat hasilnya.

Itulah ulasan mengenai cara membuat efek loading warna warni di blog, apabila ada yang eror saat menyimpan silahkan cek dan ulangi lagi step by step, apabila loading blog warna warni tidak muncuk silahkan lihat apa ada yang salah dalam penempatan kode html.

• Tweet
• Share
• Share
• Share
• Share