Cara Membuat Efek Loading Pada BLog

Monday, February 24, 2014

print this page
send email
Cara Membuat Efek Loading Pada BLog

Jumpa lagi nih sob, Sudah lama sekali saya tidak share Tutorial dan artikel lainnya berhubung Saya lagi sibuk kuliah nih sob, Tapi hari ini saya tetap usahakan ada buat bantu sobat semua dengan artikel ataupun tutorial kali ini yaitu Cara Membuat Efek Loading Pada BLog tutorial ini sebenernya terinspirasi dari pentolan blogger indonesia dan perntolan javascript dari DTE , akhir bulan ini saya memang sudah aktif lagi didunia blogging sejak satu bulan lamanya gak pernah update tentang blog hehe , baru akhir akhir ini aja saya mulai update dan mengikuti perkembangan blog , ya saya sekarang sudah menjumpai teknik blog yang sudah pesat mulai dari validasi HTML 5 sampai mencoba Responsive Blogger Template , oke deh sudah cukup basa basinnya sekarang saya lanjutin aja nih bahas tutorialnya , cara membuat Efek Loading Blog ini cukup mudah dalam penggunaannya bisa membuat kesan yang berbeda terhadap pengunjung blog kita saat melihat efek loading blog ini , di tutorial kali ini saya akan share cara membuat efek loading blog sendiri artinya biar gk sama aja sama blog blog yang lain hehe . untuk demonya anda bisa melihat di blog ini , baik lanjut ke pokok bahasan jadi begini langkah langkahnya :

1. Masuk ke Edit HTML Blog Kalian
2. Copy kode css berikut diatas kode ]]></bskin>

#page-loader { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; z-index:999999; background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHVUMaw3RfvSxmph6ihiNygVUK9PMrgZ955r4Qy5kqXaD0veDvvRdYlMrj0zz5iQ4CCMTy-sN8R2DHKuq_y4hpayUNeZLWf9HGoLbAgBD7O287OUO1ca0IbYOpAMn5bLGeYiWp0n0XnzR/s320/load+labeltutorial.gif") no-repeat 50% 50%; padding:1em 1.2em; display:none
}

Info :
  1. Kode Background: #303030 = bisa anda ganti dengan warna yang anda sukai jika anda tidak paham akan kode warna HTML bisa cek menggunakan tools kode warna disini
  2. Kode yang berwarna Hijau bisa anda isikan dengan URL gambar gif/animasi milik anda sendiri atau anda bisa gunakan gambar yang diatas nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan tools di website dibawah ini :
nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga

3. Copy kode dibawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

4. Save Template kamu dan lihat hasilnya . hehe mudah mudahan berhasil ya


Demikian sedikit penjelasan seputar "Cara Membuat Efek Loading Pada BLog" yang mungkin sobat butuhkan untuk memperindah tampilan blog sobat. Wassalam.

Kumpulan Tutorial Blog yang lainnya lihat   DISINI



Cpx24.com CPM Program

0 Komentar:

Post a Comment

Pemberitahuan :
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.

** Jika anda terbantu dengan apa yang ada di blog ini jangan lupa untuk IZIN COPAS dan Ucapan Terimasih pada kotak komentar di bawah.**



close
Chat