Template dan Tips Seputar Blogger

Wednesday, June 21, 2017

Memasang Efek Animasi Loading di Blog

Memasang Efek Animasi Loading di Blog - Rata-rata para Blogger sekarang sudah banyak yang menggunakan Animasi Loading agar blognya terlihat menarik dan keren.

Memasang Efek Animasi Loading di Blog

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 Memasang Efek Animasi Loading di Blog.

Langkah-langkah untuk Membuat Animasi Loading di Blog


Login ke blogger, Pilih Rancangan / Template, kemudian Edit HTML Cari kode ]]></b:skin> Jika sudah ketemu lalu letakan kode berikut di atas kode ]]></b:skin> atau </style>

/* CSS Loader Keren */
#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)}
}

Jika sudah, Cari kode </body> lalu letakkan kode berikut 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>

Langkah Terakhir, simpan template.


Demikian trik sederhana Memasang Efek Animasi Loading di Blog, semoga bermanfaat.

Berikan tanggapan Anda
EmoticonEmoticon

Adblock Detected

Like this blog? Keep us running by whitelisting this blog in your ad blocker

This is how to whitelisting this blog in your ad blocker

Thank you

×