Cara Memasang Page Preloading Di Blog
Oke ketemu lagi dengan ane Muhamad Ikbal Septiana alias (Ibenk)
Kali ini ane mau berbagi tutorial cara memasang page preloading
Dibawah contoh dari page preloading :D
ok tanpa basa basi langsung aja ke intinya :D
Note : Untuk Mengcopy Gunakan Ctrl+C
Kali ini ane mau berbagi tutorial cara memasang page preloading
Dibawah contoh dari page preloading :D
ok tanpa basa basi langsung aja ke intinya :D
- Login ke account blogger anda => Template => Edit HTML , cari code : ]]></b:skin>
- Lalu pastekan code dibawah : .ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #23B0E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzVjwbJVNuXkPj1WyZf-InaU80Cr7pVYGdydGYICUpTVzyvRBsKC5uTzUm-hRGNSNOwYjlnhjsTSG6y48_KOrxAc6JnEhA3eWsg8BPZwnPooxdfjnHBWRgCulNnuW1IQYgio2_I0u8RHQ/s128-no/Loading1.gif) no-repeat center center; } - setelah itu copy juga code ini tepat dibawah code yang nomer 2 :.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;
}
.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); }
}
.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 src='https://sites.google.com/site/ikbalandro/script-js/pagepreloading.js' type='text/javascript'/>
- dan letakan ketiga Js dibawah ini tepat diatas code </body> :<script src='https://sites.google.com/site/ikbalandro/script-js/pagepreloading2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ikbalandro/script-js/pagepreloading3.js' type='text/javascript'/>
<script src='https://sites.google.com/site/ikbalandro/script-js/pagepreloading4.js' type='text/javascript'/>
Note : Untuk Mengcopy Gunakan Ctrl+C
