Memuat Halaman
"Memasang Animasi Loading di Blogspot"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

Memasang Animasi Loading di Blogspot

Untuk kali ini Adityas Blog akan memberikan kode-kode yang diperlukan untuk memasang animasi loading yang sudah pernah saya bahas sebelumnya di sini --> Membuat Animasi Loading Dengan CSS3.

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 != &quot;item&quot;'>
                     <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.

Gabung ke group:

Artikel Terkait

19 Respon Komentar

MUXLIMO, said...
June 23, 2012 at 7:00 PM

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]

June 23, 2012 at 8:16 PM

@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:

MUXLIMO, said...
June 24, 2012 at 12:20 AM

@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:

June 24, 2012 at 12:29 AM

@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:

MUXLIMO, said...
June 24, 2012 at 2:35 PM

@Aditya Meilaz Rahmanto
sip, Mas..udah diganti pake rgba :w:
yang tulisan blognya juga udah.. hehehe makasih Mas Bro!

Citra Fauzan, said...
July 9, 2012 at 1:19 PM

maaf mas,, di blog saya kok nggak melayang dan nggak ada background kayak blognya mas adit ya? :a:

July 10, 2012 at 3:30 AM

@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...

Citra Fauzan, said...
July 19, 2012 at 6:55 PM

@Aditya Meilaz Rahmantobiar backgroundnya jadi putih transparant trus gambar loadingnya kayak di http://adityameilaz.blogspot.com gimana mas?

July 22, 2012 at 12:45 PM

@Citra Fauzan kalo ane pake kode warna background #f5f5f5...
Ganti kode background yang ada di dalam CSS #loading

Citra Fauzan, said...
July 22, 2012 at 6:55 PM

@Aditya Meilaz Rahmantongebuat jadi transparant gmn?

July 22, 2012 at 8:54 PM

@Citra Fauzan pake kode rgba gan....

Icang, said...
August 15, 2012 at 11:01 AM

Gan, cara ngasih animasinya gimana >.< bingung niiii

Qoida Akmal, said...
August 16, 2012 at 3:24 PM

coding CSS Animasinya mana mas :e: ??

Qoida Akmal, said...
August 16, 2012 at 3:32 PM

Thx gan punya ane udah jadi, makasi banget buat ilmunya :m: :15: /bye

David Mancap, said...
September 29, 2012 at 2:50 PM

@Aditya Meilaz Rahmanto
cara masukin kode rgba gimana?

Rizky Ritonga, said...
October 19, 2012 at 6:58 PM

gan cara change animationnya seperti google mail , atau seperti blog ini gimana,,.??

Pengennya Sperti Itu
Kasih Tau Kode nya Donk , :D

Rizky Ritonga, said...
October 20, 2012 at 7:45 PM

@Rizky Ritonga Add CAra Mengurangi widht pemberitahuan ketika loading blog lama dimana steelny,
Thank :D

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
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

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?