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.
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
6 Gambar Preloader Keren Untuk Blog
Berikut ini adalah 6 gambar untuk preloader, Silahkan klik kanan pada mouse Anda, lalu klik "Lokasi Tautan" untuk melihat URL dari gambar tersebut.
Demikianlah
3 Macam dan Cara Mempercantik Blog Dengan Preloader. Semoga dapat mempercantik blog Anda.
Thanks to DJogzs.
