Membuat Efek Loading Pada Blog

Membuat Efek Loading Pada Blog - Masih dalam membahas tampilan blog yang memang perlu untuk diperhatikan agar pengunjung atau pembaca Blog lebih betah berlama lama di dalamnya . Dan kali ini kita akan membahas tentang "bagaimana sih menambah Efek Loading pada Blog ?" yang mungkin akan menambah kesan Keren pada blog nantinya .

Tapi sebelum kita masuk ke inti dari pembahasan kita yakni menambah Efek Loading pada Blog , kita kenali dulu apa saja aspek aspek yang terkandung di dalamnya ,hoho .

Sebelum kita memasang element baru pada Blog maka kita harus mengenali beberapa hal diantaranya

Keuntungan

Apa sih keuntungan dari Efek loading ini ?
Karena ini hanyalah efek , maka keuntungannya adalah menambah keren interface Blog anda , dan selain itu mungkin akan membuat para pengunjung anda penasaran dan mencari artikel terkait efek loading .

Fungsi

Karena ini hanyalah efek untuk menggantikan Blank page blog , menurut saya fungsinya ya hanya untuk memperkeren atau mempercantik iterface blog . Selain itu tidak ada ( mungkin ) karena efek ini tidak serta merta menutupi Loading halaman blog yang tengah dibuka . Efek ini akan hilang ketika default loading browser mulai bekerja .

Kerugian

Mungkin memasang efek loading pada blog tidak ada ruginya dan tidak merugikan . Untuk itu mari langsung saja kita mulai untuk memasangnya .

1. Masuk ke menu template Blogger
2. Edit HTML

jQuery

Letakkan script dibawah ini tepat diatas kode </head> dalam template .

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Jika template anda sudah terpasang jQuery ,versi berapa saja maka tinggalkan Script diatas .

Css

Letakkan Css dibawah ini tepat diatas kode ]]></b:skin>

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM9VZHqcq5KocYLcvQSiq55a2uk90uzozSoPZWfJhjy8Gn6apVu-D_Kp1c8eb67iHQQIgYBzAYg15t2aR6zOGX5p5fnn1XW2CdbfMqzX-TUamySCcEUPWvH2NHXI1lS-VEb9Kk6lYq2qQ/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Anda masih bisa mengedit Css diatas untuk disesuaikan dengan interface template anda .

JavaScript

Letakkan JavaScript dibawah ini diatas tag </body>
Hist jangan bilang gak ada , itu adanya di bagian paling bawah Edit HTML template ,cari aja disitu pasti ada .

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Langkah terakhir simpan template .

Info :

Gak usah nanya apa ini akan memperberat loading blog karena Efek ini yang akan menutupi loading blog anda yang (mungkin) berat . Hehe piss .

Udah disimpen templatenya ? Langsung klik View blog buat lihat seperti apa hasilnya .

Gak cocok sama Efek loadingnya dan ingin mengganti bentuk animasinya ? Ganti saja kode diabah ini pada Css diatas .

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM9VZHqcq5KocYLcvQSiq55a2uk90uzozSoPZWfJhjy8Gn6apVu-D_Kp1c8eb67iHQQIgYBzAYg15t2aR6zOGX5p5fnn1XW2CdbfMqzX-TUamySCcEUPWvH2NHXI1lS-VEb9Kk6lYq2qQ/s1600/loadinfo.net+%284%29.gif)

Gambar bisa dibuat sendiri atau tinggal cari di Google .

Semoga bermanfaat . Ada pertanyaan ?