Cara Membuat Animasi Loading Blog Lebih Menarik

http://1.bp.blogspot.com/-16ykwgrgApo/UOjv_kvo6xI/AAAAAAAAAbs/PeIN8rOwc0E/s320/circle.jpg

 Cara Membuat Animasi Loading Blog Lebih Menarik - Tips Blog Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger.


Nah sore ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren, tutorial ini sudah terbuktu berhasil 100% jika anda baca dengan teliti. Ok tanpa basa-basi simak langkahnya berikut ini :
Note : Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda, supaya jika ada kesalahan HTML bisa di upload template yang dulu anda pakai.
  1.  Login ke akun blogger anda
  2. Klik Template » edit HTML
  3. Tambahkan kode CSS berikut di atas kode ]]></b:skin>
Animasi Loading Part, 1 Berwarna Merah
#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 rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);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 rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);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 rgb(255, 0, 0)}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 rgb(255, 0, 0)} 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); }}

4. Kemudian tambahkan kode jquerty ini diatas kode </head>, jika dalam template kalian sudah terpasang jquerty maka tidak perlu lagi tambahab jquerty tersebut, agar proses efek loading lancar.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
5. Dan langkah terakhir pasang kode di bawah ini  tepat di atas kode </body>
<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</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);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
$('#loadhalaman').click(function() {
$(this).hide();
});
});
</script>
referensi dari setyabloggerslalu.blogspot.com/
Anda boleh mencopy paste artikel ini dengan syarat mencantumkan link blog ini sebagai sumbernya !!! Jika anda menemukan masalah tentang Cara Membuat Animasi Loading Blog Lebih Menarik bisa anda tanyakan dengan berkomentar di bawah.

16 komentar untuk "Cara Membuat Animasi Loading Blog Lebih Menarik"

  1. tutorial yang menarik..nice post masbroo

    BalasHapus
  2. wahhh keren bgt dachhh tuchhh
    sukses ajh dachh gan

    BalasHapus
    Balasan
    1. makasih sob :D aminn sob :D semoga sobat juga sukses selalu :D

      Hapus
  3. Balasan
    1. silahkan gan, haha biar tambah keren blog agan ini, haha

      Hapus
  4. Keren nie kalau dipake... Makasih tutornya

    BalasHapus
    Balasan
    1. haha keren banget sob, iya sama-sama :)

      Hapus
  5. Pengen liat demonya dulu biar bisa ngetes

    BalasHapus
  6. gan boleh liat demo nya gak..?? maaf yaa

    salam kenal

    DEDY TUUK Blog Sharing™

    BalasHapus
    Balasan
    1. http://santa-mars.blogspot.com/2012/08/sms-ucapan-kata-kata-lebaran-idul-fitri.html lalu buka lagi artikel yang lainnya

      Hapus
  7. gan aku coba di blog aku bisa, tapi kok slide pada menu utama blog aku kok gag jalan ya,,,,
    solusinya gimana,,,,

    BalasHapus
  8. Cariin cara buat gambar sayap malaikat jatuh di blog dong...

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top