0 CARA MEMBUAT EFEK LOADING PADA BLOG

_GUzTY_ || Artikel: CARA MEMBUAT EFEK LOADING PADA BLOG
Share Gan:


Cara Membuat Efek Loading Pada BLog
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/AVvXsEjgDXFeCrIhvUp1-_ThUMPEqTGW9qkWyeXuABpKlxUmNTu-lzL15biWbNMF13BJtj2WPdvVqI0sQaW95T39Kub_VqjNVObLDH_KZ4ae1WQLyzh4_wG2Gec-PZgg69XiYmVY4ZIfECLncSkA/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


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


Judul: CARA MEMBUAT EFEK LOADING PADA BLOG
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh gusti




Di Posting Oleh gusti, Pada 22.27 dan 0 komentar

Ditulis Oleh : GUSTI™ | Free Download Software

Anda sedang membaca sebuah artikel yang berjudul CARA MEMBUAT EFEK LOADING PADA BLOG. Dengan url https://guztiansyah.blogspot.com/2014/03/cara-membuat-efek-loading-pada-blog.html. Jika anda suka dengan artikel ini silahkan ambil dengan syarat Term of Use. Jika anda ingin meng copy-paste tolong berikan sumbernya dan baca terlebih dahulu Term of Use.

:: Thank's for visiting ! ::


Comments
0 Comments