Membuat Efek Tampilan Loading Halaman Pada Blogspot park 2

Yowes, biar makin jelas bisa Sobat lihat Demonya dibawah ini:

http://static.int.crazydavinci.net/images/loading.gif

Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:

1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu 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(URL_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 URL_GAMBAR_ANDA
Gantilah gambar loading blognya sesuai kreasi sobat.

5. Bagian kedua yaitu menambahkan script JQuery, cari kode </head> dan taruh script JQuery berikut tepat diatasnya:

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

Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.

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 lanjut untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'/>
<div id='loader'><img src='http://static.int.crazydavinci.net/images/loading.gif'/></div>
</div>
</b:if>

7. Simpan template dan lihat hasilnya.

Oh iya ada yang kelupa'an.. Efek loading yang baru kita buat tadi hanya ber Efek pada "Home page" blog saja.

jadi kalo sobat mau efek loadingnya di seluruh halaman blog sobat. ganti kode yang di atas dengan kode ini :

<div id='loading'>
<div id='progress-bar'/>
<div id='loader'><img src='http://static.int.crazydavinci.net/images/loading.gif'/></div>
</div>

Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini. (tetaplah berimajinasi)

Galauers

Membuat Efek Tampilan Loading Halaman Pada Blogspot park 2

0 komentar:

Posting Komentar

Followers

Populer POST

ALL POST