Membuat Animasi Loading di Blog

10/07/2014 Blogger JQuery
Loading Blog

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.

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

14 comments

kok aq malah dibawah ya munculnya bukan pas lagi loadingnya mas

Balas

mas gunanya konversi kode diatas kolom komentar ini apa ya

Balas

Mungkin salah dalam meletakkan Kode Mas

Balas

Itu untuk konversi kode jika komentar kita memasukkan kode atau link, karena dalam komentar disini tidak diprbolehkan memasang link aktif

Balas

tips dan trikyang anda berikan pada web inisangat bermanfaat sekali semoga website anda sukses dan bisa banyak menarik pengunjung sehingga traffik website pun bisa ikut naikotomatis akan membuatwebsite bisa menjadiperingkat 1 di gogle dan puas deh semua hasil optimasinya websitenya

Balas

Cialis




Cialis




Cialis



Cialis



Cialis



Cialis



Cialis



Cialis It?s Actually A Nice And Helpful Piece Of Information. I Am Happy That You Shared This Helpful Information With Us. Please Stay Us Up To Date Like This. Thanks For Sharing.

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh 8 bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari awak
 
Hubungi kami sekarang
E-mel: trustloan87@gmail.com
 
Mr.Anthony Dave.
Ketua Pengarah

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh 8 bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari awak

Hubungi kami sekarang
E-mel: trustloan87@gmail.com

Sir Anthony Dave.
Ketua Pengarah

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh 8 bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari awak
 
Hubungi kami sekarang
E-mel: trustloan87@gmail.com

 
TERBAIK BERHUBUNG,
Mr.Anthony Dave.
Ketua Pegawai Eksekutif (CEO)
Amanah Pinjaman Syarikat (ALC)
E-mel trustloan87@gmail.com

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh lapan bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari Anda
 
Hubungi kami sekarang
E-mel: trustloan87@gmail.com

 
Anggaplah terbaik,
Mr.Anthony Dave.
Ketua Pegawai Eksekutif (CEO)
Amanah Pinjaman Syarikat
E-mel trustloan87@gmail.com

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh 8 bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari awak
 
Hubungi kami sekarang
E-mel: trustloan87@gmail.com

 
TERBAIK BERHUBUNG,
Mr.Anthony Dave.
Ketua Pegawai Eksekutif (CEO)
Amanah Pinjaman Syarikat
E-mel trustloan87@gmail.com

Balas

* Adakah anda memerlukan pinjaman segera?
* Bayaran balik Mothly bermula dalam tempoh 8 bulan selepas anda telah mengumpul pinjaman dalam akaun bank anda.
* Kadar faedah yang rendah 2%
* Pembayaran balik jangka panjang (1-30 tahun) tempoh.
* Terma pinjaman yang fleksibel dan bayaran bulanan.
* Berapa lama masa yang diambil untuk membiayai? Selepas mengemukakan permohonan pinjaman
Anda boleh mengharapkan jawapan yang awal kurang daripada 24 jam, dan ***.
*** Pembiayaan dalam 72-96 jam selepas menerima maklumat yang kami perlukan.
dari awak
 
Hubungi kami sekarang
E-mel: trustloan87@gmail.com

 
TERBAIK BERHUBUNG,
Mr.Anthony Dave.
Ketua Pegawai Eksekutif (CEO)
Amanah Pinjaman Syarikat
E-mel trustloan87@gmail.com

Balas