Membuat Loading Blog Fast Dengan Rotation Ball Keren Versi 2 blue

Assalamualaikum sahabat blogger, jika sebelumnya NB menulis posting Membuat Loading Blog Fast Dengan Rotation Ball Keren red pada kesempatan kali ini saya share Membuat Loading Blog Fast Dengan Rotation Ball Keren Versi 2 blue .

Membuat Loading Blog Fast Dengan Rotation Ball Keren

Sumber: http://nyiaran.blogspot.com/2014/02/membuat-loading-blog-fast-dengan.html
Terima Kasih | Nyiaran Blog - Belajar Dunia Online.

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'/>

Catatan: Cari dulu jQuery di atas di blog anda, jika sudah terpasang anda bisa lewati langkah diatas.

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.

Sumber;http://the-anarchyta.blogspot.com/2013/11/membuat-animasi-loading-di-blog.html