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 = &quot;http://&quot; + top.location.host.toString();
var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;], a[href^=&#39;#&#39;]&quot;);
$internalLinks.click(function() {
$(&#39;#page-loader&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
$(&#39;#page-loader&#39;).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

37 Comments

kok aku udah pasang JQuery diatas kode head
tetap gak bisa, coba kakak jelaskan?
Reply Delete
@Hafis mauludi: Pastikan kode JQuery nya hanya satu saja, kalo lebih malah gak bisa jalan... Saya liat di blog agan belum dipasang kode nya, :)
Reply Delete
Bang Yop di Blog teh tos dipasang preload, teras digentos deui ngiring tutorial ieu, tapi janten teu muncul Bang Yop! Duka aya nu teu kahapus panginten! Kumaha nya?? :-)
Reply Delete
@Budi Rachmat Kurniawan: Saya liat di blog (http://jejak-mahasiswa.blogspot.com/) ada dua buah file JQuery yaitu:

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. :)
Reply Delete
Saya kok gagal terus ya? Padahal insya Allah semua script di atas sudah nagkring di tempatnya. Hm...
Reply Delete
@Sang Manyar: alamat blognya apa gan? Biar ane liat ke tkp langsung, :)
Reply Delete
Ini gan: http://jejak-sangmanyar.blogspot.com
Wah reaksi cepat nih. Makasih tanggapannya ya. Jadi ngerepotin nih... :)
Reply Delete
@Sang Manyar: Iya ya gan kenape??? kemungkinan ada yang bentrok javascript nya...

coba tanya ke empu nya, tinggal klik link sumber di atas...

maaf gan, ane juga masih belajar... :D
Reply Delete
This comment has been removed by the author.
Delete
Hehehe... Gak papa gan. Tapi coba cek blog saya. Setelah saya bikin artikel ini: http://jejak-sangmanyar.blogspot.com/2012/02/mencari-sumber-bencana-alaycom.html , efek loading nya tiba-tiba bisa. Cuma, ada trik nggak supaya efeknya nggak ilang mendadak? Kurang alus gitu. Sama cara ganti fontnya gimana kok punya saya nggak berfungsi ya. Makasih atas solusinya dan semoga sukses slalu... ^^

PS: Komen saya sebelumnya saya apus karena kepotong. Maaf.
Reply Delete
@Sang Manyar: Alhamdulillah gan udah bisa, ^^

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, ^^
Reply Delete
Ooo.. Begitu toooh. Sip. Segera meluncur. Makasih banyak :)

NB: Nama sudah sy revisi. Maaf sebelumnya. Hehehe...
Reply Delete
praktek ah ...
hehehehehe
Reply Delete
mau tanya bang , kalo untuk wordpress gimana ya ?
Reply Delete
@puguh alakadarnya: langkahnya sama aja, cuma di langkah 2, kodenya dimasukin ke file .css di folder theme nya, :)
Reply Delete
gan,, pnya gw ko gg bsa ya ? coba tolong liatin kenapa gan.. di http://thaufiqsmp8.blogspot.com/
makasih gan..
Reply Delete
@9A: agan gak pasang kode ini, <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

taroh di atas kode </head> ya gan :)
selamat mencoba...
Reply Delete
saya mau tanya dong kalo bikin tab menu kayak punya situ yang home, about, content gitu gimana yaaa? saya masih baru nih belum ngerti hehehe terimakasih:)
Reply Delete
@Feby Restu Dyastika: Silakan coba tutorial ini => http://www.hsp21.com/2011/06/tutorial-membuat-menu-horizontal-dengan.html

Semoga berhasil :)
Reply Delete
punya gue nggak bisa nih, check yaaa http://nonagembel.blogspot.com
Reply Delete
@Nona !!!: saya sudah cek tapi kok gak ada kode yang dipasang sama sekali. Silakan dicoba dulu tutorialnya, kalo tidak bisa silakan hubungi saya lagi, :)
Reply Delete
Gan, aku mau nanya nih,,
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
ane rekomendasikan mengunjungi blog ini gan : http://hompimpaalaihumgambreng.blogspot.com :)
Delete
Reply Delete
bro,, loadingnya kok terlalu cepat ya.. kagak kelihatan. biar tampilnya lebih lama gimana ya..??
untuk efek loading yang ini emang sebentar gan....

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.
Delete
Reply Delete
show hiden comennya kok ikut jg ada loadingnya sih.. cara biar show hidn comentnya tida loadingnya gimana nih..??
ane liat di blog agan, efek loadingnya udah berjalan sempurna :)
Delete
Reply Delete
jadi efek ini tergantung jg dgn kecepatan loading blog kita??? dan memberatkan size blog kita jg gak???
tidak terlalu berat kok gan, contohnya blog ane ini :)
Delete
Reply Delete
wah mantap nih. sudah saya terapkan semuanya dan berhasil.. thanks gan
http://rahmat-kriz.blogspot.com
Reply Delete
Kenapa Di blog saya gk bisa y bos
tolong kasih tau y bos
File jquery nya harus satu Gan, coba di cek lagi :)
Delete
Reply Delete
Anonymous 15 April, 2013
gan cara melihat jquery gimana gan?
hebat si agan :sip
lihat di pagesource nya gan :)
Delete
Reply Delete
Wah bagus juga gan triknya, ini bloeh dong aku coba di blog punyaku... :)

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..
Reply Delete

Post a Comment

Silakan tulis komentar atau pertanyaan kamu di sini. Komentar yang berbau spam, promosi dan sebagainya akan segera saya hapus. Terima kasih.

Cancel Reply