Wednesday, November 4, 2015

Page Preloading

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

Categories: ,

Related Posts:

  • Cara Mengatasi Troubleshooting Pada Hardware Komputer Assalamualaikum Wr.Wb Disini saya akan menjelaskan sedikit tentang troubleshooting yang terjadi pada hardware komputer Troubleshooting adalah adanya suatu masalah atau adanya ketidak normalan pada komputer kita . Masal… Read More
  • Cara Membuat Blog  Tutorial Buat Gmail - Setelah sebelumnya saya share tentang cara membuat akun blogger sekarang kita siap untuk membuat blognya.Silahkan buka Blogger Masukkan username dan password yang telah kita bu… Read More
  • Cara Install Windows 10 Wahai Sobatt...Kali ini Swallors akan ngasih tau cara Menginstall Win 10 Windows 10 Update Tool yang Tepat Meskipun alat update Windows 10 sangat lurus ke depan Anda memerlukan versi yang tepat untuk hardware Anda. Lan… Read More
  • Page Preloading 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… Read More
  • Cara Membuat Installer Windows Menggunakan Flashdisk Assalamualaikum Wr.Wb Disini saya akan menjelaskan cara membuat installer Windows menggunakan flashdisk Untuk cara membuat installer Windows menggunakan flashdisk kita bisa menggunakan rufus yang berfungsi untuk merubah fi… Read More

0 komentar:

Post a Comment

luvne.com resepkuekeringku.com desainrumahnya.com yayasanbabysitterku.com

Copyright © 2025 Swallow Productions | Powered by Swallow Productions

Design by Muhamad Ikbal Septiana | Blogger Theme by Swallow      Up ↑