Cara Membuat Animasi Loading Page di Blog - Blogger yang dikenal
dengan Blog statis, yaitu proses HTML yang baku dan tidak bisa
diubah-ubah, berbeda dengan Blog dinamis yang dikenal dengan nama
'website' mempunyai proses interaktif, artinya mempunyai fitur yang
dapat dimodifikasi secara keseluruhan baik style, database dan layanan.
Kembali kepada Blogspot bersifat statis. Teknik ini biasa digunakan pada website, namun dengan kreatifitas Bloggers Mania, sehingga Blog terlihat modis layaknya website, diantaranya dengan membuat animasi loading page pada Blog.
Pembuatan animasi loading page di Blogspot ini menggunakan Jquery. Nah, untuk cara pemasangannya loading page di Blog sobat, silahkan ikuti langkah-langkah berikut ini:
1. Pastikan sobat sudah login pada akun Blogger,
2. Di halaman Dasbor, beralih ke Template,
3. Klik Edit HTML,
4. Cari kode ]]></b:skin> dengan menekan Ctrl + F pada kolom Edit HTML kemudian
letakan kode berikut ini di atas ]]></b:skin>.
Kembali kepada Blogspot bersifat statis. Teknik ini biasa digunakan pada website, namun dengan kreatifitas Bloggers Mania, sehingga Blog terlihat modis layaknya website, diantaranya dengan membuat animasi loading page pada Blog.
Pembuatan animasi loading page di Blogspot ini menggunakan Jquery. Nah, untuk cara pemasangannya loading page di Blog sobat, silahkan ikuti langkah-langkah berikut ini:
1. Pastikan sobat sudah login pada akun Blogger,
2. Di halaman Dasbor, beralih ke Template,
3. Klik Edit HTML,
4. Cari kode ]]></b:skin> dengan menekan Ctrl + F pada kolom Edit HTML kemudian
letakan kode berikut ini di atas ]]></b:skin>.
/* Loading Page */
.QOverlay {
background-color: #000000; /* background color loading */
z-index: 9999;
}
.QLoader {
background-color: #CCCCCC; /* color bar loading */
height: 10px;
}
.QAmt {
color:#FF530D; /*loading Color number*/
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;}Masukkan Code atau Text disini
______Jika script berwarna biru telah ada pada template Blog sobat sebelumnya,<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://script-seo.googlecode.com/files/loadpage.js' type='text/javascript'/>
Masukkan Code atau Text disini
tidak perlu menambahkan script tersebut.
6. Kemudan cari kode </body> dan letakkan kode berikut ini diatasnya,
5. Klik Simpan Template. Jika sudah benar melakukan semua tahap di atas, sekarang sobat lihat hasilnya.<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>Masukkan Code atau Text disini
Semoga bermanfaat, happy Blogging
No comments:
Post a Comment