 |
| Cara Membuat Efek Loading Pada BLog |
Salam Labeltutorial.com - Hari ini labeltutorial blog akan membagikan tutorial tentang blog lagi nih , kali ini namanya Cara Membuat Efek Loading Pada Blog , tutorial ini sebenernya terinspirasi dari pentolan blogger indonesia yaitu +kangIsmet dan perntolan javascript kang +taufiknurrohman dari DTE , akhir bulan ini saya memang sudah aktif lagi didunia blogging sejak satu tahun 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/AVvXsEhoPFH8-d1KZt4wZXnL4Lk5R6nhN_1UZXJs54mm7WlZi32_kjB0wcNS-_JfgvHGHYbVY-Hqf0pFHiLQ-TlruvM_J9XlQdt7BB-w_Fe_ZRJU99n0SzrgjFKY3zgmA7i6G_ZKCjF8DvDbWRaD/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 merah 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:
www.loadinfo.net
www.preloaders.net
www.ajaxload.info
nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga
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 merah 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:
www.loadinfo.net
www.preloaders.net
www.ajaxload.info
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
good luck selamat mencoba kawan, sekian Tutorial Cara Membuat Efek Loading Pada Blog salam labeltutorial.com
Thanks to : blog.kangismet.net and dte.web.id
