Salam jumpa lagi dengan Go Blog Go, share posting ini sudah banyak dibahas di Dunia Maya, Saya hanya ikut meramaikan saja untuk bisa berbagi dengan Mojang dan Bujang. Effect Loading Page ini sebuah widget yang hanya menunda waktu Loading baik saat pertama kali membuka WebBlog atau membuka halaman Blog, dengan Script yang boleh dibilang simple.
Cara Pemakaian-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/AVvXsEhlUsA0xTn9FJmcZZcWM-HshrGn23Cm7gO2FW6-qTLug4s3vAoYBKaPu7hw2D6xeL2LzXlalFmyA1C0MJiy4Pu-BWYA7phmeEs6x9LrsE1mGOhBmqjAvmB6PWw7roQqET7oENKFntRzV7Y/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 Script 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 Mojang dan Bujang. Go Blog Go...!!! Amiin
Wassalam,
dank 4 infox!!
ReplyDeleteSama-sama Nona Neon, kalau artikel ini ada guna dan manfaat-nya. Trima kasih atas kunjungan-nya. Salam
Delete