Cara Membuat Loading Diblog / Page Preloading

Welcome Vroh, kali ini ane mau Share Tutorial Blogger "Cara Membuat Loading Diblog / Page Preloading, sebenarnya Tutorial ini Original dari Blog Johanes tapi ane sedikit modifikasi biar lebih Masa Kini gitu, untuk Tutorial dari Djogzs bisa KLIK DISINI.
Berikut Tampilan Page Preloadingnya :

Sedikit Penjelasan :
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.

Perlengkapan :
- Google Chrome [ kalau pake Mozilla Firefox kayanya ga akan work ini loader mungkin kalo pake versi terbaru bisa :D , tapi saya sarankan gunakan Google Chrome saja ]
- Brain
Tutorial :
1. Login blogger > lalu masuk ke menu Template > Edit Template, lalu cari kode ]]></b:skin> untuk mempermudah pencarian gunakan CTRL + F atau F3 pada browser Google Chrome anda
2. Copy kode dibawah ini, lalu letakkan diatas kode ]]></b:skin> tadi

/* NOZNICKNAMEZ THEME */
.ip-header {
position: fixed;
top: 0;
z-index: 100;
min-height: 480px;
width: 100%;
height: 100%;
background: #121111 url(http://i.imgur.com/njaSrHK.png) no-repeat center center;
/* warna background dan gambar loader */
z-index: 999999;
}
.ip-header .ip-loader svg path.ip-loader-circlebg {
stroke: rgba(18, 17, 17, 0.82); /* 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: #3a64b8; /* Warna garis circle saat loading */
}
/* 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 */

3. Selanjutnya, copy kode dibawah ini lalu pastekan tepat di bawah kode <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>

4. Kemudian, letakan kode dibawah ini tepat diatas kode </head>

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

dan letakan ketiga 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>

5. Langkah terakhir, klik simpan lalu lihat hasilnya
Mudah bukan? hasilnya pun memuaskan, kalo ada yang FAIL atau Membingungkan bisa komentar nanti ane balas
Original Tutorial By : Djogzs
Re-design : NozNicknamez
Terima Kasih

Cara Membuat Loading Diblog / Page Preloading

Artikel Menarik Lainnya

8 komentar