Bu yazımızda sizlere Web Sitenize veya Blog Sayfanıza "Sayfa Yükleniyor" eklentisi eklemeyi anlatacağım. Öncelikle Sayfa Yükleniyor (Loading Page) Nedir? Web Site veya Blog Sayfasındaki Etkisi Nelerdir? biraz bundan bahsetmek isterim.
Sayfa Yükleniyor (Loading Page) Nedir?
Görsel yoğunluğu ve sayfa uzunluğu fazla olan sitelerde, sayfaların daha hızlı açılmasını sağlayacak ek bir JavaScript dosyasının kullanımıdır. En geniş anlamıyla ihtiyaç duyulmayan bir nesnenin çağrılmaması durumudur. Bu özellik sayesinde kullanıcı bir sayfayı açtığında tüm resimlerin yüklenmesinin önüne geçilir. Bu sayede de daha hızlı açılan sayfalara sahip olursunuz.Sayfa Yükleniyor (Loading Page) Faydaları Nedir?
Sayfa Yükleniyor'un tek faydası elbette site hızının artırılması değildir.- Site hızına bağlı olarak sitenizin performansını artırır.
- Hızlı açılan sayfalar kullanıcıların sitenizde daha fazla vakit harcamasını sağlar. Böylelikle sitenizin hemen çıkma oranı düşer.
- Aşırı kaynak kullanımının önüne geçilir. Yalnızca kullanıcının görüntülediği alanlar sunucu kaynağından tüketilir.
- Hızlı açılan sayfalar kullanıcılara daha iyi bir deneyim sunar. Sitenizin sunduğu kullanıcı deneyiminin iyileşmesi de sıralamalarınızı etkiler. Böylelikle hem kullanıcı dostu hem de arama motoru dostu bir web sitesi inşa etmeniz kolaylaşır.
Sayfa Yükleniyor hakkında temel bilgi sahibi olduğumuza göre artık Sayfa Yükleniyor yapımına geçebiliriz. Öncelikle Blogger'a Giriş yapın ardından Tema > HTML'yi Düzenle adımlarını takip ederek Kod Editörünü açın. Kod Editöründe CTRL + F tuş kombinasyonu ile <body> tagını aratın. Bulduğunuz <body> tagının bir satır altına aşağıdaki HTML Kodunu ekleyin.
HTML Kodu
<div class='sayfa-yükleniyor sayfa-yükleniyorhd' id='yukleniyor'>
<center>
<div class='yukleniyor_resim'>
</div>
</center>
</div>Şimdi ise Kod Editöründe yine CTRL + F tuş kombinasyonu ile </style> tagını aratın. Bulduğunuz </style> tagının bir satır üzerine aşağıda vermiş olduğum CSS Kodunu ekleyin.
CSS Kodu
div.sayfa-yükleniyor center {
display: table-cell;
vertical-align: middle;
}
div.sayfa-yükleniyor {
filter:alpha(opacity=90);
position:fixed;
z-index:4000;
text-align:center;
}
div.sayfa-yükleniyorhd {
top:0px;
left:0px;
}
div.sayfa-yükleniyor {
_position:absolute;
}
div.sayfa-yükleniyorhd {
_bottom:auto;
_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );
}
div#yukleniyor{
background-color:#eee;
width:100%;
height:100%;
display:table;
}
.yukleniyor_resim {
background-image: url(https://i.hizliresim.com/BaWVyQ.gif);
background-size: 130px;background-repeat: no-repeat;
padding: 0px;
margin: 0px;
background-color: transparent;
border: none;
width: 130px;
height: 62px;
}NOT: Yukarıdaki CSS Kodunda belirtilen yerdeki linki kendi tercihinize göre değiştirerek sayfada görünen Sayfa Yükleniyor Gif dosyasını değiştirebilirsiniz.
Css Kodunu ekledikten sonra tekrar Kod Editöründe CTRL + F tuş kombinasyonu ile </body> tagını aratın. Bulduğunuz </body> tagının bir satır üzerine aşağıdaki JavaScript Kodunu ekleyin.
JavaScript Kodu
<script type='text/javascript'>
window.onload = function() {
document.getElementById("yukleniyor").style.display="none";
}
</script>Yukarıdaki adımları tamamladıktan Temayı Kaydet butonuna tıklayın.
Blogger Sayfa Yükleniyor Eklentisi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
