Cara Membuat Halaman Pre Loading Pada Blog

Aditia Permana

Bekal Kami merupakan sebuah blog pribadi tempat Saya berbagi mengenai tips seputar blogger dan template khusus blogger.

Mudah-mudahan kedepannya blog ini dapat memberikan kontribusi serta informasi bermanfaat bagi Anda semua. Terima kasih.

Discord

Bekal Kami - Cara Membuat Halaman Pre Loading Pada Blog pasti yang satu ini udah pada tahu kan fungsi nya selain mempercantik blog kalian fitur pre loading ini juga sangat responsif kok tujuannya agar link yang kita tuju termuat terlebih dahulu sebelum dibuka. Jadi yang suka dan tertarik ingin mencobanya silahkan disimak tutorial nya dibawah.

Cara Membuat Halaman Pre Loading Pada Blog

1. Masuk Halaman Dashboard - Template - Edit HTML

2. Cari Kode ]]><skin Letakan kode CSS ini diatasnya.

Nisekoi

DEMO

 /* 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/AVvXsEgFADJSh74VwNPtWj9FvhprNeGZWSlYer0T9XbTTS9OUqvkrLvqUnM_byZS11XH9pCqboccGZ_P0c586elQo0ux02ZIgYLrjBDPn_MwU6Gk9ya21xYrt0JjOJ6YKjvmlGbPdbU_jjYQA-Sl/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 */
}

Kurumi

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/AVvXsEhnhS6Smds3ASqlJbzRSooxpJ4414pc_CtuBiWZzmFPBP3wo_g15QVCgGIIJo3wQrZohEXOwn4RtbR4ZX9VKS4maR8s-kDrNL7ciLV7d5Ada9L8NKkWk8Sylx3D73qHVtW2yUY1lbYcNpJk/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 */
}

3. Copy paste CSS ini dibawah CSS Theme 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 */

4. Selanjutnya cari kode <body> lalu simpan CSS ini ditepat dibawah nya

 <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>

5. Kemudian cari kode </head> lalu letak kan kode HTML ini diatas nya

 <script type="text/javascript" src="https://googledrive.com/host/0B6G3XEDWZaMaTUFNbmtWeHpzOTQ"/>

6. Setelah itu letak kan kode HTML 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>

7. Simpan Template lalu lihat hasil nya taraaa~

Gimana mudah bukan caranya? selain mempercantik animasi loading nya juga responsif kok untuk blog jadi gak masalaah dipakai. Kalau masih bingung atau ada yang ingin ditanyakan silahkan bertanya di komentar nanti insyaallah akan saya balas.

Terima Kasih Telah Membaca Cara Membuat Halaman Pre Loading Pada Blog