Singkat cerita setelah jalan-jalan di mesin
google ane menemukan fitur Loading Effect dengan JQuery yang menurut ane
menarik untuk di pasang di blog,, asal usul mencari pengalaman di blog
dunia dan ane coba ane sharing buat sobat blogger :D
Loading effect dengan jquery adalah mode loading yang di terapkan ketika
kamu membuka website atau blog kamu, dimana loading tersebut menarik
untuk kita pasang atau enak di lihat di website atau blog kamu.
Langsung aja ya .
-
Login blogger
-
Pilih Designe
-
Pilih Edit HTML
-
Jangan lupa Contreng Expand template widget agar
tidak terjadi kesalahan saat kamu edit..
-
Copy dan paste kode berikut ini di atas atau sebelum kode </head> .
-
gunakan Ctrl + F untuk memudahkan pencarian kode.
<style>
#md-loading {
position:
fixed;
z-index: 50;
top: 0; left: 0;
width: 100%; height: 100%;
background:
#FDFEF8
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_FjS6RNYUcvwwVq2Fi-buH8g8_mEw3LNo2um4vVmcWmtp_RQ0DO7-ovwuAVexaOZEE6oIx1MPytci-67LF2RJOaG4jxdHBc_vBacc5dyUdVPgEYbNRnuCfF3XmqodlGiO9v5xUnUygRpW/s1600/loading.gif)
no-repeat center;
line-height:
350px;
text-align:
center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.MD #md-loading {
display: none; }
@media only
screen and (device-width: 768px) {
#loading {
position:absolute;
width:1040px;
min-height:768px;
}
}
#md-progress-bar
{
position: absolute;
top: 0; left: 0;
background: #0d5ff6;
opacity: 0.8;
width: 0;
height: 18px;
}
#md-loader
{
height: 100%;
display: none;
}
</style>
<script>
(function($){
$("html").removeClass("MD");
$("#header").ready(function(){
$("#md-progress-bar").stop().animate({ width:
"25%" },1500) });
$("#footer").ready(function(){
$("#md-progress-bar").stop().animate({ width:
"75%" },1500) });
$(window).load(function(){
$("#md-progress-bar").stop().animate({ width:
"100%" },600,function(){
$("#md-loading").fadeOut("fast",function(){
$(this).remove(); });
});
});
})(jQuery);
</script>
- Sekarang cari kode </body>
- Sisipkan kode berikut di atas
atau sebelum kode </body>
<div
id='md-loading'><div
id='md-progress-bar'></div><div
id='md-loader'>Loading...</div></di
Save/Simpan template dan lihat hasilnya seperti di
bawah ini..
 |
Home
hmm
BalasHapus