Cara Menciptakan Efek Loading Ala Arlina Design

Posted on
Hai sahabat blogger! kali ini aku akan mengembangkan tips lagi. mungkin kalian semua sering melihat blog milik  Arlina Design. ya benar banget, niscaya kalian semua ingin mengunakan-nya di blog kalian, tapi tidak tau caranya.
Ayo di simak hingga final semoga berhasil.

Cara ini sudah aku tes sendiri di blog saya. yang mengunakan template milik Arlina Design.

1. Kamu Buka Blogger>Pilih Tema> Lalu Edit Tema> Cari aba-aba ]]></b:skin> letakan aba-aba berikut di atasnya

 </* Page Loader */ .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}}>

2. Cari Kode </body> letakkan aba-aba di bawah ini di atas nya

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

3. Cari aba-aba </header> letakan di atasnya juga sobat>

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

4 Simpan Templates dan lihat hasilnya.

Sampai di sini aku rasa kalian sudah paham. dan dapat menerapkanya secara langsung.

Gambar Gravatar
Waduh gk tau mau ngomong apa bro!