Sunday, November 8, 2015

Blog - Membuat Loading Page

Tags

Cara membuat loading sebelum page selesai reload di Blogger.
Jika belum memiliki GIF untuk loading nya bisa download di 5 Website Penyedia Loading Generator.

1. Pilih menu "Template"
2. Lalu pilih "Edit HTML"
3. Cari kode ]]></b:skin>
4. Masukan kode CSS di atas tag ]]></b:skin>
CSS
.loading {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsSwBQ2KSslvUKpmmqNYpcWkBwH6NM24T_AGSClc8zALJNiEZIEi6aEmDrcPhdOo4fr5SVIDdWjJJ8jQcIFG9k-4dqRjz94AkcPrtE1vV9SQvXECMIYgvwLhb39EM7Fmwg9XO2egtV1Dc/s1600/loading.gif") center no-repeat #fff;
}
Ket:
Ubah url(..) dengan url GIF anda. Jika belum, upload dahulu ke Blogger.

5. Cari kode <body>
6. Masukan kode HTML di bawah tag <body>
HTML
<div class="loading"></div>

7. Cari kode </body>
8. Masukan kode Javascript di atas tag </body>
JAVASCRIPT
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(window).load(function() {
$(".loading").fadeOut("slow");
});
</script>

9. Terakhir "Simpan Template"

Terima kasih
Enjoy your day !



EmoticonEmoticon