Cara Membuat Animasi Loading Di Blogger

Hallo Gay Kali Ini Saya Pengen Shere Cara membuat Animasi Loading ,Animasi Loading Ini Adalah animasi untuk memperkeren blog saja.Kamu Pengen Gak Code Ini,Ngobrol Dulu Lah Baru Sama Saya kasih tau cara membuat animasi loading blogger Pasti Kamu Ingin ya Mau Ayo Kita coba bisa apa engga yuk...!!!

Nah kalo mau di pasang langsung aja berikut tutorial nya



CSS :
CSS dibawah ini di pasang tepat di atas ]]></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(240 ,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(240 ,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(240 ,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(240 ,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); }}

Script Animasi :
Pasang Script Animasi dibawah ini tepat di atas code </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>

Jquery :
Pasang JQuery ini di atas code </head> ( Pasang kalo belom ada JQuery di template kamu )

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

Keterangan:
Pada code CSS , Kamu ganti code yang berwarna merah dengan code warna mu sendiri.
Tapi kalo ga di ganti juga gpp , cuman hasil nya ntar warna merah

Backlink Please !

URL

Code For Forum

HTML Code <a href='https://derdzyozzer.blogspot.com/2013/04/cara-membuat-animasi-loading-di-blogger.html' target='_blank'>Cara Membuat Animasi Loading Di Blogger</a>

Sobat Sekarang Sudah Baca Artikel Tentang Cara Membuat Animasi Loading Di Blogger Sobat Bisa Menemukan Artikel Cara Membuat Animasi Loading Di BloggerSaya Ini, dengan url https://derdzyozzer.blogspot.com/2013/04/cara-membuat-animasi-loading-di-blogger.html, Kamu Juga Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Cara Membuat Animasi Loading Di Blogger ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Cara Membuat Animasi Loading Di Blogger Sumbernya. Thank's