Blogger sitenizde sayfalar arası geçişte yüklenme görseli hazırlamak istiyorsanız aşağıdaki yöntemi deneyebilirsiniz.
Tema > HTML'i Düzenle yolunu takip ederek
CSS kodunu
</head> veya </head><!--<head/>--> kodunun bir satır üzerine ekleyin.
<style type='text/css'>/*<![CDATA[*/#PreLoader{background:#f5f5fa;overflow:hidden;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}#loader-status{width:50px;height:30px;position:fixed;left:50%;top:50%;margin:-25px 0 0 -15px}.spinner{margin:0 auto;width:50px;height:30px;text-align:center;font-size:10px}.spinner > div{background-color:#4267b3;height:100%;width:6px;display:inline-block;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}.spinner .rct2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.spinner .rct3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.spinner .rct4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.spinner .rct5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}@-webkit-keyframes stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1.0)}}@keyframes stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}}/*]]>*/</style>
Sayfa ön yükleme HTML kodunu <body> kodunun bir satır altına ekleyin.
<div id='PreLoader'><div id='loader-status'><div class='spinner'><div class='rct1'></div><div class='rct2'></div><div class='rct3'></div><div class='rct4'></div><div class='rct5'></div></div></div></div>
Aşağıdaki jQuery kodunu </body> veya <!--</body>--></body> kodunun bir satır üzerine ekleyin.
<script type='text/javascript'>//<![CDATA[$(window).load(function(){$(".spinner").fadeOut(),$("#PreLoader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});//]]></script>
Eğer sayfanız hızlı yükleniyorsa bu kodu kullanmanıza gerek yoktur.
Hiç yorum yok:
Yorum Gönder