Dalam hari ini taukahbahwa.blogspot.com akan membahas posting tentang Loading Page Blogger. Semoga dengan berita Loading Page Blogger akan menambah pengetahuan bagi anda pembaca setia taukahbahwa.blogspot.com
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>Cara-nya :
Login ke Blogger
Klik Monetize -> Template -> Edit HTML (jangan lupa back-Up template)
Cari Kode </b:skin> (gunakan Ctrl+F)
css
#loading {
position:fixed;
z-index:50;
top:0;
left:0;
width:100%;
height:100%;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__qMTQ-jyp-0SRncrLptktiLbjJOfoYwu8D1ia5N8mQ3C0kaoP6Hb547D_l25h_2gJfXnwSf_TMZCZtaEmDRY_oPzZYS9AmWHEDaAIMqMzNoXOcUaIBHbrIxSaQIDs4d8Gsra33fhFc4/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>
javascript
<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>
Dapatkan berita terupdate dan unik setiap saat hanya di taukahbahwa.blogspot.com
Homepage|http://taukahbahwa.blogspot.com
No comments:
Post a Comment
jangan lupa tinggalkan komentar .... trimakasih atas kunjungannya