-->
Home
Blogging
Widget

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.

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.

Post a Comment