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

Formalitas Kemerdekaan

Indonesia akan genap berusia 72 tahun pada 17 Agustus 2017 mendatang, tepat di hari Kamis. Seperti biasa, ramai-ramai gegap gempita nan meriah menghinggapi seluruh penduduk Indonesia. Bisa dilihat dari banyak dan meriahnya penyelenggaraan lomba-lomba di RT (Rukun Tetangga), RW (Rukun Warga), perkampungan, desa-desa, hingga sekaliber nasional pun turut memeriahkannya dengan rangkaian pagelaran lomba dan semacamnya. Belum lagi nantinya disambung dengan upacara bendera tepat di tanggal 17 Agustus-nya dan puncak peringatan kemeerdekaannya pula.
Post a Comment
Selengkapnya >>

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

Sophie dalam Media Sosial

Aku tengah merenung akan "viral"-nya pemblokiran salah satu media sosial, Telegram, dan rencana pemblokiran beberapa media sosial lainnya di Indonesia. Aku mulai membaca satu per satu tulisan-tulisan, artikel-artikel, opini-opini yang berkembang di mulai dari para akademisi, para aktivis, hingga para tokoh masyarakat dan pejabat-pejabat pemangku kebijakan. Kupahami dengan betul bagaimana pandangan mereka, kusimak dengan seksama perspektif yang mereka sampaikan, kuperhatikan betul bagaimana analisa yang mereka berikan. Diriku secara pribadi, mungkin bukan hanya aku, bahkan mungkin sebagian besar penduduk Indonesia sangat bergantung dengan media sosial dalam aktivitas hidupnya. Interaksi yang mereka jalin dengan kawan-kawan yang berada di jarak yang jauh untuk dijangkau, update informasi, dan berbagai  hal lainnya yang tentu "memudahkan" kita, manusia dalam berbagai hal. Setiap hal pastilah memiliki dampak positif dan dampak negatifnya, itu pula yang dialami oleh saha...
Post a Comment
Selengkapnya >>