Membuat Animasi Loading di Blog

Published by Kang Fathur Tuesday, October 07, 2014

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>
 

Semoga bermanfaat.