-->

Menambahkan Effect PreLoader Pada Blog

Generating Link...


Hai, hari ini adalah edisi yang ke 35 PenggemarKoding menyapa kalian dengan sapaan yang hangat yang dibungkus dalam ratusan kata yang penuh dengan ilmu yang tentunya masih seputar Blogging. Pernah gak sih kamu memikirkan sesuatu effect baru ada dalam situsmu? Atau punya niat menambahkan PreLoader di Blog Kamu?.

Namun sebelum kita membahas seputar coding dan cara penerapannya, mari kita sejenak terlebih dahulu mengenal apa itu PreLoader. Oleh karena itu nih Mimin bakal jelasin satu persatu fari pengertian, kelebihan, kekurangan, serta cara penerapannya di blog kesayanganmu

A. Pengertian
Apa itu PreLoader menurut Mimin? PreLoader tentu dalam bahasa Indonesia berarti Pra memuat, kata Pra berarti sebelum yang artinya sebelum memuat. Apa yang dijadiin Pra Memuat? PreLoader bakal memberikan effect loading sesuai waktu loading blog kita selesai. Pernah cek dan bermain platform Medium? Disana kita akan melihat sebuah loader progress bar yang akan memuat postingan selanjutnya, atau pernah melihat beberapa situs yang menggunakan loading image dengan gradient bergerak? Itulah yang namanya PreLoader

Tugasnya sangat sederhana, tentu Preloader akan tampil hingga menunggu tampilan situs kamu benar benar selesai memuat seluruh konten, maka effect preloader yang tampil di blog kamu juga akan berakhir jika situs kamu telah selesai memuat seluruh konten yang berisi dalam situs kamu tersebut.

B. Kelebihan
Salah satu kelebihan dari adanya Preloader ini dalam blog kamu tentu akan memberi kesan tertentu dalam segi UI / UX maupun dalam segi penyelesaian pemuatan. Inget! Pilihan tampilan preloader ada di tangan kamu, dan pilih tampilan preloader yang memukau agar pengunjung blog kamu tidak suntuk melihat blog kamu yang menggunakan preloader.

C. Kekurangan
Nah bahas soal kelebihan, tentu preloader memiliki kekurangan, dalam satu kasus, blog seseorang akan terkesan menampilkan pre loader sangat lama bahkan mencapai 10 detik, padahal sebelum menggunakan preloader, blognya memuat penuh konten hanya 2 hingga 5 detik saja. Atau bahkan preloader tersebut tidak ingin hilang dari blog kamu padahal blog kamu sudah selesai memut seluruh konten yang ada dalam situs kesayangan kam tersebut. But, kekurangan tersebut bisa saja tidak akan timbul di blog kamu, doakan saja yang terbaik :).

D. Cara Penerapan
Kita akan membagi cara penerapan menjadi tiga tahap yah, yaitu tahap style, tahap div, dan tentunya tahap script. Kita akan bahas satu persatu yah.

a. Bagian Style
Ini adalah code tahap awal, yaitu untuk tampilan preloader tersebut atau sebuah style yang akan disentuhkan dengan tampilan preloader itu sendiri. silahkan tempelkan kode berikut ini diatas </head> atau sebelum </head> yah.

<style type='text/css'>
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}
.preloader .loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font: 14px arial;
}
</style>


b. Bagian DIV
Jika yang diatas tersebut adalah kode style, maka dibawah ini adalah code divnya, silahkan tempelkan kode berikut ini di blog kamu dibawah atau sebelum/atas . silahkan ganti link tersebut dengan link gif leoader yang kamu inginkan yah.

<div class='preloader'>
  <div class='loading'>
    <img src='Ganti link ini dengan link gif loader yang kamu inginkan' width='500'/>
  </div>
</div>

c. Bagian Script
Ini adalah langkah terakhir. Silahkan tempelkan blog ini tepat diatas <head> atau sebelum <head> yah. Ini adalah kode pemanggil / scriptnya yah.

<script src='http://code.jquery.com/jquery-2.2.1.min.js'/>
<script>
$(document).ready(function(){
$(&quot;.preloader&quot;).fadeOut();
})
</script>

Nah itulah cara mudahnya membuat preloader di blog kesayangan kamu. Gak susah kok masang preloader di blog kamu. Semoga bermanfaat dan terima kasih telah membaca, jangan lupa tinggalkan jejak  kamu di kolom komentar yah biar makin banyak ilmu ketika saling berbagi ilmu.