Cara Pasang Animasi Preloader di Blogger - Sudah lama tidak posting artikel karena kesibukan saya yang beberapa hari ini fokus mengurus blog gaming. Oke langsung saja. Saya akan membagikan tutorial memasang preloader di Blogger. Untuk beberapa template yang berat, butuh waktu lama agar tampilan web bisa utuh. Terkadang, dalam prosesnya menampilkan tampilan blog yang berantakan. Untuk itulah gunanya Preloader, yakni menutupi tampilan awal blog yang acak-acakan. Jika tampilan blog sudah termuat seluruhnya, barulah Preloader berhenti.
Dan juga tag jQuery berikut.
Jika blog kamu sudah memasang kode jQuery, lewati saja tahap ini.
2. Cari tag <body> lalu letakkan kode berikut ini tepat dibawah tag <body>.
3. Dan yang terakhir, agar animasi Preloader hilang setelah halaman blog termuat penuh (seluruhnya, cari tag </body> lalu letakkan kode berikut ini tepat diatas tag </body>.
4. Selesai. Untuk Demo bisa klik tombol dibawah ini.
Demo
 |
| Tampilan Preloader |
Cara Pasang Animasi Preloader di Blogger
1. Pertama, masuk ke Dashboard blogger > Template > Edit HTML. Cari tag </head> dan letakkan kode berikut ini tepat diatas tag </head>.
<style type='text/css'>
/* Preloader */
#preloader{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>Dan juga tag jQuery berikut.
Jika blog kamu sudah memasang kode jQuery, lewati saja tahap ini.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>2. Cari tag <body> lalu letakkan kode berikut ini tepat dibawah tag <body>.
<div id='preloader'>
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>3. Dan yang terakhir, agar animasi Preloader hilang setelah halaman blog termuat penuh (seluruhnya, cari tag </body> lalu letakkan kode berikut ini tepat diatas tag </body>.
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>4. Selesai. Untuk Demo bisa klik tombol dibawah ini.
Demo