Tampilan tertentu pada saat loading blog
mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini
memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada
saat loading, sehingga pengunjung hanya melihat animasi tampilan
loading. Posting kali ini saya akan share bagaimana membuat tampilan
loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada
loading page ini menggunakan Query Loader, yaitu tampilan layar kosong
hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat.
Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada
tampilan ini pengunjung hanya melihat halaman loading dengan bar dan
persentase loading secara keseluruhan dengan berwarna gelap. Coba anda
refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari
kita bahas cara pembuatannya. Ikuti langkah berikut ini.
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
Selanjutnya masukkan kode berikut di atas kode </body>
Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>
Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu
Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/>
Selanjutnya masukkan kode berikut di atas kode </body>
<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>
.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}
.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}
Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu
"keep spirits and do the best"
Tidak ada komentar:
Posting Komentar