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.
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_synasmedseo'>Copyright 2012 <span class='esm4'>synasmedseo.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.gif
http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.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.
Terimakasih anda telah membaca artikel tentang
Cara Membuat Javascript Image Loader for Blog
. Jika ingin menduplikasi artikel ini diharapkan anda untuk mencantumkan link
http://synasmedseo.blogspot.com/2012/03/cara-membuat-javascript-image-loader.html
. Terimakasih atas perhatiannya.
Synasmedseo Blogger Tips Trik Tutorial Terbaru
Published:
2012-03-14T19:45:00-07:00
Title:
Cara Membuat Javascript Image Loader for Blog
Rating:
5
On
22
reviews
