Membuat Efek Loading Halaman Blog

membuat 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".

license by under 88 blogspot.com
Post By : denzdii

4 comments:

  1. Kalo yang kayak di blog ini??
    bisa nga? yang cuman gambar loading kecil aja...

    ReplyDelete
  2. Mantab tipsnya, thanks banget ya for sharing :)

    ReplyDelete
  3. gagal bos gimana ni udah dites pa belom

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top