.jpg)
Loading Blog Script dapat dipergunakan secara permanen di dalam web atau blog sehinngga ketika blog mulai dibuka maka image loding akan muncul sebagai pertanda bahwa loading sedang berjalan. Image yang disertakan dapat diganti dengan image yang lain yang lebih menarik sehingga penampilan blog bertambah keren.
D E M O
Cara membuat Loading Blog :
Keterangan/Catatan :
Update » Rebo PAHING, Maret, 14, 2012
D E M O
Cara membuat Loading Blog :
- Login ke Blogger.
- Halaman Dasbor (Dasboard) :
Klik "Rancangan (Design)" - Setelah halaman baru terbuka, klik "Edit HTML".
- Lakukan "Backup Template".
- Cari kode <head> atau ]]></b:skin> , kemudian letakkan javascript di bawahnya.
- Copy dan paste-kan kode CSS di atas kode ]]></b:skin>
- Cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'> , kemudian letakkan xHTML di bawahnya.
- Rubah kode body menjadi seperti yang terdapat dlam box xHTML body.
- Klik "Simpan Template (Save Template)".
- Buka blog dan lihat hasilnya.
Javascript :
<script language='javascript' type='text/javascript'>
//<![CDATA[
function ngloding() {
if (document.getElementById) {
document.getElementById('GRngloding').style.visibility = 'hidden';
} else {
if (document.layers) {
document.preloader.visibility = 'hidden';
}
else {
document.all.preloader.style.visibility = 'hidden';
}
}
}
//]]>
</script>Kode CSS :
#GRngloding{
position:fixed;
left:0;
top:0;
opacity:0.85;
filter:alpha(opacity=85);
background:#000;
width:100%;
text-align:center;
z-index:10;
height:100%;
}
#GRngloding img{
display:block;
margin:220px auto;
width:120px;
height:120px;
text-align:center;
border:10px solid #aaa;
border-radius:15px;
box-shadow:0 0 20px #000;
}xHTML :
<div id='GRngloding'> <img src='http://gubhugreyot-images.googlecode.com/files/JQ-loadingLightBox.gif' /> </div>
xHTML body :
<body onload='ngloding();'>
atau seperti berikut :
<body expr:class='"loading" + data:blog.mobileClass' onload='ngloding();'>Keterangan/Catatan :
- Script hanya dapat bekerja/berfungsi di "Template Tata Letak". Sementara ini masih belum kompatibel di "Template Designer".
- Panduan cara backup template dan cara mencari kode serta berbagai cara menyimpan kode dapat anda buka di Special Tutorials di menu sebelah kiri halaman.
- Anda dapat mengganti image loading dengan image yang lain.
- Penggantian image loading harus disertai perubahan ukuran dan posisi jika ukuran image berbeda. Lakukan perubahan pada :
- width:120px; » sesuaikan dengan lebar gambar baru
- height:120px; » sesuaikan dengan tinggi gambar baru
- margin:220px auto; » untuk menaikkan atau menurunkan posisi image (vertival) dimanan semakin besar akan semakin turun.
- Jika masih ada bagian blog yang terlihat ketika loading berjalan, perbesar nilai z-index:10;
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Update » Rebo PAHING, Maret, 14, 2012
» Happy Blogging - gubhugreyot «
KO ga bisa gan wkt gw prkatek di blog gw pa ada yg salah dg kodenya
BalasHapusOm kok di blog gw loading mulu gk kebuka2 blognya
BalasHapuscoba di cek di jimbe-xx.blogspot.com apa yg salah mohon kirim ke email :jimbecoolz@yahoo.com
Gmail :najib.sofyan@gmail.com
terima kasih
Penyebab gagalnya fungsi loader script akibat penggunaan javascript yang disimpan sebagai salah satu widget. Script ini berfungsi sebagai pembentuk cursor bertabur bintang warna hijau. Coba lepas terlebih dahulu scriptnya, kemudian coba test hasilnya. Link javascript cursor bertabur bintang yg harus dihapus adalah sbb:
Hapushttp://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js
Semoga berhasil... Salam & happy blogging...
gubhugreyot
wah tengkiyu Om...berhasil :D
Hapus