Cara Memasang Page Preloading di Blogspot

Hi teman-teman, kali ini penulis akan membagikan tutorial Blogger tentang cara membuat page preloader menggunakan animasi CSS dan SVGs(*) untuk blogger. Hal semacam ini dapat menjadi cara kreatif dan inovatif untuk pengunjung yang bosan nunggu loading, tetapi tentunya juga tidak akan membebani menjadi LOLA (Loading Lama) di blogger kalian.

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

Penasaran seperti apa jadinya? Berikut tutorialnya:

1. Login ke Blogger anda;

2. Jika sukses Login, lalu klik tombol “Tema”;

3. Pilih tombol “Edit HTML“;

4. Lalu, pilih 1 dari 3 tema preloader yang penulis sediakan dan copy paste diatas kode ]]></b:skin> :

• Glasshour

/* HourGlass THEME */
 .ip-header {
 position: fixed;
 top: 0;
 z-index: 100;
 min-height: 480px;
 width: 100%;
 height: 100%;
 background: #505050 url(http://3.bp.blogspot.com/-mQ_lrcu74q8/VE4Q3CXlgtI/AAAAAAAAIAY/ahW6ISKyJMY/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 */
 }

• 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 */
 }

• 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 */
 }

5. Setelah itu, copy paste semua CSS di bawah ini setelah kode tema yang sudah kalian pilih salah satu dari ke 3 tema preloader tadi (tepatnya di bawah kode);

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

6. Lalu, 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>

7. Setelah itu, letakkan kode Js dibawah ini tepat diatas kode </head>

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

8. Terakhir, letakkan seluruh kode ketiga Js 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 Blogger kamu kembali. Lihat hasilnya, dan selamat mencoba.