Minggu, 18 April 2010

Membuat Menu loading pada blogspot

Tutorial kita kali akan membahas cara membuat status loading, maksudnya adalah pada waktu sobat membuka halaman blog milik sobat, nantinya akan muncul sebuah image / gambar animasi loading yang atraktif sebelum blog tampil keseluruhan.


Pemasangan status loading ini akan mengubah sedikit kode HTML yang ada di template, jadi saya sarankan gunakan blog cadangan untuk mencoba tutorial ini, atau backup template sobat sebelum mengubah kode HTML-nya.


Karena kode yang di ubah adalah <body> dan saya tidak tau pasti apakah dengan mengubah kode tersebut akan melanggar TOS Blogger atau tidak. Makanya saya sarankan sebaiknya gunakan blog cadangan saja untuk mencoba membuat status loading ini. Baiklah, lanjut ya.

Untuk pilihan animasi status loading-nya bisa sobat lihat di Ajax Load.
Silahkan upload kode Javascript berikut ini ke tempat penyimpanan online. Pastikan file yang di upload berkhiran .js
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";
}
 Cara upload file javascript-nya, copy paste semua kode diatas kedalam notepad, kemudian simpan file tersebut dengan extension atau akhiran .js dan setelah itu upload ke tempat penyimpan online atau jika mau lebih mudah upload saja di google sites.

Kemudian ikuti langkah berikut ini :

  1. Silahkan login dulu ke Blogger.
  2. Kemudian tuju halaman Edit HTML.
  3. Klik Expand Template Widgets.
  4. Cari kode <body> dan ganti kode tersebut dengan kode dibawah ini :

    <body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
  5. Simpan Template.

9 Komentar Dari Sobat:

Risal Faqih mengatakan...

nice to info...

April 18, 2010
akhatam mengatakan...

Weh Mantep triknya... Salam kenal ya bro....

April 20, 2010
Rinda mengatakan...

wah bgs bgt infonya kang ^_^

April 20, 2010
Unknown mengatakan...

thx, silahkan dicoba atau disebarluaskan ke blogger lainnya.

April 22, 2010
Sungai Awan mengatakan...

Aku save dulu kawan.mungkin nanti akan butuh

April 22, 2010
Unknown mengatakan...

ok.. ^^

April 22, 2010
Unknown mengatakan...

@R I S A L Hiii

April 23, 2010
Machinima Indonesia mengatakan...

bantu orang orang js...
http://www.4shared.com/document/3g2bWaVg/preloading.html

Agustus 27, 2010
./k1d-v3 mengatakan...

waah mantapp ini :D

September 13, 2010

Posting Komentar

hii ^^ Kirim masukan dan Komplain anda disini ya... kalo bisa dengan kata2 yang sopan dan tidak spawn. Terserah kamulah pengen nulis apa, bebas kog...