Cara buat Animasi Loading blog keren

     hallo gan , sebelum nya saya sudah buat artikel yang baru saja say buat yaitu Daftar Isi Blog Stylish Drop Down Revolution. Tapi kalau yang sedang saya posting adalah Cara buat Animasi Loading blog keren .

Sebenar nya cara ini sudah ada yang pakai dan sekarang juga sudah ada yang buat artikel seperti ini juga . Kalau sobat mau lihat sumber nya lihat saja di bawah ! Cara ini cukup membuat blog sobat jadi keren dan buat blog sobat agar jadi lebih cepat saat di akses internet .
Kalau sobat mau langsung aja . Check This Out .

1. LOG in ke blogger sobat
2. template > EDIT HTML
3. cari kode ]]></b:skin>   dan copy kode di bawah tepat di atas kode ]]></b:skin>

#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. pasang JUERY 1.7.2 di bawah ini tepat di atas kode </head> " pasang jika belum ada "

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

5. 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>

6. pratinjau dahulu dan lihat hasil nya

demo !

Nah mudah sekali kan ? kalau masih ada salah tolong koment di bawah ya !! . Wassalam .

SUMBER : www.om-dayz.blogspot.com dan www.sch-xp.blogspot.com

Tinggalkan jejak anda berupa saran atau komentar

karna saran anda sangat berharga bagi saya

Follow Us:

@azharyfauzan1

@bloggerfauzan

Author : Fauzan Hibatullah Ashari

Share this

Related Posts