Hergün onlarca siteye girip bir şeyler araştırıyoruz,okuyoruz.Ziyaret ettiğimiz site ve blogların birçoğunda okuduğumuz yazılara bağlı olarak ilerleyen bir eklenti mevcut.Bugün sizlere blogger okuma çubuğunu bloğumuza eklemeyi göstereceğim.
Öncelikle okuma çubuğu eklentisi nedir, bloğumuza eklemenin etkisi nedir bunların cevabını vereyim.Blogger durum çubuğu eklentisi çalışma mantığı olarak sayfa yüksekliğinin yüzdelik olarak ilerlemesinin grafiksel olarak gösterilmesidir.
Yapılan araştırmalara göre okuma çubuğu eklentisi olan sitelerin okuma çubuğu olmayan sitelere göre ziyaretçilerin makaleleri daha uzun süre okuduğu gözlemlenmiştir.Makaleyi okuyan kullanıcıların gözünün önünde ne kadar süresinin kaldığını gösteren bir okuma çubuğu eklentisi çok etkili olacaktır.
Aynı zamanda ziyaretçiler okuma çubuğu eklentisi sayesinde blogda gezinirken çubuk ilerlediğinde daha dikkat çekici bir hâl aldığı için bloğunuzun sonuna kadar ilerleyeceklerdir.
Birçok popüler ve kaliteli sitelerde ve bloglarda okuma çubuğu eklentisi kullandığı için bloğumuzu daha hoş ve profesyonel gösterecektir.
Bloğumuza okuma çubuğu eklentisi kurmak
1) İlk olarak bloğumuza giriş yapalım.Tema > HTML'yi düzenle kısmına gelelim.
2) Ctrl+F kombinasyonuyla <body>kodunu bulalım ve hemen altına aşağıdaki Html koddlarını ekleyelim. HTML Kodları
<div class='okumacubugu'>
<div class='cubuk' id='scroll'/>
</div>
3)Yine Ctrl+F yardımıyla arama kısmına </head>kodunu bulalım ve hemen üzerine aşağıdaki Css kodlarını ekleyelim. Css Kodları
<style type='text/css'>
.okumacubugu {
position:fixed;
width: 100%;
height: 8px;
background: #ccc;
z-index:1;
}
.cubuk {
height: 8px;
background: #42B6F3;
width: 0%;
}
</style>
4)Son olarak arama çubuğu kısmına gelerek </body>kodunu bulalım ve hemen üzerine aşağıdaki Javascript kodlarını ekleyelim. Javascript Kodları
<script type='text/javascript'>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("scroll").style.width = scrolled + "%";
}
</script>
Vermiş olduğum kodları doğru bir şekilde uyguladıysanız Temayı kaydet diyerek kaydedip bloğunuzu görüntüleyin.Sorunsuz bir şekilde çalışacaktır.Ben kendi bloğuma uygun olarak renklendirdim.Sizde kendi bloğunuzun tasarımına uygun olarak düzenlemek isterseniz .cubuk sınıfındaki background üzerinden renk değişikliği yapabilirsiniz.Aynı zamanda bu yazımda kullandığım yöntem ile sadece belirli bir alan içerisinde kullanabilirsiniz.
Demoyu görmek için lütfen sayfanın üst kısmına bakınız :)
Sona gelirken bu yazımda blogger okuma çubuğu eklentisinin bloğumuza yararı,çalışma mantığı ve nasıl bloğumuza kurulumu yapılması gerektiğinden bahsettim.Bu yazımı nasıl bulduğunuzu ve blogger durum çubuğu ile ilgili aklınıza takılan kısmı yorum olarak belirtirseniz elimden geldiğince yardımcı olmaya çalışırım.İyi bloglar.
0 Comments:
Yorum Gönder