-->
Home
Blogging
Widget

Loading Page Blogger

1 minute read
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.

Loading Page Blogger

Tutorial

  1. Login ke Blogger
  2. Klik -> Template -> Edit HTML (jangan lupa back-Up template)
  3. 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/AVvXsEjdoxldiXoZjKUZ-3KTvE0HujlykYkucLGjZiyT3bD9xOePHCleWSxaEdDiUQbg09P7PjKxGqb8FjKqhOONThfcoQbqEyv1rg1aWrlGmBS4OBUtFSqFp-roDOPk-TD3zm9JdHm5rn_vWvM/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>
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>
</b:if>
Semoga Share posting ini bisa menambah pengetahuan kita semua. Salam Anarchyta...

Post a Comment