Membuat Animasi Loading di Blog

Daftar Isi

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 blogger.com
Pilih Rancangan / Template, kemudian Edit HTML
Cari kode ]]></b:skin> Jika sudah ketemu lalu letakan kode berikut diatas kode ]]></b:skin>

<style type="text/css">
#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);
};
}
</style>

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^=&#039;&quot; + siteURL + &quot;&#039;], a[href^=&#039;/&#039;], a[href^=&#039;./&#039;], a[href^=&#039;../&#039;]&quot;);
$internalLinks.click(function () {
$(&#039;#loadhalaman&#039;).fadeIn(1500).delay(6000).fadeOut(1000);
});
$(&#039;#loadhalaman&#039;).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.