Cara mudah membuat animasi status loading di blog
- ada banyak hal yang bisa kita lakukan untuk mempercantik blog salah
satunya yaitu dengan cara membuat animasi status loading di blog. Cara
ini sangatlah mudah sama seperti halnya ketika kita membuat menu bar di blogspot yang sudah ane share sebelum ane membuat postingan ini.
Pada kesempatan ini ane akan berbagi tips cara membuat animasi status
loading di blog dengan bantuan pihak ke tiga yaitu layanan gratis
dari ajaxload. Sebenarnya pemasangan status loading ini akan merubah
sebagian kode html pada template agan, oleh karena itu ane menyarankan
untuk terlebih dahulu agan membackup template sebagai antisipasi jikalau
terjadi sesuatu hal yang tidak diinginkan atau agan juga bisa
menggunakan blog cadangan dulu sebelum melakukan tutorial cara membuat
animasi status loading di blog berjalan dengan lancar.
Berikut adalah cara membuat animasi status loading di blog
1. Silahkan pergi ke ajaxload untuk membuat animasi status loading.
2. Upload kode Javascript dibawah ke hosting agan ( jika agan belum
mempunyai hosting sendiri, agan bisa menggunakan hosting gratisan di Google Code ). Pastikan file yang di upload ekstensi/berkhiran .js
var ld=(document.all);var ns4=document.layers;var ns6=document.getElementById&&!document.all;var ie4=document.all;if (ns4)ld=document.loading;else if (ns6)ld=document.getElementById("loading").style;else if (ie4)ld=document.all.loading.style;function init(){if(ns4){ld.visibility="hidden";}else if (ns6||ie4) ld.display="none";}
Untuk cara upload file javascript-nya, silahkan salin seluruh kode di
atas kedalam notepad, terus simpan file tersebut dengan
extension/akhiran .js
3. Masuk ke akun Blogger
4. Klik halaman "Template" -> centang "Expand Template Widget".
5. Silahkan agan cari kode <body>
6. Ganti kode <body> tersebut dengan kode dibawah ini.
<body onLoad='init()'><div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://tempat-simpan.com/gambarpreloader.gif'/></div> <script src='http://tempat-simpan/preloader.js' type='text/javascript'/>
7. Simpan Template dan lihat hasilnya.
Note:
- Silahkan ganti kode yang berwarna biru dengan alamat link dimana agan menyimpan gambar animasi status loadingnya.
- Ganti kode yang berwarna merah dengan alamat link hosting ketika agan mengupload kode javascript animasi status loadingnya.