Hello sobat IcloudZer bagaimana dengan kabarmu hari ini, apakah selalu dalam kondisi yang baik, mudah mudahan sobat IcloudZer selalu dalam kondisi yang baik dalam situasi apapun, okay lah kali ini saya akan membahas cara membuat Animasi preloader keren pada blog, sebelum ketahap pemasangan scrip kode pada blog anda, saya akan menjelaskan sedikit apa itu Animasi preloader blog
Info: Seperti biasa jika kamu audah pemasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Loading Animasi
Animasi preloader pada blog sebenarnya apabila di terapkan disebuah situs blog maka ketika anda masuk atau mereload situs blog tersebut anda akan melihat tampilan animasi preloader sebelum server memuat data secara keseluruhan
Info: Dengan kata lain sambil anda menunggu situs blog anda memuat data server anda akan disajikan dengan sebuah animasi preloader yang bermacam macam
Animasi preloader juga bisa diterapkan pada bagian artikel gambar, atau juga pada seluruh tampilan situs blog
Tapi kali ini saya akan memberikan cara membuat Animasi preloader keren pada Blog untuk diseluruh tampilan situs blog, dan animasi preloader ini dibuat dengan menggunakan CSS, maka setiap orang yang mengakses situs blog anda mereka akan melihat Animasi preloader tersebut
Dengan memasang Animasi preloader pada situs blog anda juga bisa membuat perlambatan pada server, yang mengakibatkan orang yang mengakses situs blog anda yang mana sebelum diterapkannya Animasi preloader tersebut server atau tampilan blog anda sudah terlihat namun saat pemasangan nya tampilan yang detail yang seharusnya sudah bisa terlihat tapi tertup oleh Tampilan Preloader tersebut, karena pemasangnya pada seluruh tampilan situs blog
Tapi jika anda tertarik dan ingin mencoba pada situs blog anda, saya akan memberikan cara pemasangannya sebentar lagi
Pasang jQuery
Sebelum kita masuk ke pemasangan Animasi preloader di situs blog, periksa apakah situs blog anda telah terpasang sebuah script jQuery di bawah ini jika belum, pasang dulu Script jQuery dan letakkan di atas kode lt;/head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>Pemasangan Loading Animasi
Jika sudah, baiklah kita langsung ke pemasangan nya
- Mulai login ke akun blogger anda
- Pergi ke Template dan pilih edit HTML
- Letakkan kode CSS di bawah ini tepat di atas kode </head>
- Kemudian cari kode <body> dan letakkan script kode di bawah ini tepat di atasnya
- Terakhir letakkan kode berikut tepat di atas kode </body>
<style type='text/css'>
/* Preloader */
#iclodicePreloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.IcloudiceSpinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="icloudiceBall-"]{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)}}
.icloudiceBall-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.icloudiceBall-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.icloudiceBall-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.icloudiceBall-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.icloudiceBall-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.icloudiceBall-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.icloudiceBall-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.icloudiceBall-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){.icloudiceSpinner{left:43%}}
</style><div id='icloudicePreloader'>
<div class='icloudiceSpinner'>
<span class='icloudiceBall-1'></span>
<span class='icloudiceBall-2'></span>
<span class='icloudiceBall-3'></span>
<span class='icloudiceBall-4'></span>
<span class='icloudiceBall-5'></span>
<span class='icloudiceBall-6'></span>
<span class='icloudiceBall-7'></span>
<span class='icloudiceBall-8'></span>
</div>
</div><script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".icloudiceSpinner").fadeOut(),$("#icloudicePreloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>Simpan template dan mulai jalankan situs blog anda,dan jika berhasil tampilannya akan seperti pada contoh demo loading animasi yang admin gunakan saat kamu merefresh tampilan ini