Membuat Animasi Loading di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

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.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Membuat Animasi Loading di Blog, Diterbitkan oleh scodeaplikasi pada Selasa, 07 Oktober 2014. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.