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 :
- 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
- 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 :
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
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.**