Karena dalam artikel animasi loading yang sebelumnya memiliki 2 jenis, jadi saya hanya memberikan kode yang diperlukan agar animasi loading tersebut bisa dipasang di dalam blog anda masing-masing.
Pilih salah satu dari 2 jenis animasi loading dari artikel sebelumnya, kemudian lengkapi beberapa kode yang kosong di bawah ini dari kode yang terdapat dalam animasi loading yang anda pilih
Langkah 1
Temukan kode <b:skin><![CDATA[ lalu paste CSS di bawah ini di bagian bawah kode tersebut.#loading{
position:fixed;
width:100%;
height:100%;
z-index:999999;
top:0;
left:0;
font-family:arial;
background:#222;
}
.cmsg table{
color:#fff;
margin:12em auto;
text-align:center;
font-weight:bold;
}
#loading a{
color:#fff;
text-decoration:none;
}
#loading a:hover{
text-decoration:underline;
}
.bmsg {
text-align: center;
display: none;
background: #FAE5B0;
border: 1px solid #FAD163;
padding: 10px;
line-height: 1.6;
font-weight:normal;
color:#333;
margin-top:30px;
}
#loading .cmsg .bmsg span.con-slow a {
color: #007ACC;
text-decoration: none;
}
#loading .cmsg .bmsg span.con-slow a:hover {
text-decoration: underline;
}
.con-slow {
font-size: 80%;
}
[hg]/*******************************************************
*** ***
*** TAMBAHKAN KODE CSS ANIMASI LOADING DI SINI ***
*** ***
*******************************************************/[/hg]Langkah 2
Temukan kode <body> lalu paste kode di bawah ini pada bagian bawah kode <body> tersebut.<div id="loading">
<div class="cmsg">
<table>
<tbody>
<tr>
<td>
[hg] <!-- ISI DENGAN KODE HTML ANIMASI LOADING -->[/hg]
</td>
</tr>
<tr>
<td>Memuat Halaman<br/>"<b:if cond='data:blog.pageType != "item"'>
<data:blog.pageTitle/>
<b:else/>
<data:blog.pageName/>
</b:if>"</td>
</tr>
<tr>
<td><div class="cmsg bmsg" id="slowConnection"><span class="con-slow">Tetap berusaha terhubung dengan <b><data:blog.title/></b><br/>Coba gunakan blog dalam <a href="?m=1">versi mobile</a> atau tekan <b>F5</b> untuk memuat ulang halaman.</span></div></td>
</tr>
</tbody>
</table>
</div>
<div style="position:absolute;right:0;font-size:10px;font-weight:normal;color:#fff;padding:20px;bottom:0;">Koneksi lambat? || Gunakan blog dalam <a style="display:inline" href="?m=1">versi mobile</a></div>
</div>
<script type='text/javascript'>
function abLemot(){document.getElementById('slowConnection').style.display='block'}
var abLoadingLemot = setTimeout(abLemot, 20000);
</script>Langkah 3
Langkah terakhir, temukan kode </body> lalu paste javascript di bawah ini tepat pada bagian atas kode </body> tersebut.<script type='text/javascript'>
function abLoadingEnd(){document.getElementById('loading').style.display='none'}
if (window.attachEvent) {window.attachEvent('onload', abLoadingEnd);}
else if (window.addEventListener) {window.addEventListener('load', abLoadingEnd, false);}
else {document.addEventListener('load', abLoadingEnd, false);}
</script>Selesai dan semoga bermanfaat.
19 Respon Komentar
Mas.. saya dapet mesej ini.. :a:
[Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "br" must be terminated by the matching end-tag "".
Error 500]
@MUXLIMO Terima kasih mas mux atas info'a...
Sekarang scriptnya sudah saya benerin mas mux..
ada perubahan di dalam scriptnya...
bisa di icip lagi mas..
Semoga bermanfaat...
Maaf sebelumnya mas kalo ada kesalahan... :e:
@Aditya Meilaz Rahmanto
alhamdulillaaahh.. udah ane jajal, Mas CSS loading-nya! ajeeeb.. ! :w:
btw, Mas.. supaya backgroundnya gak terlalu gelap.. nilai opacity yang diubah yang bagian mana ya, Mas?! *maaps, cerewet nih.. :l: :e:
@MUXLIMO Oh iya, kalo mau pake opacity, di tambahin di CSS #loading..
tp menurut ane lebih bagus lagi pake rgba aja mas mux, cz kalo pake rgba element lain g ikut transparan..
klo pake opacity justru malah ntar yg lain ikutan transparan..
satu lagi mas mux, itu tadi pas loading dan koneksi lemot ada tulisan "Adityas Blog"..
mohon maaf mas mux, saya khilaf.. :e:
lupa di ganti... :25:
@Aditya Meilaz Rahmanto
sip, Mas..udah diganti pake rgba :w:
yang tulisan blognya juga udah.. hehehe makasih Mas Bro!
maaf mas,, di blog saya kok nggak melayang dan nggak ada background kayak blognya mas adit ya? :a:
@Citra Fauzan Gan, ane masih belum tau pasti kesalahan di mana..
semua script d sini jg bener smua..
tp ada satu saran dari ane, coba agan hapus tanda komentar seperti ini <!-- dan --> di dalam kode CSS blog agan...
@Aditya Meilaz Rahmantobiar backgroundnya jadi putih transparant trus gambar loadingnya kayak di http://adityameilaz.blogspot.com gimana mas?
@Citra Fauzan kalo ane pake kode warna background #f5f5f5...
Ganti kode background yang ada di dalam CSS #loading
@Aditya Meilaz Rahmantongebuat jadi transparant gmn?
@Citra Fauzan pake kode rgba gan....
Gan, cara ngasih animasinya gimana >.< bingung niiii
coding CSS Animasinya mana mas :e: ??
Thx gan punya ane udah jadi, makasi banget buat ilmunya :m: :15: /bye
@Aditya Meilaz Rahmanto
cara masukin kode rgba gimana?
gan cara change animationnya seperti google mail , atau seperti blog ini gimana,,.??
Pengennya Sperti Itu
Kasih Tau Kode nya Donk , :D
@Rizky Ritonga Add CAra Mengurangi widht pemberitahuan ketika loading blog lama dimana steelny,
Thank :D
Tinggalkan Komentar Anda?
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar
Emotion lainnya?