Cara Membuat Animasi Loading Page 'Keren' di Blogspot

Donasi

Sabtu, 20 April 2013

Loading Blog (Foto: Ilustration)

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>.

/* 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;}

5. Setelah itu cari kode </head> dan letakan kode berikut diatasnya,

<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'/>

______Jika script berwarna biru telah ada pada template Blog sobat sebelumnya,
tidak perlu menambahkan script tersebut.

6. Kemudan cari kode </body> dan letakkan kode berikut ini diatasnya,

<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

5. Klik Simpan Template. Jika sudah benar melakukan semua tahap di atas, sekarang sobat lihat hasilnya.

Semoga bermanfaat, happy Blogging

Bagikan ini :

0 1 038

Terima kasih anda telah membaca tulisan " Cara Membuat Animasi Loading Page 'Keren' di Blogspot". Silahkan klik "tombol share" dan menggunakan fitur lain yang sudah tersedia. Anda tidak diizinkan melakukan penggandaan artikel atau copy-paste tulisan kami tanpa izin dan tanpa menaruh sumber aslinya.

Kami mengaktifkan DMCA COMPLAINT sehingga kami berharap anda bisa memakluminya. Untuk info lebih lanjut, baca terlebih dahulu PERATURAN mengenai izin share konten. Terima Kasih.

Walman@Nawimania: Your welcome (y)@Troubleshooter: Umumnya teknik di atas dapat berjalan ketika submit sit…
troubleshootergan kok ga bisa ya ?kluar URL restricted by robots.txt padahal tidak pakai robot
nawimaniaThanks yaa tutorialnya
Walman@Anonim: Moga sukses juga untuk sobat...@Bubblenews: Serp sementara, ane yang masih newbie siap-siap…
bubblenews - penting, panas, perlu dan seruuBlog walman memang seruu, SERP di ambil semua... mantap
WalmanTerima kasih, happy blogging (y)
obat kuatmantap pak bro
AnonymousWah mantap gan, moga sukses v^^