Skip to main content

MEMBUAT LOADING PAGE

Assalamu'alaikum Wr. Wb...
gimana kabarnya sobat ?? baik kan...??
nahh di sore yang agak mendung ini saya mau berbagi tentang bagaimana caranya membuat loading page atau halaman loading...

 masih bingung dengan apa yang dimaksud loading page atau halaman loading ??
contohnya ya seperti ketika kalian masuk ke beranda atau homepage blogku ini, coba dilihat-lihat...
cukup asik bukan...
nahh, tertarih ??
kalau tertarik silahkan simak cara membuatnya berikut ini :)

 1. Login seperti biasa sob ke akun bloggernya
2. kalau blogger lama masuk Design/Rancangan > Edit HTML, kalau blogger tampilan baru masuk template > edit HTML, lalu jangan lupa centang pada "Expand Widget Templates"
3. cari kode  ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.


#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(alamat gambar anda) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
 
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(<span style="background-color: #ea9999;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:
Perhatikan kode CSS diatas untuk alamat gambar anda 
Gantilah dengan alamat gambar loading yang telah anda upload sesuai selera dan kreasi anda.

5. Bagian kedua yaitu menambahkan script jquery, cari kode </head> dan taruh script berikut tepat di atasnya:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Kalau script di atas sudah ada di blog anda ya tidak usah dicopy alias langkah ini bisa dilewati

Kemudian tambahkan lagi script berikut dibawahnya:


<script>
(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
 
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

6. Next, selanjutnya untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.


<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>

7. Simpan template dan lihat hasilnya.

Tambahan:
Perlu dicatat, untuk hasil yang sudah kita pelajari diatas itu efek loadingnya adalah disetiap halaman yang kita buka!
Jadi, bagi kalian yang hanya ingin tampilan loading blognya hanya di homepagenya saja , silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
</b:if>

Selesai sob! Selamat mencoba Membuat loading page, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini.
Labels:

Comments

Post a Comment

Popular posts from this blog

MEMBUAT LOADING PAGE SAAT MASUK BLOG

selamat dini hari saudara :) setelah lama sekali vakum dari dunia per-bloging-an (haha alay) akhirnya bisa bloging dan berbagi lagi dengan kawan-kawan sekalian nah, kali ini saya akan berbagi tentang caranya "Membuat Loading Page Saat Masuk Blog" nah, kalau lihat judulnya saja, lihat kata-katanya "loading" pastinya sudah tau dengan yang saya maksud. Kalau belum tau, dicoba aja, nanti pasti tau juga, contohnya bisa lihat saat kalian mengakses blog ini dan sedang loading pasti keliatan ada animasi loadingnya :D :P ok, langsung ke TKP saja kawan :) 1. Login Blogger 2. Masuk ke menu Template 3. Pilih Edit HTML 4. cari kode </head> lalu paste kode berikut tepat diatasnya :) <!-- Loading Page Script --> <style type='text/css'> /* add loading image */ body { background:#4B4B4B url( http://fc03.deviantart.net/fs71/f/2013/003/6/9/partart_loading_boredoom_6_by_g2k2007-d5q8zyt.gif ) no-repeat fixed center; } /* hide page div */ #
3 comments
Selengkapnya >>