Membuat Efek Loading Ketika Membuka Halaman Blog

Tutorial selanjutnya adalah membuat efek loading ketika memuat/membuat halaman blog. Efek ini cukup keren, karena sambil menunggu halaman blog semuanya terload, maka efek ini akan muncul. Sehingga pengunjung tidak menjadi bosan. Ya begitu lah..

Bagi yang belum mengetahui efek ini, silakan klik salah atu link yang ada di blog ini, maka eek itu pun akan muncul.

Bagaimana cara membuat efek tersebut?

1. Masuk ke mode Template > Edit HTML. Cari kode ]]></b:skin>

2. Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* EFEK LOADING */
#page-loader{
position:fixed;
top:0;
left:0;
background-color:#000;
z-index:9999;
text-align:center;
width:100%;
height:100%;
padding-top:200px;
font-size:25px;
color:#fff;
display:none;
}

Anda bisa merubah kode CSS ini, agar tampilannya lebih menarik lagi

3. Kemudian cari kode </body>

4. Letakkan kode di bawah tepat di atas kode </body>

<div id='page-loader'>
<span style='font-size:70px;font-weight:bold;'>Loading...</span><br/>
Mohon Tunggu Sebentar Ya!<br/>Sedang Memuat Halaman Blog-nya Nih...</div>

Untuk kata-katanya bisa diganti, sesuai kebutuhan.

5. Cari lagi kode </head>

6. Masukkan kode di bawah ini, tepat di atas kode </head>

<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
$internalLinks.click(function() {
$('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#page-loader').click(function() {
$(this).hide();
});
});
</script>

PENTING!
Jika belum memasang JQuery di blog, pasang dulu yah. Caranya letakkan kode di bawah ini diatas kode </head>

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

CUKUP SATU FILE JQUERY SAJA

Kesalahan umum yang sering terjadi adalah memasang lebih dari satu JQuery. Pastikan hanya ada satu JQuery saja! Memasang lebih dari satu file JQuery akan menyebabkan script tidak berjalan...!

7. Klik save template, sekarang klik salah satu link di blog kamu. Lihat apa yang terjadi?