Oke Sobat pada kesempatan ini 9template9.blogspot.com akan membagikan
cara membuat animasi Loading page sederhana di blogspot Untuk membuat
efek Keren page loading di blog ini kita, jadi jangan takut kalok page
loadi memberatkan blog mu . Dengang meambahkan efek keren loading
seperti. dapa mempercantik tampila blog anda pengunjungan yang hampir ke
blog kamu
Cara membuat Loading blog sederhana
- Login Blogger
- klik menu Template => Edit HTML
- Cari Kode ]]</B:Skin>
- COPY KODE CSS Dibawah ini, lalu paste di atas kode ]]</B:Skin>
- Demo
-
/* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR9eqwwPxvFRdgDPqdI0_Kk4VXkK5lztBV27n-6cYgY-yxBwl0jtdUWae_atRTR7iTWsaua8LQgB7-0UHuK5DUaBQnH5s48aXxSHqFDVBAq4uOyOuP9ahBovVazjoMNWEPAJyzTdG61VgR/s1600/kurumi.gif)
no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #222; /* warna background circle loader */
}
.ip-header .ip-loader svg path.ip-loader-circle {
-webkit-transition: stroke-dashoffset 0.2s;
transition: stroke-dashoffset 0.2s;
stroke: #DB2209; /* Warna garis circle saat loading */
}
- Copy-paste juga semua CSS dibawah ini setelah css
tema tadi.
-
/* Pre-Loader main */
.ip-loader {
position: absolute;
left: 0;
width: 100%;
opacity: 0;
cursor: default;
pointer-events: none;
}
.ip-loader {
bottom: 20%;
}
.ip-header .ip-inner {
display: block;
margin: 0 auto;
}
.ip-header .ip-loader svg path {
fill: none;
stroke-width: 6;
}
/* Animasi */
.loading .ip-loader {
opacity: 1;
-webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both;
}
.loading .ip-loader {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); }
}
@keyframes animInitialHeader {
from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform:
translate3d(0,800px,0); }
}
.loaded .ip-loader {
opacity: 1;
}
.loaded .ip-loader {
-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
}
}
@keyframes animLoadedLoader {
to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}
/* Animasi header ketika loading selesai */
.loaded .ip-header {
-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}
@-webkit-keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); }
}
@keyframes animLoadedHeader {
to { -webkit-transform: translate3d(0,-100%,0); transform:
translate3d(0,-100%,0); }
}
.layout-switch .ip-header {
position: absolute;
}
/* End Preloader */
- Selanjutnya, Copy-paste semua kode HTML dibawah ini
tepat dibawah <body> atau
<body class ...>
<div class='ip-container' id='ip-container'>
<div class='ip-header'>
<div class='ip-loader'>
<svg class='ip-inner' height='60px' viewBox='0 0 80 80' width='60px'>
<path class='ip-loader-circlebg' d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71
S10,57.351,10,40.5S23.649,10,40.5,10z'/>
<path class='ip-loader-circle'
d='M40,10C57.351,10,71,23.649,71,40.5S57.351,71,40.5,71
S10,57.351,10,40.5S23.649,10,40.5,10z'
id='ip-loader-circle'/></svg></div></div></div>
- Kemudian letakan kode Js dibawah ini tepat diatas
kode </head>
<script type="text/javascript"
src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>
- dan letakan ketiga Js dibawah ini tepat diatas
kode </body>
<script type="text/javascript"
src="https://googledrive.com/host/0B6G3XEDWZaMaUWZGRkJNdGg2bWM"></script>
<script type="text/javascript"
src="https://googledrive.com/host/0B6G3XEDWZaMaOFRtR2kzckx6bkE"></script>
<script type="text/javascript"
src="https://googledrive.com/host/0B6G3XEDWZaMaRy1Qa1RiTDl6T0E"></script>
- Simpan template dan buka halaman blog anda dan lihat hasilnya