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?

Sekian, terima kasih

tetap gak bisa, coba kakak jelaskan?
http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js
dan
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
Pasang satu saja Bud, kalo dipasang dua malah gak bisa jalan.
Saran saya pilih yang kedua, karena versi baru. :)
Wah reaksi cepat nih. Makasih tanggapannya ya. Jadi ngerepotin nih... :)
coba tanya ke empu nya, tinggal klik link sumber di atas...
maaf gan, ane juga masih belajar... :D
PS: Komen saya sebelumnya saya apus karena kepotong. Maaf.
agar efek loadingnya gak ilang mendadak coba utak atik kode (loader').fadeIn(1500).delay(6000).fadeOut(1000);)
untuk ganti font nya, tinggal tambahin kode font family (font-family: 'Flavors', cursive;) di CSS efek loading. Taroh aja dibawah kode (display:none;) dilangkah 2, hasil akhirnya seperti ini:
/* 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;
font-family: 'Flavors', cursive;
}
Selemat mencoba gan, ^^
NB: Nama sudah sy revisi. Maaf sebelumnya. Hehehe...
hehehehehe
makasih gan..
taroh di atas kode </head> ya gan :)
selamat mencoba...
Semoga berhasil :)
bisa g agan membuatkan aku menu vertikal tapi yang drop down kalau sudah bisa hubungi kami di www.bemamikmahaputra.co.cc. di situ nanti ada obrolan atau chat silahkan agan ngasih informas di situ jika agan sudah menemukan oke,,,
salam hangat
www.tricahndeso.co.cc
kalau mau efek loading yang lama, yaitu efek loadingnya akan ilang jika blog sudah ter-load semuanya, tutorialnya ada di mari:
http://hompimpaalaihumgambreng.blogspot.com/2012/01/membuat-animasi-loading-dengan-jquery.html
tapi ada resikonya : Resiko saat menerapkan efek ini adalah, jika script gagal terakses, tabir tidak akan bisa menghilang dan akan terus menutupi seluruh halaman website Anda.
http://rahmat-kriz.blogspot.com
tolong kasih tau y bos
hebat si agan :sip
Gan, boleh request template blog premium " My Magazine" gan.. Aku sudah coba cari kemana2 tapi gak ketemu. Atau mungkin kloning template premium itu gan. Tolong gan.. :sip
blog ini merupakan salah satu blog favorit yang sering kukunjungi.. Cuma aku jarang berkomentar..