Memasang Efek Animasi Loading Blog Keren

Memasang Efek Animasi Loading Blog Keren

Snippet

08.39

Indzgn - Banyak blogger yang sekarang memasang efek animasi loading pada blognya, hal itu guna menunggu proses loading pada suatu halaman. Ada banyak juga efek animasi keren yang beragam digunakan untuk mempercantik tampilan blog. Dan pada artikel ini, saya akan memberikan satu efek animasi keren untuk mempercantik blog kamu.

Sebelum ke tutorial, kita pelajari dulu apa itu Animasi Loading, Animasi Loading merupakan proses dimana saat blog kita sedang menuju ke halaman atau URL tertentu, maka disitulah efek animasi ini bekerja dan menunggu sampai proses loading selesai.

Berikut tutorialnya.

Memasang Efek Animasi Loading Blog Keren

1. Login ke akun Blogger kamu, kemudian masuk ke Template, dan klik Edit HTML, setelah itu tambahkan kode di bawah ini di atas  ]]></b:skin> atau </style>

/* CSS Loader Keren by indzgn.blogspot.com */
#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)}
}

2. setelah itu, letakan kode di bawah ini tepat diatas kode </body>

<div id='loadhalaman'>
<div class='loadball'/>
<div class='loadball-2'/>
</div>
<script type='text/javascript'>
$(function() {
  var siteURL = "http://" + top.location.host.toString();
  var $internalLinks = $("a[href^='" + siteURL + "'], a[href^='/'], a[href^='./'], a[href^='../']");
  $internalLinks.click(function() {
    $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
  });
  $('#loadhalaman').click(function() {
    $(this).hide();
  });
</script>

3. Langkah terakhir, simpan template kamu dan lihat hasilnya.

Result

Demikian informasi yang saya bagikan mengenai cara Memasang Efek Animasi Loading Blog Keren, semoga bermanfaat. Jangan lupa share artikel ini ke sosial media kamu. Terimakasih.

08.39