Preloader blog
Apakah anda pernah melihat tampilan loading pada sebuah halaman web sebelum menampilkan isi kontennya? Nah seperti itulah penampang preloader blog. Preloader adalah sebuah tampilan yang memberikan informasi sumberdaya blog yang sedang dimuat saat itu juga.
Fungsi preloader blog
Preloader / loading memiliki berbagai fungsi salah satunya yang telah disebutkan pada poin pertama yaitu memberikan informasi sumberdaya yang sedang dimuat, memperindah tampilan blog agar pengunjung tidak bosan, membuat web / blog terlihat lebih profesional, membantu menyamarkan proses load page (sumberdaya) website, meningkatkan kenyamanan pengunjung dan masih banyak lagi.
Dampak pemasangan preloader blog
Selain memiliki fungsi yang banyak, preloader juga memiliki dampak yang tergolong tidak bagus untuk blog. Dampak yang ditimbulkan dari pemasangan preloader / loading pada blog akan menambah beratnya proses load page atau pemuatan sumberdaya hal ini dikarenakan penambahan kode dan animasi bergerak pada blog. Namun dampak ini seimbang dengan fungsi yang diberikan pada poin diatas.
Cara membuat preloading pada blog
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML Cari kode </head>
- lalu tambahkan kode CSS dibawah ini tepat diatas kode </head>
<style>
#faroloading{overflow:hidden;
background:#fff;left:0;
right:0;
top:0;
bottom:0;
position:fixed;
z-index:9999;
}
.spinner{
position:absolute;
top:50%;
left:49.5%;
z-index:1;
height:20px;
width:20px;
transform:translate(-50%,-50%);
}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
- Selanjutnya cari kode <body>
- lalu tambahkan kode HTML dibawah ini tepat dibawah kode <body>
<div id='faroloading'>
<div class='spinner'>
<span class='ball-1'/>
<span class='ball-2'/>
<span class='ball-3'/>
<span class='ball-4'/>
<span class='ball-5'/>
<span class='ball-6'/>
<span class='ball-7'/>
<span class='ball-8'/>
</div>
</div>
- Selanjutnya cari kode </body>
- lalu tambahkan kode HTML dibawah ini tepat diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
// faroloading
$(window).load(function(){$(".spinner").fadeOut(),$("#faroloading").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
- Selesai, lalu simpan template
Request tutorial lain?silahkan masuk ke halaman Tanggapan
Demikianlah mengenai Cara Membuat Preloader Pada Blog VERSI 2 semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.