Tuesday, 10 September 2013

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.

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

19 komentar

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

ngak buat berat blog gan..
#salam damai

dari STAR-US
come back..

mantap gan, lumayan nih buat mempercantik blog :D

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

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

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

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

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

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

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