Cara Memasang Efek Loading Blog Seperti Blog Arlina Design

Pekanan.com- Pada kali ini saya akab coba untuk memberkan tutorial cara untuk memasang efek laoding pada header blog seperti blog arlina design, untuk anda yang sering berkunjug ke blog arlina design pasti sudah akrab denga efek loading yang cukup unik saat dilihat.

Efek loading pada blog ini hanya berfungsi di bagian header saja, sehingga tidak mengganggu halam blog anda, dengan efek loading di blog ini, akan lebih mempercantik tampilan blog anda saat direload.

Bagi anda yang tertarik dengan efek loading blog ini, silahkan ikuti tutorial dibawah ini untuk memasangnya.

Warning message

Silahkan backup terlebih dahulu template anda, berjaga-jaga terjadi kesalahan.

Cara Memasang Efek Loading Blog Seperti Blog Arlina Design

1. Pertama, silahkan masuk ke edit HTML blog anda
2. silahkna pada kode CSS dibawah ini diatas kode </style> atau ]]></b:skin>


/* Lostcips 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}}

3. Kemudain letakan Javascript dibawah ini diatas kode </body>


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

4. Setelah itu, letakan kode HTML dibawah ini dimana anda ingin melerakan efek loading, contoh sperti arlina design, maka anda letakan kode HTML di pasang pada bagian menu header, lalu pastekan code dibawah ini di atas <div id='outer-wrapper'> untuk outer wrapper pada bagian bawahnya, jika </header> pada bagian atasnya.


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

Demikian Cara Memasang Efek Loading Blog Seperti Blog Arlina Design, semoga bermanfaa. happy blogging