Sebenarnya tutorial ini sangat lah mudah untuk Anda terapkan sebagai blogger pemula asalkan tutorial yang saya berikan ini Anda pahami dengan baik.
Langsung saja terapkan tutorial ini di blog Anda dengan baik dan benar agar tidak menjadi error atau tidak muncul di blog Anda.
Membuat Efek Loading Seperti Arlina Design
Langkah Pertama :Login ke Blogger > Tema > Edit HTML. Lalu Anda Copy kode di bawah ini di atas kode ]]></b:skin>
/* Bos Design */
.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}}
Langkah kedua :Lalu Anda Copy kode di bawah ini di akhir tag dari kode menu navigasi 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'/>Langkah ketiga :
Langkah terakhir adalah menerapkan kode Javascript di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Lostcips Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>
Selanjutnya Save, efek loading akan muncul di mana Anda menerapkan kode tersebut.Terima kasih telah berkunjung semoga hari Anda menyenangkan. Apabila terjadi error atau tidak munculnya efek tersebut, Anda bisa comment dibawah ini.
EmoticonEmoticon