Minggu, 03 April 2011

Membuat Animasi Onloading di blogger dengan J~Query Code

Assalamualaikum wr.wb.
Pernah mampir disitus yang ada animasi onloading nya enggak?kalo belum pernah anda bisa melihat demonya di blog berikut ini :
Apa itu Query loader??query loader itu adalah code j ~query dan CSS yang menimbulkan efek loading yang hanya menampilkan gambar kosong berwarna hitam ( bisa diubah warnanya) dan angka persentase hingga blog tersebut selesai semua di muat sehingga para pegunjung tidak merasakan efek berat pada blog kita.

Akan tetapi ,bukannya tidak memiliki kelemahan,efek loading ini juga akan berlangsung berulang-ulang,alias setiap pengunjung mau berpindah ke  artikel lain dari blog kita ,maka efek ini akan berulang,sehingga bila kondisinya sipengunjung lagi terburu-buru ingin mendapatkan info,maka hal ini akan mengurangi kepuasan pengunjung.

Nah,pikirkan dahulu secara matang apakah anda ingin menggunakannya atau tidak,yang jelas efek ini menambah daya tarik bagi blog kita terutama dari sisi grafis dan animasi concept.Bila anda sudah memutuskan untuk menggunakannya,maka ikuti langkah-langkah berikut ini:

1.Loggin ke blogger ~dasboard ~rancangan ~ Edit Html
2.Jangan lupa centang Expand widget Template nya
3.Kemudian Copy pastekan kode dibawah ini di atas kode </head>

 <script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/> <script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'

4.Lalu Letakkan kode berikut diatas kode </body>

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

5.Terakhir,Copy pastekan kode berikut sebelum/diatas kode ]]></b:skin>

      .QOverlay {
       background-color: #000000;
       z-index: 9999;
      }

      .QLoader {
       background-color: #CCCCCC;
       height: 1px;
      }

      .QAmt {
       color:#FF530D;
       font-size:50px;
       font-weight:bold;
       line-height:50px;
       height:50px;
       width:100px;
       margin:-60px 0 0 -50px;
      }



~~~~~~~~~~~~~~~~~~~~~~Selamat Mencoba~~~~~~~~~~~~~~~~~

0 komentar:

Posting Komentar