3 Macam dan Cara Mempercantik Blog Dengan Preloader

Hallo readers~ Kali ini saya akan membahas salah satu Elemen yang dapat di gunakan pada blog dan juga dapat menarik perhatian pengunjung. Selain dapat menarik perhatian pengunjung, widget ini juga dapat mempercantik blog Anda. Apasih itu? Yup! Tepat sekali, yaitu Preloader. Apa itu Preloader dan Apa Fungsi Preloader? Mari kita simak ke bawah.

cara membuat preloader, kumpulan gambar preloader keren

Apa Itu Preloader dan Apa Fungsi Preloader?

Preloader adalah widget yang dapat menampilkan gambar loading ketika sebuat blog atau website di akses. Lalu apa fungsi dari preloader? Preloader berfungsi efek loading sebelum sebuah blog maupun website 100% dibuka secara menyeluruh. Selain juga dapat memberikan jeda waktu saat membuka blog maupun website dan dapat meningkatkan daya tari pengunjung.

Apa Keuntungan Memasang Preloader Pada Blog?

Dengan memasang Preloader, kita dapat memasang animasi atau efek loading secara lebih sederhana. Selain itu dengan preloader juga dapat membuat blog kita tidak terkesan membosankan saat pengunjung menunggu loading dari blog kita.

Biasanya preloader menggunakan gambar yang bergerak, yaitu gambar yang berformat .gif yang dapat membuat gambar itu bergerak. Banyak sekali animasi yang dapat kita gunakan untuk preloader ini, antara lain 3D, Rectangular, Circular dan Horizontal.

Untuk membuat Animasi lebih menarik tentunya Anda harus dapat menguasai pembuatan file gambar yang berformat .gif. Namun, jika Anda tidak dapat membuatnya Anda dapat mencarinya di Google. Saya menyarankan untuk gambar preloader gunakanlah gambar yang berformat .gif. Namun, jika Anda ingin lebih bagus lagi, Anda dapat menggunakan Flash atau HTML5 dan CSS3.

Bagaimana Cara Membuat Preloader Pada Blog?

Untuk membuat efek animasi page loading pada blog, dapat Anda lakukan dengan mudah. Disini saya akan membagikan 3 Macam Tipe Preloader yang mungkin saja salah satunya dapat menarik perhatian Anda. Untuk itu silahkan ikuti tutorial yang akan saya berikan berikut.
Berikut 3 macam Preloader untuk blog, yaitu Preloader Sederhana, Preloader Flat dan Preloader Anime.

1. Preloader Sederhana

Berikut cara memasang Preloader Sederhana untuk blog
*. Login ke blogger
*. Pergi ke Dashboar
*. Klik Template > Edit HTML
*. Cari kode <body> lalu copy kode dibawah dan letakan tepat dibawah kode <body> atau bisa juga tepat diatas penutupnya </body> untuk lebih cepat mencarinya tekan CTRL + F

<div id='my-preloader'></div>

*. Setelah kode HTML di atas di tempelkan, silahkan copy paste juga kode Style CSS dibawah ini, kedalam Style CSS template Anda


#my-preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background:#FFFFFF url('Preloader_1.gif') no-repeat scroll center;
z-index: 9999;
}
 
//admin layout
body#layout #my-preloader {display: none !important;}

*. Klik simpan

Catattan: ganti tulisan "Preloader_1" dengan url gambar Anda

Untuk langkah berikutnya adalah menambahkan kode JavaScript. Ini agar loading ketika blog atau website sudah selesai me-load semua konten. Berikut langkah-langkahnya.

*. Login ke blogger
*. Pergi ke Dashboard
*. Klik Template > Edit HTML
*. Lalu copy kode dibawah dan tempelkan tepat di atas penutup head template </head>


<script>
$(document).ready(function(){
setTimeout(function(){
   $('#my-preloader').css('display','none');
}, 5000);
});
</script>

*. Klik simpan

Catattan: angka 5000 pada kode itu bisa diganti sesuka Anda. 5000 = 5 detik sesudah halaman selesai.

2. Preloader Flat

Berikut langkah-langkah memasang preloader flat.
*. Login ke blogger
*. Pergi ke Dashboard
*. Klik Template > Edit HTML
*. Lalu cari kode </body> dan copy kode dibawah ini dan letakan tepat di atas kode </body> untuk lebih cepat mencarinya tekan CTRL + F

<style type='text/css'>
#loading{
position: fixed!important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwodEcIZo-JWcvTz7BihXMcuhoIm0cGgZz9OFlTNSfCGX-M_jr-X0wa-QxiHgilsg2Z2uK7qikkofsK9R4hyphenhyphenjJnnBN8tBd6VxJt8xLF_kB7-VOp6Nr-fwyNP-7fAiGmkI693SJbxG_qNw/s200/load6.gif') no-repeat 50% 30%;     
display: none;
font: 0/0 a;
text-shadow: none;
padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="loading">Loading...</div>');
$(window).on("beforeunload", function() {
// ... Show the Animation `.fadeIn()`
$('#loading').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

*. Klik simpan

Catattan: kode berwana merah silahkan Anda ganti dengan URL gambar Anda sendiri.

3. Preloader Anime

Preloader yang ke #3 ini saya dapat dari situs djogzs(dot)com. Terimakasih sebelumnya kepada djogzs.
Pre Loader yang satu ini menggunakan CSS3 pada animasi transisi untuk membuka dan menutup halamanya dan menggunakan SVG animasi Loader. Dan juga javascript agar dapat menentukan waktu preloader saat proses loading dan menutup preloadernya kembali.
Berikut langkah-langkah memasang preloader anime.

*. Login ke blogger
*. Pergi ke Dashboard
*. Klik Template > Edit HTML
*. Pilih salah satu dari ke dua tema dibawah ini
*. Lalu cari kode ]]></b:skin> dan copy kode dibawah, lalu letakan tepat di atas kode ]]></b:skin>

1. 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/AVvXsEg-jDiqbzOOzlBNrALX_NLdFf55HezalmC9a8UYAI8_Gg4P72eTWlXdX3h74EVmeybt9uJXlT59Zg6RwkZBcF1eFXPxmBWtxJ_H2JPtftBDGaBGncXj_wKxkZ-iRYTHXd5GoeDQDHab3VQQ/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/AVvXsEiArfZF0UDbNj7UJkDvsvKj6dnhxoNg8FS1o5zYI7SxYKzMtEbCIK55_BYpYmi_2RNt9PsYs43GjL6IKTpebq5k2qQpuR77mwBHo9ZMOX3Lc_T1Nm1DEau_5dWo6C1ACtFPul1QxZGkAo-j/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 */
}

Catattan: kode yang berwarna merah silahkan diganti dengan URL gambar preloader Anda.

*. Setelah itu copy paste juga CSS dibawah ini setelah CSS Tema di atas

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

*. Lalu cari kode <body> atau <body class ...> dan copy kode HTML dibawah ini, lalu letakan dibawah 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>

*. Setelah itu letakan kode Js dibawah ini di atas kode </head>

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

*. Dan terakhir letakan ketiga kode Js dibawah ini di atas 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>

*. Klik simpan