Biar makin jelas bisa para blogger lihat demonya di bawah ini:
Tertarik ?! bagi yang tertarik untuk membuatnya silahkan ikut step by step berikut :
1. Seperti biasa login dulu blogger sob!
2. Go to Template > Edit HTML
3. Lalu cari kode ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.
supaya lebih mudah tekan Ctrl + F
#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
atau bisa ambil di bawah ini:
https://lh6.googleusercontent.com/-XK_odBJqK2Y/UviQzol7fVI/AAAAAAAAAck/8fS9j-YmBLQ/s426/loading.gif
bisa juga tidak di pakai ?!
4. cari kode </head> dan taruh scrip JQuery berikut tepat diatasnya:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
kalau scrip JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
kemudian tambahkan lagi script berikut diatasnya:
<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>
5. next lanjut 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>
6. simpan template dan lihat hasilnya.
Tambahan:
ingat, untukhasil yang sudah kita buat diatas itu efek loadingnya disetiap halam yang kita bukak!
jadi bagi kalian yang hanya ingin tampilan loadingnya hany di homepagnya saja, silahkan ganti HTML pada langkah No.5 dengan kode di bawah 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, selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blog semoga sukses
Penulis : Irmansah
Ditulis Oleh : irmansah ~ Tips dan Trik Blogspot
Sobat sedang membaca artikel tentang Membuat Efek Tampilan Loading Halaman Pada Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya