Cara Membuat Animasi Page-Loading

Unknown - Sabtu, 28 Juli 2012 - 07:00 wita
Sekarang saya akan berbagi dengan kawan Cara Membuat Animasi Page-Loading Blog yang saya maksud disini, kurang lebih seperti kalau kawan membuka Blog / site sebelum isinya terbuka 100% maka Animasi ini yang akan tampil dan sebagai tanda juga bahwa Loading Blog sedang berjalan :r; dan kalau sudah kebuka 100% Animasi ini dengan sendirinya akan menghilang :y; 
Ok langsung saja ke cara membuatnya :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
  • Pakai Ctrl + F cari <body>
  • Hapus atau Ganti dengan Script berikut 
<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPnT9cVPHv8dOBaJHwloWx1pLGERRLpQODUOJPmwV_xuSw4hodcQLw-db7Hq3YXgf9sAqG1Kg0tSX-X9sWYzodyqbvMe2KrBAbf1KhjtU_ghkBWGk1LEZW2T2djccsOE94Mtb_M4xSsEm/s1600/loading+(6).gif'/></div>
<script src='https://sites.google.com/site/blogbegocreation/javascript/preloader.js' type='text/javascript'/>

  • Silahkan Ganti teks yang saya beri warna merah dengan Image Loading kesukaan kawan 
  • Untuk lokasi tampilan silahkan rubah teks yang berwarna biru
  • Simpan Template kawan 

Disini saya berikan kawan beberapa contoh Image Loading yang bisa dipakai atau kalau kawan ingin yang lain silahkan lihat Ajaxload.info atau Preloaders.net disana ada banyak pilihan dan bisa diatur durasi ukurannya :z;

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuEOYbnnqY7fAcyv8cVShRhdYi5_e03gVf_quyzB-904Rz8RNDdW7G48mXogD-Z_74ZYKW_zwn4NolH-AibbG3IBslamp75W7KHczVTo9Ww66cCvlPTnM1f_nBJG5kjeu89XZlwYlRKKE/s1600/Loading+%25282%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwJdTobKSO15Mcj7gu4QnbhodyubGXnT2ziaxVKSHdGq0Fj05-fnNHqC5-h1LN91hnM9CDfB0t5gK4TEG-zbzLDcdqbKfC_mVx3Bo3t0ak4jrL9HiJSDzsjyAZYFcvT5hs3gyGtLXrOEw/s1600/icon_loading.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcwaXZecqgttvduIysd3LEFWzgcUH6lLpcyW20kOzLKYuqIbQVUa7IEeQ1heTmCpJj8HIeFmYNPSdtdZLyd1LzUpPJL2D7dXAucyT0J89CldcCDX7ZQ-cNWeHvxCeYvuMOL0JQqR38Frg/s1600/loading+%25281%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjODTpFApCGpIFWZT7AeNMs_ONgU8czcyuJMwS4J7zQRGoOJGrWDgW99Pg8DbPYzLNZ9GnBA3jVQlEN3oUWCOZ8rrZbZdsdXX0fY7ixqVh7MnKL_cpllDiKqmkO2DpE-JmPxkR2ucF_b4g/s1600/loading+%25283%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbhP5J9YAN0y1izLPT9Hrl8uZOTS4VzHrT-cy5RYi2PeoY_OVXS9kfaWEO7iMmZCeWTGICAgIHKOnRIpKZrfKjkl4m3q2JrXucDpoxA2NMwcop1M29R20PM1FAQLyUY1BsuL4El5per0/s1600/loading+%25284%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqFEoPgOZjY6BqDK4AxR66MV3wSd8UmgO3u0Dt2ZDXiwFZf2cLufCAMdvhbmRX6srhZFF_zmE1Cvu0RY35LHXb1AGXVxNPnOxWLQ9BnToZAInMVCP9hqT6P58WMA0nF_Hsow08JnaJv0/s1600/loading+%25285%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidSibSca39COWzxXiOAVBDxPzO8uuPfjw_MzqjergOpIX50i1dx0w0UsIItCQQNWNMAUeoq346-Hqqpejb0WjNNVv7d2zGH7mrMPdYXs2UQbZEW5r3TPvHl-YBNyoOTXHBKXFdIJIweiY/s1600/loading+%25286%2529.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIo8C3Z-DcKnVRT0tVHeB-4FWBENb1A_AJI4JbOU_HMY-tLiu_C7bzlRnlrcUudihrg2D2dU1d-_imdi_uBy4g2MsbDAhJG5x4u295bOA6z9UhrgPLNAUQpDrWQx3bCMEOmlOCDO9RxVA/s1600/loading.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiSP0SG3uoVufvkB6c2-lODdZTECJFh8iNM_9T846oHG2usBOkd1r-peU8JdDxvEKHe2Su26-5R9VKns2ImvzgFkEtrQI7GLF4TEQQqx3gmM7qatceHaSAEPLPyH9Qxm0CF-7MZVZ-l7w/s1600/ajax-loader.gif" />

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAv6Y4LdCq4GsJ9qy4lx2nq9kFXLFjE_yAgq-2pOPmTjcQnSd8eKkAjqre09gMj_y-3rmq0b6Fqkl9dX5PucScQem0oJorUfLEV0rF7Mw23OZ78us9xSO1yPVrKvuVH6epf7DUZjRhVk/s1600/loading+(7).gif" />


Mohon Perhatian kawan, karena mengganti tag <body> apa melanggar TOS Blogger atau tidak, saya kurang tahu karena sampai posting ini saya publish tidak ada jawaban yang pasti :w; untuk itu saran saya kalau kawan ingin mencoba sebaiknya di pasang pada Blog percobaan bukan Blog Utama kawan dan jangan salahkan saya kalau terjadi masalah di kemudian hari :x;  apa yang saya sampaikan ini bertujuan untuk diketahui saja
Selamat Berkreasi


Berbagi Artikel :

Cara Membuat Animasi Page-Loading
Rate this posting:
{[["☆","★"]]}

Kalau pada Artikel Cara Membuat Animasi Page-Loading
kurang jelas atau ada Artikel, Link yang tak jalan / rusak bisa disampaikan lewat Komentar
mudah-mudahan saya bisa segera memperbaiki
---ooOOOoo---
P.pw - Shorten urls and earn money!

Artikel Menarik Lainnya

About me


Saya hanyalah Manusia Biasa ingin memberi kan yang Terbaik, walau itu belum tentu Terbaik bagi Kawan....

11 Komentar pada : “Cara Membuat Animasi Page-Loading”

  1. saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca tentang cara membuat animasi page loading.... saya berharap bisa berkunjung lagi

    BalasHapus
    Balasan
    1. Trims Kunjungan dan Komentarnya, tapi sayang sitenya Toko OnLine tanpa Komentar :z;
      Saran : sebaiknya Testimoni lengkap dengan data yang bersangkutan biar meyakinkan :w;

      Hapus
  2. trims kawan sudah berkunjung :z;

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

    BalasHapus
    Balasan
    1. trims kawan kunjungan dan komentarnya :z;

      Hapus
  4. wah mantap ini loadingnya :) . saya ambil satu yah Sob :e;

    BalasHapus
  5. silahkan kawan kalau berkenan memakai :q;

    BalasHapus
  6. Makasih yah kawan, yang saya ambil <img border="0" src="http://2.bp.blogspot.com/--Ja8UWGD91U/UA6FnZTZihI/AAAAAAAADTQ/fKdxJ7hrmnU/s1600/loading+%25285%2529.gif" />
    Makasih atas animasi loadingnya ^_^

    BalasHapus
  7. saya belum terlalu paham tentang membuat animasi page looding , bisa di jelaskan kawan

    BalasHapus
    Balasan
    1. saya rasa sudah cukup jelas, kalau kawan membacanya dengan seksama :x;

      Hapus

BERIKAN KOMENTAR SESUAI TOPIK
DENGAN BAHASA YANG SOPAN,
JANGAN MENGHINA, SARA / ETNIS DAN SPAM ATAU PAKAI NAMA ANONIM

Klik Emoticon untuk melihat Kodenya

Dapatkan Update Terbaru
BlogBego Creation di Email Kawan





BANNER [300x250]
© 2013 - BLOGBEGO CREATION | Powered by Blogger
Design Template by : Blogger Edan