Xivanki Share !!: Membuat Animasi Loading di Blog

Membuat Animasi Loading di Blog - Selamat datang di situs media global terbaru Xivanki, Pada halaman ini kami menyajikan informasi tentang Membuat Animasi Loading di Blog !! Semoga tulisan dengan kategori blogging !! widget !! ini bermanfaat bagi anda. Silahkan sebarluaskan postingan Membuat Animasi Loading di Blog ini ke social media anda, Semoga rezeki berlimpah ikut dimudahkan Allah bagi anda, Lebih jelas infonya lansung dibawah -->

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.