Cara Membuat Efek Loading Pada Blog

Assalamualaikum wr.wb. Kali ini saya akan share tentang Cara Membuat Efek Loading  Pada Blog . Efek satu ini berguna untuk memperindah blog saat loading jadi kita bisa mengurangi rasa bosan pengunjung saat blog kita masih dalam proses loading.

Pada kesempatan kali ini saya akan share load effect yang saya gunakan pada blog berbahasa inggris saya
dan jika ingin lihat-lihat/pratinjau lihat klik tombol ini

Demo

Jika anda tertarik untuk memasangnya juga ikuti langkah-langkah berikut

cara pemasangan

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode ]]></b:skin> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi

#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); }}

Step 5 Pastekan kode berikut diatas  //<![CDATA[

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

jika kode ini  sudah ada di blog anda maka lewati langkah ini (versi berapun )

Step 6 Cari kode </body>  lalu pastekkan kode ini diatasnya

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

Step 7  Simpan lalu cek bog anda untuk melihat hasilnya


jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.