Membuat Efek Loader Warna - Warni - Efek loader yakni sebuah dampak biasanya berupa animasi yang muncul pada ketika blog masih dalam proses mentransfer data atau loading. Secara keseluruhan, fungsi nya hanya untuk mempercantik tampilan blog saja.
Pada kesempatan kali ini Saya akan menyebarkan script yang berkhasiat untuk Membuat Efek Loader Warna - Warni ibarat gambar di atas. Mungkin biasanya dampak loader berwana tersebut sering ditemui di Google.
Efek loader warna - warni tersebut dapat kita buat dengan memakai css dan pemanis j4vascript kemudian nantinya kita simpan di bawah header atau mungkin dimana saja.
Cara Membuat Efek Loader
1. Masuk Tema kemudian Edit HTML
2. Tambahkan isyarat dibawah ini sebelum ]]></b:skin>
/* Blog SiddiqRN 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. Letakkan isyarat dibawah ini sebelum </body>
<script type='text/j4vascript'> //<![CDATA[ // Page Loader $(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)}); //]]> </script>4. Kemudian, letakkan isyarat dibawah ini sempurna dimana Anda ingin meunculkan dampak loading warna - warni nya. Sebagai pola di blog ini Saya menempatkannya dibawah script menubar
<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. Jangan lupa Simpan
Untuk memastikan dampak loadernya berjalan, silahkan Anda coba dengan mengakses blog tersebut.
Mungkin hanya ini yang dapat Saya bagikan ihwal Design Blog, supaya bermanfaat. Silahkan share ke teman - teman Anda dan jangan lupa like Fanspage Kami.