Cara Membuat Javascript Image Loader for Blog



Pada kesempatan kali ini, saya akan berbagai tentang cara membuat javascript image loader for blog.

Javascript loading atau biasa dikenal juga sebagai javascript pre-loading dan javascript image loader, sebenarnya adalah sebuah fungsi yang tak jauh berbeda. Kesemuanya digunakan untuk menandai proses loading website atau blog. Dengan memanfaatkan fungsi seperti ini, ketika sebuah blog dibuka, maka akan ditampilkan gambar/image atau teks yang memberi pertanda bahwa blog sedang dalam proses loading/membuka. Sesuai dengan namanya, Javascript DIV loader ini memang didesain dengan memanfaatkan kode/elemen DIV di dalam javascripnya, yang difungsikan untuk membentuk konfigurasi penataan dan tampilan gambar/image serta teks.

Untuk membuat dan memasangnya di blog juga teramat mudah karena hanya kita melakukan pada rancangan edit HTML saja.

Jika Anda masih kebingungan apa itu javascript image loader silahkan lihat demo berikut:

Nah pasti sobat sudah mengerti kan, untuk membuatnya silahkan ikuti langkah berikut ini.
1. Login ke akun blogger sobat.
2. Lalu masuk ke Rancangan > Edit HTML.
3. Kopy kode di bawah ini lalu pasang di bawah kode <head>:
<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/> 
4. Setelah itu cari kode <body>, lalu ganti dengan kode berikut:

<body onLoad='waitPreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<center><p style='margin-top: 250px;'><img src='http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gif' style='border: 1px solid #555; padding: 2px;'/><br/>Tunggu Beberapa Saat lagi...</p></center><div class='Created by_DAW-XP'>Copyright 2011 <span class='esm4'>daw-xp.blogspot.com</span> - All rights reserved
</div>
</div>
 :::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah, dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna orange, sobat bisa ganti dengan URL gambar sobat sendiri.

5. Save template, dan lihat hasilnya.

Berikut langsung kami sediakan gambar-gambar untuk status loading blog sobat:
http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader_thumb.gifhttp://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader_thumb.gif

http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gifhttp://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gif
http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader.gif http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader.gif

Note: Untuk sobat yang menggunakan fasilitas ini di blognya, tolong jangan dihilangkan ya nama blog dari sini. Sebenarnya Saya cukup lama mengedit ini untuk agar jadi. Mohon pengertiannya.

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Cara Membuat Javascript Image Loader for Blog dan anda bisa menemukan artikel Cara Membuat Javascript Image Loader for Blog ini dengan url http://daw-xp.blogspot.com/2011/04/membuat-javascript-image-loader-for.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Javascript Image Loader for Blog ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Javascript Image Loader for Blog sumbernya.


3 comments

Unknown August 2, 2011 at 5:33 AM

wah ini otomatis gk sob?

Reply delete
Unknown August 2, 2011 at 11:09 AM
mania-xp February 6, 2012 at 8:42 AM

mau cobain, tapi kok loader punya saya kalau di postingan tertentu nanti loading nya ngk selesai kenapa ya???

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors