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/AVvXsEgFmpmgVLMBlph3P0MRKk_5abhvsNltQjwxR-e8NVmTdhYQwp82ZcRzf3sP-3ObIjlQl6dWsNdhlYFR5XSHrosY5BvGCwvpMQq66hEdriC1iWSDSSsVXTSARfYllvllOAlehEhcBuxGSuU/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
No comments:
Post a Comment