Membuat Animasi Loading di Blog

Membuat Animasi Loading di Blog
Membuat Animasi Loading di Blog - Rata-rata para Blogger sekarang sudah banyak yang menggunakan Animasi Loading agar terlihat bagus. Animasi Loading adalah dimana saat blog kita sedang menuju ke halaman Posting/URL lain maka disitulah terlihat Animasi Loading yang sedang berputar sampai Loading blog selesai. Dan kali ini saya akan memberi cara untuk Membuat Animasi Loading di Blog.

Langkah-langkah untuk Membuat Animasi Loading di Blog.

Login ke www.blogger.com
Pilih Rancangan / Template, kemudian Edit HTML
Cari kode ]]></b:skin> Jika sudah ketemu lalu letakan kode berikut diatas kode ]]></b:skin>
#loadhalaman{position:fixed; opacity:0.93; top:0; left:0; background-color:#000; z-index:9999; text-align:center; width:100%; height:100%; padding-top:20%; color:#000; display:none}
.loadball{background-color:transparent; border:5px solid #00a3ff; border-right:5px solid transparent; border-left:5px solid transparent; border-radius:50px; box-shadow:0 0 35px #00a3ff; width:50px; height:50px; margin:0 auto; -moz-animation:spinPulse 1s infinite ease-in-out; -webkit-animation:spinPulse 1s infinite linear}
.loadball-2{background-color:transparent; border:5px solid #00a3ff; border-left:5px solid transparent; border-right:5px solid transparent; border-radius:50px; box-shadow:0 0 15px #00a3ff; width:30px; height:30px; margin:0 auto; position:relative; top:-50px; -moz-animation:spinoffPulse 1s infinite linear; -webkit-animation:spinoffPulse 1s infinite linear}
@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}
50%{-moz-transform:rotate(145deg); opacity:1}
100%{-moz-transform:rotate(-320deg); opacity:0}
}
@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px#00a3ff}
50%{-webkit-transform:rotate(145deg); opacity:1}
100%{-webkit-transform:rotate(-320deg); opacity:0}
}
@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
Jika sudah,  Pasang JQuery Terbaru
Caranya cari kode </head> lalu letakan kode JQuery 1.8.3 di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

Langkah Terakhir, Cari kode </body> lalu letakan kode berikut diatas kode </body>
<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = &quot;http://&quot; + top.location.host.toString();
    var $internalLinks = $(&quot;a[href^=&#39;&quot;+siteURL+&quot;&#39;], a[href^=&#39;/&#39;], a[href^=&#39;./&#39;], a[href^=&#39;../&#39;]&quot;);
    $internalLinks.click(function() {
        $(&#39;#loadhalaman&#39;).fadeIn(1500).delay(6000).fadeOut(1000);
    });
    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=&#39;_blank&#39;
    $(&#39;#loadhalaman&#39;).click(function() {
        $(this).hide();
    });
});
</script>
Kalau semuanya sudah diterapkan dengan benar langsung saja Save Template/Simpan Template.
Jika masih ada yang ingin ditanyakan silahkan berkomentar dikolom komentar yang sudah disediakan.

Sekian dari saya, Semoga artikel ini bermanfaat.

Postingan terkait:

19 Tanggapan untuk "Membuat Animasi Loading di Blog"

  1. wuih...
    efeknya keren gan, cma pas di pasang di blog ane ko berat ya...??

    ReplyDelete
  2. ngak buat berat blog gan..
    #salam damai

    dari STAR-US
    come back..

    ReplyDelete
  3. mantap gan, lumayan nih buat mempercantik blog :D

    ReplyDelete
  4. wis.. mantap ni.. tpi apakah akan sangat memberatkan blog??
    klo pengaruhnya kecil aku mau pke ni.. :D :D
    muamar-kurosaki.com

    ReplyDelete
    Replies
    1. Kalo menurut ane sih pengaruhnya kecil, tapi coba saja terapkah terlebih dahulu, kalo loading nya menjadi berat mending gausah dipakai :D

      Delete
  5. cara inii ane udh lama tau,,but nice share :)

    ReplyDelete
  6. Biar tampilnya Agak lama gimana ya ?
    ni ane pasang Tpi tampilnya Cuma sekejap mata
    hehe

    ReplyDelete
    Replies
    1. oh, coba agan cari kode ini
      fadeIn(1500).delay(6000).fadeOut(1000);
      nah, yang angka itu coba agan sesuaikan sendiri :)

      Delete
  7. Kesalahan saat mengurai XML, baris 588, kolom 1: The end-tag for element type "script" must end with a '>' delimiter

    itu keslahan yg dibilang google...
    apa sarannya..?

    ReplyDelete

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.