Membuat Loading Page Di Blog

Salam jumpa lagi dengan saya, share posting ini sudah banyak dibahas di Dunia Maya, Saya hanya ikut meramaikan saja untuk bisa berbagi dengan sobat semua. Effect Loading Page ini sebuah widget yang hanya menunda waktu Loading baik saat pertama kali membuka Web atau membuka halaman Blog, dengan Script yang boleh dibilang simple.

Cara-nya :
Login ke Blogger
Klik Monetize -> Template -> Edit HTML (jangan lupa back-Up template)
Cari Kode </b:skin> (gunakan Ctrl+F)

Copy Paste kode CSS dibawah ini sebelum Kode Tag </b:skin>

#loading {
position: fixed;
z-index: 50;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxeqgsSleCTd5_n5GnRTSE9mDtb5xCAnKg1VAlb6dX971HnOtT6rURdxAhfhHVSbeEbevSGbUMFM1qQlwCwzN39SXW1gO9fSYWfdWWSzH3VnA-x6BatIpxAHfXXxlefR_q3sK1DEbuKU/s1600/ajax-loader.gif) no-repeat center;
line-h eight: 350px; 
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;
}
.wwy #loading {
display: none;
}
#progress-bar {
position: absolute;
top: 0;
left: 0;
background: #eee;
opacity: 0.8;
width: 0;
height: 18px;
}

Karena ini menggunakan Javascript jadi tambahkan Kode dibawah ini sebelum TAG </head>

<script type='text/javascript'>
(function($){$("html").removeClass("wwy");
 $("#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>

Agar berfungsi tambahkan Kode TAG berikut ini sesudah TAG <body>

<div id='loading'> <div id='progress-bar'> </div> </div>

Apabila dipergunakan hanya untuk Halaman Utama memakai TAG Kondisional cara-nya seperti ini

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

Semoga Share posting ini bisa menambah pengetahuan sobat semua. terima kasih

mini Google

Membuat Loading Page Di Blog

Post a Comment