Cara Membuat Preloader untuk Blog
Cara Membuat Preloader untuk Blog.
Apa itu Preloader? Meskipun sebenarnya istilah ini sudah sering digunakan oleh para blogger, tetapi tidak ada salahnya saya jelaskan disini tentang apa yang dimaksud dengan preloader itu. Sebab ada juga orang yang masih belum tahu dengan apa yang dimaksud dengan preloader ini. Buat kamu yang belum tahu apa itu Preloader, sekarang akan saya kasih tahu apa itu yang dimaksud dengan istilah preloader. Preloader adalah sebuah tampilan khusus yang digunakan untuk menghalangi pandangan seorang user ketika sedang mengakses suatu halaman web atau blog. Preloader ini ditambahkan karena umumnya halaman yang belum selesai di download akan terlihat acak-acakan dan tidak beraturan. Oleh karena itu agar tidak mengganggu pandangan orang yang mengakses halaman web/blog milik kita, maka ditambahkanlah preloader tersebut. Dengan kata lain, preloader ini semacam tabir yang digunakan untuk menutupi halaman yang sedang dibuka ketika belum selesai didownload.
Membuat preloader tidaklah sulit. Kita hanya perlu menambahkan beberapa tag HTML ke dalam template blogspot kita, menambahkan beberapa pengaturan CSS dan beberapa fungsi Javascript.
Baiklah tidak usah banyak basa basi, berikut ini kode lengkapnya:
Tag HTML Preloader
Tambahkan tag HTML ini di bawah tag <body>
<div id="preloader">
<div class="preloader">
<img src="{URL_GAMBAR}"/>
</div>
</div>
Pengaturan CSS Preloader
Tambahkan CSS di bawah ini di atas tanda ]]></b:skin>
#preloader{
background-color:#FFF;
position:fixed;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}
.preloader{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%}
.preloader img{
position:relative;
left:0;
right:0;
top:0;
bottom:0;
width:100%;
height:100%;
z-index:9999}
Script Javascript Preloader
Tambahkan script Javascript preloader di bawah ini tepat di atas tag </body>
<script type="text/javascript">//<![CDATA[
(function($) {
$(window).load(function() {
$('#preloader').delay(300).fadeOut("slow");
});
})(window.jQuery);
//]]></script>
Sebelum menyimpan template blogger yang sudah diedit tersebut, coba pastikan apakah template blog yang kita gunakan tersebut sudah menyertakan JQuery atau belum. Jika belum, maka tambahkan kode di bawah ini sebelum tag </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"/>
Setelah semua kode di atas ditambahkan ke dalam template blogger milik kita, lalu simpan tema tersebut dan lihat hasilnya.
Gampang kan bikin preloader untuk blog itu?
OK silakan mencoba sendiri ya.
