Hi Sobat, saya akan membagikan tutorial tentang cara membuat
efek halaman page preloader menggunakan animasi CSS dan SVGs untuk diterapkan
pada blogger. Trik semacam ini dapat menjadi cara kreatif untuk pengunjung yang
bosan nunggu loading, tetapi tentunya juga ga akan membebani.Contohnya pada
blog saya sendiri djogzs.com yang
saya gunakan saat ini.
Pre Loader ini menggunakan CSS3 pada
animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG
animasi Loader,serta javascript agar dapat menentukan timing preloader saat
proses loading data/progress yang sudah selesai upada suatu halaman dan menutup
preloadernya kembali.
Singkat mengenai SVG : SVG adalah singkatan dari Scalable Vector Graphics dan
merupakan format file baru untuk menampilkan grafik dalam pengembangan web yang
berbasis XML. masih agak sulit untuk dipahami, tetapi untuk kedepanya
dipastikan lebih kompleks untuk membuat object / animasi daripada CSS3.
Sebelum menggunakan trik preloader, saya ingatkan dahulu untuk membackup
template anda agar tidak terjadi sesuatu yang tidak diinginkan.
langkah pertama adalah login ke account blogger anda => Template => Edit
HTML , lalu pilih 1 tema dari 3 preloader yang saya sediakan. pilih salah satu
dan copy paste diatas code :
]]></b:skin>.
1. Glasshour
/* HourGlass THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #505050
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaepaAfSx2udbGUqAGvvtfy6Dc7YVAg_mXLYa0qaHx1DWSF12B4IaOMA2aFEce8W-hiVAWpvrVuQd3rm6RZ7ozzEsoq3_HAPiTph7_4bRAgNP3WuqRQqukgGxXn0qsk6xh-ky0IhoBWrus/s1600/hourglass.gif)
no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* 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: #13BAFA; /* Warna garis circle saat loading */
}
2. Kurumi
/* 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/AVvXsEgD2Ho06qc-4MapoJWTD3yq1e2pf96MSkBYogxYljVsC_56b1m9JBNN2F-ZOAXaiNAkYQRmEzu77gombDig5hlD4nQZcu4VYtZ_J3cY97nlGTxb_hyphenhyphenToZgA6fa_IFBb7R18u4LgnrhhkaoN/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 */
}
2. Nisekoi
/* NISEKOI THEME */
.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/AVvXsEgOJ1IagDOsnfZ1JReJE9ZQoNJGD9boIGMWO8QJ1hEZI2keoUyGA6v6IP_Vi6O-3LiW00wya4LJpr5sGpiMyoQhMjSanAxVkJeV0PA8o69Kx-lz9W8FvewTMY_uuPGivgdXUtJThHqj8rOk/s1600/Nisekoi.gif)
no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: #fff; /* 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: #FFFF2A; /* 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"/>
Kemudian letakan kode 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.
Selamat mencoba dan berkreasi, terima kasih :)
