June 15, 2016

Cara Membuat Halaman Pre Loading Pada Blog

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

 /* NISEKOI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #23B0E8 url(http://4.bp.blogspot.com/-keYxDGcv-3g/VE3_Wp__oFI/AAAAAAAAH_4/-94XWoGIby8/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

 /* KURUMI THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #000 url(http://3.bp.blogspot.com/-682R5tf_wjo/VE4L6PigwSI/AAAAAAAAIAI/-_dKBUtsA2k/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

Jujur gua lebih suka menghargai proses nya dibanding hasil akhirnya. Tapi, satu hal yang pasti sebuah hasil gak akan pernah menghianati prosesnya :D

8 komentar

izin praktek dulu sob.. makasih banget sebelumny

Thanks atas infonya, tapi menurut saya sih itu terlalu sulit, adacara yg lebih mudah lagi gak ?

itu udah termasuk gampang kok gan :D
agan mungkin liat kode nya kebanyakan jadi udah bilang susah wkwk

Itu cara buat tempat naruh kode kode html gimana?

Berkomentarlah dengan Menggunakan Bahasa yang Relevan dan Sopan
EmoticonEmoticon