Setelah kita memahami kode CSS dan penempatan script pada template blog,  sekarang kita mencoba mengutak-atiknya agar tampilan blog lebih profesional. script ini berfungsi untuk menampilkan animasi loading saat kita membuka halaman.

Pada posting ini aku mencoba dua macam jenis tampilan gambar loading, yaitu yang pertama berdasarkan gambar animasi gif, sedangkan yang kedua murni permainan css, tapi fungsinya sama, hanya tampilannya saja yang berbeda.

Kegunaan dari sript ini adalah jika kebetulan koneksi lambat atau isi postingan sudah demikian banyak misalnya sudah sampai ratusan halaman posting yang kita share, tentu membutuhkan waktu saat pemangilan  file sesuai yang kita pilih berdasarkan judul postingnya. Untuk contohnya bisa sobat klik pada postingan apa saja pada template blog ini.

Jika kita tidak menggunakan script pageloader  bukan berarti judul posting yang kita klik tidak mau muncul, tetap saja akan muncul, bedanya cuma jika kebetulan judul posting tersebut merupakan posting lama atau isinya banyak, tentu browser akan bekerja keras mencari dan menampilkan halaman itu, nah pada waktu menunggu file diketemukan, jeda waktu ini akan membuat tampilan halaman  template kosong. Maksudnya template hanya menampilkan warna dasar blog saja.. Tapi jika menyisipkan script pageloader  maka pengunjung akan melihat animasi atau pemberitahuan jika file tersebut sedang di load oleh browser. Dan animasi ini akan otomatis menghilang setalah halaman di load secara penuh.

Hehehe ngerti gak ya yang  di maksud dengan tulisanku diatas ?, kalau tidak ngerti mohon maaf , karena ini adalah catatan pribadiku saja yang aku dapat dari beberapa pakar blog. banyak  cara dalam menyisipkan script pageloader   tsb, tapi aku pilih yang paling simpel dan tidak bentrok dengan script yang sudah ada.
Masih ingatkan pelajaran bagaimana menulis kode-kode css ? jika lupa silahkan baca ulang.

Page loader berdasarkan Css Murni.
Page loader berdasarkan css murni artinya tidak menggunakan gambar animasi gif, tapi saat muncul tetap membentuk gambar animasi karena diatur dengan webkit-keyframes dan webkit-transform.

Bentuk tampilan cssnya seperti berikut (bisa diubah sesuai keinginan karena css hanyalah pembentuk tampilan, demikian juga namanya loadhalaman bisa diganti dengan buka_halaman) letakan diatas kode ]]></bskin>

Mengapa harus diatas kode ]]></bskin> ? karena kode ini batas akhir dari penempatan semua style css. Jika sobat ingin menyisipkan style tersebut dibawahnya juga boleh-boleh saja cuma penulisannya harus ditambahkan <style type='text/css'> isi style cssnya dan ditutup dengan </style> Namun, cara penulisan seperti ini kurang praktis jika ada berbagai macam style css, karena setiap style css harus selalu ditulis jenis style atau classnya.

Dengan Css seperti diatas, akan menampilkan animasi bola dengan warna merah dengan latar hitam yang berputar kekiri dan kekanan. Sedangkan untuk kode script pemanggilnya adalah sebagai berikut :


Page loader berdasarkan animasi gif
Sedangkan bentuk pageloader yang menggunakan animasi gift penulisan cssnya adalah sebagai berikut :
Pertama sobat harus menentukan animasi pagelodnya dulu kemudian di upload terserah dimana boleh di google code atau di menu posting sebagai contoh seperti ini :

Sobat bisa mencari di google karena banyak jenis animasi loder gif  ini, jadi sesuaikan dengan selera sobat.


Sedangkan untuk kode script pemanggilnya adalah sebagai berikut :