Membuat Efek Loading pada 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. 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 di 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".

0 komentar:

Posting Komentar






Selamat Datang di Blog MainTracker™
 
Free Joomla TemplatesFree Blogger TemplatesFree Website TemplatesFreethemes4all.comFree CSS TemplatesFree Wordpress ThemesFree Wordpress Themes TemplatesFree CSS Templates dreamweaverSEO Design