Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Simple Javascript Pre Loader Blog

Loading Blog Script dapat dipergunakan secara permanen di dalam web atau blog sehinngga ketika blog mulai dibuka maka image loding akan muncul sebagai pertanda bahwa loading sedang berjalan. Image yang disertakan dapat diganti dengan image yang lain yang lebih menarik sehingga penampilan blog bertambah keren.

D E M O

Cara membuat Loading Blog :

  1. Login ke Blogger.
  2. Halaman Dasbor (Dasboard) :
    Klik "Rancangan (Design)"
  3. Setelah halaman baru terbuka, klik "Edit HTML".
  4. Lakukan "Backup Template".
  5. Cari kode <head> atau ]]></b:skin> , kemudian letakkan javascript di bawahnya.
  6. Copy dan paste-kan kode CSS di atas kode ]]></b:skin>
  7. Cari kode <body> atau <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> , kemudian letakkan xHTML di bawahnya.
  8. Rubah kode body menjadi seperti yang terdapat dlam box xHTML body.
  9. Klik "Simpan Template (Save Template)".
  10. Buka blog dan lihat hasilnya.

Javascript :
<script language='javascript' type='text/javascript'>
//<![CDATA[
function ngloding() {
    if (document.getElementById) {
        document.getElementById('GRngloding').style.visibility = 'hidden';
    } else {
        if (document.layers) {
            document.preloader.visibility = 'hidden';
        }
        else {
            document.all.preloader.style.visibility = 'hidden';
        }
    }
}
//]]>
</script>

Kode CSS :
#GRngloding{
        position:fixed;
        left:0;
        top:0;
        opacity:0.85;        
        filter:alpha(opacity=85);
        background:#000;
        width:100%;
        text-align:center;
        z-index:10; 
        height:100%;
}
#GRngloding img{
        display:block;
        margin:220px auto;
        width:120px;
        height:120px;
        text-align:center;
        border:10px solid #aaa;
        border-radius:15px;
        box-shadow:0 0 20px #000;
}

xHTML :
<div id='GRngloding'>
<img src='http://gubhugreyot-images.googlecode.com/files/JQ-loadingLightBox.gif' />
</div>

xHTML body :
<body onload='ngloding();'>

atau seperti berikut :

<body expr:class='&quot;loading&quot; + data:blog.mobileClass' onload='ngloding();'>

Keterangan/Catatan :

  1. Script hanya dapat bekerja/berfungsi di "Template Tata Letak". Sementara ini masih belum kompatibel di "Template Designer".
  2. Panduan cara backup template dan cara mencari kode serta berbagai cara menyimpan kode dapat anda buka di Special Tutorials di menu sebelah kiri halaman.
  3. Anda dapat mengganti image loading dengan image yang lain.
  4. Penggantian image loading harus disertai perubahan ukuran dan posisi jika ukuran image berbeda. Lakukan perubahan pada :
    • width:120px; » sesuaikan dengan lebar gambar baru
    • height:120px; » sesuaikan dengan tinggi gambar baru
    • margin:220px auto; » untuk menaikkan atau menurunkan posisi image (vertival) dimanan semakin besar akan semakin turun.
  5. Jika masih ada bagian blog yang terlihat ketika loading berjalan, perbesar nilai z-index:10;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Update » Rebo    PAHING, Maret, 14, 2012

» Happy Blogging - gubhugreyot «

5 komentar:

  1. kok ga ada kode body nya di blog saya?

    BalasHapus
  2. KO ga bisa gan wkt gw prkatek di blog gw pa ada yg salah dg kodenya

    BalasHapus
  3. Om kok di blog gw loading mulu gk kebuka2 blognya

    coba di cek di jimbe-xx.blogspot.com apa yg salah mohon kirim ke email :jimbecoolz@yahoo.com
    Gmail :najib.sofyan@gmail.com
    terima kasih

    BalasHapus
    Balasan
    1. Penyebab gagalnya fungsi loader script akibat penggunaan javascript yang disimpan sebagai salah satu widget. Script ini berfungsi sebagai pembentuk cursor bertabur bintang warna hijau. Coba lepas terlebih dahulu scriptnya, kemudian coba test hasilnya. Link javascript cursor bertabur bintang yg harus dihapus adalah sbb:
      http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js

      Semoga berhasil... Salam & happy blogging...

      gubhugreyot

      Hapus
    2. wah tengkiyu Om...berhasil :D

      Hapus

 
GR | Edited by | gubhug reyot