ads
Unknown Cara Membuat Efek Loading di Blog Wednesday Cara Membuat Efek Loading di Blog Cara Membuat Efek Loading di Blog - Pasti kawan sering melihat blog dengan efek loading, ya menu... 5

Cara Membuat Efek Loading di Blog

0
Cara Membuat Efek Loading di Blog
Cara Membuat Efek Loading di Blog


Cara Membuat Efek Loading di Blog - Pasti kawan sering melihat blog dengan efek loading, ya menurut saya blog dengan efek loading akan lebih terlihat bagus dan indah, karena dapat membuat pengunjung mau menunggu saat loading blog. Cara Membuat Efek Loading di Blog cukup ikuti langkah - langkah dibawah ini :

1. Tambahkan jQuery pada blog kalian
Simpan kode dibawah ini sebelum </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

nb : jika template kalian udah ada script jQuery nya jangan ditambahkan lagi, cukup satu script saja , jangan ditambahkan lagi

2. Tambahkan CSS
Copy kan CSS ini diatas kode ]]></b:skin> 
#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdb4bEP4U_AOG-oVfQZbogASq-g5SbNY0a-SFPHgY5OI8zN5VrqQu2pgVI5OY1AymAdHpZ0G4nkwoO6B9krBLrlpfEDZt7Wyw5dVEuVfHFRGo9MHTo1askI11ToMxhMAGIZH-NnSsFcI/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Untuk merubah warna dan gambar sesuai keinginan kalian , cukup edit kode dibawah ini:
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdb4bEP4U_AOG-oVfQZbogASq-g5SbNY0a-SFPHgY5OI8zN5VrqQu2pgVI5OY1AymAdHpZ0G4nkwoO6B9krBLrlpfEDZt7Wyw5dVEuVfHFRGo9MHTo1askI11ToMxhMAGIZH-NnSsFcI/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;

3. Tambahkan Javascript
Copy kan kode ini, diatas </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Selesai ...........

Related Posts On Blogging

No comments:

Post a Comment

Copyright © NEWBIE TOLOL

Designed By: Habib Blog