Sabtu, 31 Desember 2011

Cara Membuat Animasi Status Loading

Cara Membuat Animasi Status Loading - nah ini dia sob,  Cara Membuat Animasi Status Loading  dan Untuk mengubah dan menambahi variasi pada blog banyak sekali option yang bisa dipilih, salah satunya adalah dengan memberikan efek animasi status loading pada blog. Cara ini dijamin akan mendongkrak tampilan blog agar terlihat lebih indah dan modern he3 ... Dengan memasangnya nanti pada waktu blog anda dibuka, sebelum halaman blog anda terbuka keseluruhan akan ditampilkan semacam image loading yang atraktif. Banyak sekali pilihan animasi loding yang bisa ditampilkan, tinggal pilih sesuai selera sobat, contohnya di bawah ini :

Image


Image

dan masih banyak lagi model yang lainya.

Langsung aja langkah membuatnya :

1. Membuat file js, lalu menyimpan ke hosting script, kemudian memasukkan script pada template editor. Silakan masuk ke Ajax Load dan buat image loading pilihan anda dahulu dan silakan simpan di hosting file langganan anda.
2. Menyimpan file script ke hosting. Silakan buka notepad anda kemudian copy code dibawah ini, lalu simpan dengan nama misalnya : preloader.js, codenya dibawah ini :


var ld=(document.all);var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4)
ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;
function init()
{
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}

NB :
+ Jangan sampai salah simpan dengan ekstensi js.

3. Memasukkan script pada template editor :

  • Login ke account blogger anda.
  • Klik Layout --> Edit HTML.
  • Cari kode <body> di dalam template anda dan ganti dengan kode di bawah ini :

<body onLoad='init()'> <div id='loading' style='position:absolute; width:100%; text-align:center;top:300px;'> <img border='0' src='http://URL Lokasi Simpan.Image'/></div><script src='http://URL Lokasi Simpan Script js' type='text/javascript'/>;

Keterangan :
+ Ganti huruf yang berwarna merah sesuai dengan Punya sobat.
+ Untuk peletakkanya anda bisa mengatur pada tulisan text:align center mau diletakkan ditengah atau disamping terserah.

4. Simpan Template dan selesai.

0 comments:

Posting Komentar