Home / Tips Blogger / Tutorial Membuat Efek Loading Ala Arlina Design

Tutorial Membuat Efek Loading Ala Arlina Design

Tutorial Membuat Efek Loading Ala Arlina Design 1
Hai sobat blogger! kali ini admin akan berbagi tips lagi. cukup sobat semua semua kerap melihat blog milik  Arlina Design. ya benar banget, pasti sobat semua semua ingin mengunakan-nya di blog sobat semua, namun tak tau caranya.
Ayo di baca sampai selesai supaya berhasil.

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

1. Kamu Buka Blogger>Pilih Tema> Lalu Edit Tema> Cari kode ]]></b:skin> letakan kode 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 kode 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 kode </header> letakan di atasnya juga anda>

 <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 admin rasa sobat semua sudah paham. dan dapat menerapkanya secara langsung.

Baca :  Rahasia Meta Tag Seo Page One

About Erzed