'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Membuat Animasi Loading Blog



    Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini.

    Log in ke blog anda
    Klik Rancangan
    Klik Edit HTML
    Masukkan kode berikut 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'
    type='text/javascript'/>

    Selanjutnya masukkan kode berikut di atas kode </body>


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

    Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>


    .QOverlay {
    background-color: #000000; /* warna background saat blog anda di loading */
    z-index: 9999;
    }

    .QLoader {
    background-color: #CCCCCC; /* warna bar loading */
    height: 1px;
    }

    .QAmt {
    color:#FF530D; /* warna angka persentase saat loading */
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
    }

    Klik Simpan Template
    Selesai dan lihat hasilnya
    Selamat mencoba dan sukses selalu


    x_3bfae512


    Share this:

    6 comments :

    1. Nice info sob.
      Btw kalau di joomla gimana ya.
      Ditunggu sob artikel selanjutnya

      ReplyDelete
    2. Postingnya bagus dan Inspiratif. lanjutkan

      ReplyDelete
    3. mengunjungi blog yang bagus dan penuh dengan informasi yang menarik adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

      ReplyDelete
    4. wawwww is megic,,pengin ykin blog qu bisa ky gini ???

      ReplyDelete
    5. makasih agan..
      visback ya http://gitahemas.blogspot.com

      ReplyDelete

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018