Cara Membuat Animasi Page-Loading
- 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" />
.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
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---
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---
saya sering berkunjung di blog-blog, postingan ini sangat menarik serta enak dibaca tentang cara membuat animasi page loading.... saya berharap bisa berkunjung lagi
BalasHapusTrims Kunjungan dan Komentarnya, tapi sayang sitenya Toko OnLine tanpa Komentar :z;
HapusSaran : sebaiknya Testimoni lengkap dengan data yang bersangkutan biar meyakinkan :w;
Postingnya menarik. lanjutkan
BalasHapustrims kawan sudah berkunjung :z;
BalasHapusmengunjungi blog yang bagus dan penuh dengan informasi yang menarik adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi
BalasHapustrims kawan kunjungan dan komentarnya :z;
Hapuswah mantap ini loadingnya :) . saya ambil satu yah Sob :e;
BalasHapussilahkan kawan kalau berkenan memakai :q;
BalasHapusMakasih yah kawan, yang saya ambil <img border="0" src="http://2.bp.blogspot.com/--Ja8UWGD91U/UA6FnZTZihI/AAAAAAAADTQ/fKdxJ7hrmnU/s1600/loading+%25285%2529.gif" />
BalasHapusMakasih atas animasi loadingnya ^_^
saya belum terlalu paham tentang membuat animasi page looding , bisa di jelaskan kawan
BalasHapussaya rasa sudah cukup jelas, kalau kawan membacanya dengan seksama :x;
Hapus