Membuat Efek Loading Halaman Blog

Cara membuat efek loading halaman blog ketika memuat halaman - memodifikasi blog dengan salah satu efek ini mungkin akan sangat bermanfaat dan bahkan bisa membuat loading sedikit lebih cepat dari sebelumnya.efek ini hampir sama dengan efek animation dengan @keyframes . nah apa sih yang di maksud dengan loading halaman blog? seperti pada blog ini jika anda membuaka salah satu link pada blog ini maka loading akan muncul ketika memuat halaman. untuk jelasnya lagi anda coba pasang pada blog anda.

CARA MEMASANG PADA TEMPLATE BLOG

1. Simpan jquery di atas code </head> :

Jika pada template anda sudah menggunkan jquery yang sama maka code ini tidak perlu di masukan kembali. dan usahakan versi jquery mengunakan jquery v1.7.1 ganti versi yang lama

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

2. Simpan CSS di Atas ]]</skin> :

/* LOADING */
#muat-halaman {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000;
    z-index: 9999;
    text-align: center;
    width: 100%;
    height: 100%;
    padding-top: 200px;
    font-size: 25px;
    color: #fff;
    display: none;
}

3. Simpan HTML di Atas </body> :

<div id='muat-halaman'>
<span style='font-size:70px;font-weight:bold;'>Please Wait ..</span><br/>
    To Open!<br/>The Page Is Being Loaded<br/><a href='http://www.under-88.blogspot.com' style='position:absolute;bottom:0;right:0;font-size:8px;color:#fff!important'>link</a></div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#muat-halaman').fadeIn(800).delay(8000).fadeOut(1200);
    });
    $('#muat-halaman').click(function() {
        $(this).hide();
    });
});
//]]>
</script>

4. Terakhir simpan template anda dan lihat hasilnya dengan mengklik salah satu link internal blog anda dan jangan gunakan atribut target="_blank".

---

Post By : denzdii