Membuat Effect Loading Warna Warni Pada Blog

Membuat Effect Loading Warna Warni - Hello ,saya akan memberi tau bagaimana cara membuat effect loading warna warni pada blog, ide ini saya buat dan saya kembangkan karna saya liat ada berbagai blog yang menggunakan loading seperti ini,makanya saya membuat tutorial ini,agar teman-teman semua tau cara mempercantik blog sendiri,

Cara Membuat Effect Loading Warna Warni Pada Blog :
1. Buka Blog Lalu Klick Template dan Klick Edit HTML
2. Copy Code di bawah ini dan Paste Kan Sebelum Code ]]></b:skin> (Bisa Ctr+F untuk mencari code)

/* Page Loader OTAK KAMI*/
.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{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="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::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:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::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}} 

3. Copy Code Dibawah ini dan paste kan Di atas Code </body>

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

4. Terakhir Copy Code Dibawah ini dan paste kan Di atas Code </header> Dan anda bisa letakan code ini di mana saja ,tergantu selera anda menarok code ini,, misalkan di footer,di content, atau d mana anda suka lah :)

<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'/> 

5. Simpan/Save Deh ,,

 Gampangkan,  Mantapkan hasilnya gx? iya dong ,,
jangan lupa like Fanspage OTAK KAMI

Baca Juga

1. Cara Memasang DMCA Pada Blog Untuk Melindungi Konten Blog
2. Cara Membuat Dan Mengetahui Statistik Pengunjung Di Website ,WordPress Dan Blogger
3. Cara Membuat Halaman Back Link / Link Partner Pada Blog Agar Menarik 
4. Cara Membuat Label/Category Pada Blog Lebih Menarik