Popüler siteleri ziyaret ettiğinizde ekran görüntüsünün üst veya alt kısmında okuma göstergesi veya bir ilerleme çubuğu göstergesi görebilirsiniz. Okuma göstergesi, "okuma ilerleme çubuğu göstergesi" veya "ilerleme kaydırma çubuğu" olarak da adlandırabilirsiniz.
Bir sitedeki her ilerleme çubuğu göstergesi, diğer sitelere veya bloglara göre farklı görünebilir. Bazı web siteleri veya bloglar yatay okuma ilerleme çubuğu kullanır. Ancak bazı web sitelerinde veya bloglarda ilerleme çubuğu web tarayıcısının kaydırma çubuğuna benzer dikey şekildedir. Okuma ilerleme çubuğu, blog okuyucularını web sayfasındaki kalan metnin okuma veya aşağıya kaydırmak için ne kadar süre veya ne kadar kaldığını gösterir. Bu özellik, ziyaretçileri bir makalenin tamamını bir web sayfasında okumaya devam etmeye teşvik edecektir.
Bir blog siteniz varsa ve blogunuzun sayfalarına bir ilerleme çubuğu göstergesi eklemek istiyorsanız, bu yazımızda bir blog sitesine ilerleme çubuğu göstergesi nasıl ekleneceğini anlatacağım. Bununla birlikte, bir blog sitesine sayfa ilerleme çubuğu ve okuma süresi göstergesi eklemenin faydaları hakkında bilgiler de paylaşacağım.
Blog Sitesine Sayfa İlerleme Çubuğu ve Okuma Süresi Göstergesi Eklemenin Faydaları
Genellikle blog ziyaretçileri, blog sayfasında kalmaya ya da sayfayı terk etmeye karar vermeden önce sayfada birkaç saniye zaman geçirir. Ne sebeple olursa olun, blog ziyaretçilerinin çoğu, aradıklarını elde ettiklerini veya makalede ilginç şeyler buldukları sürece bir blogda uzun süre makale okumaya devam edeceklerdir. Bununla birlikte, bir blogda bir okuma ilerleme çubuğu göstergesi bulundurmadan öncesini ve sonrasını karşılaştırdığınız zaman sonuç, blog ziyaretçilerinin çoğunun daha uzun kaldığını ve makalenin sonuna kadar okumaya devam ettiklerini fark edeceksiniz.
Bunun yanında, bloga bir okuma ilerleme çubuğu göstergesinin eklenmesi, okuyuculara ne kadar sayfa uzunluğu kaldığını belirlemesine de olanak tanır. Dolayısla, makaleyi okumayı bitirmek için kabaca ne kadar kaldığı da tahmin ediliyor olacaktır. Ayrıca, bu tür küçük kullanıcı arayüzü geliştirme eklentileri sayesinde blog okuyucularınızın sayfanızı aşağıya kaydırmaya devam etmeye teşvik edeceksiniz ve aynı zamanda makaleyi sonuna kadar okunmaya motive edeceksiniz.
Birçok popüler web sitesinde böyle okuma ilerleme göstergeleri kullanılmaktadır. Bununla birlikte, bir okuma ilerleme çubuğu göstergesinin blog sitenizde düzgün çalışıp çalışmadığını da bilmelisiniz. Aksi halde, sitenizin kullanıcı deneyimini mahvedersiniz. Yani 1000 kelimelik bir blog yazısını okuma göstergesinde 600 kelime olarak gösterilmesi bir hatadır ve ziyaretçilerin güvenini kaybedebilirsiniz. Şimdi blog sitenize bir okuma ilerle çubuğu göstergesi eklemek için aşağıdaki adımları takip edin.
Blog Sitesine Okuma İlerleme Çubuğu Nasıl Eklenir?
Blogger hesabınıza giriş yapın ve blogunuzun kullanıcı panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın.
1- Klavyenizin CTRL+F tuşları yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin.
<b:if cond='data:view.isPost'>
<style>
#read_meter{position:fixed;width:100%;height:4px;left:0;bottom:0;z-index:1000001;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:#134}
progress#read_meter::-webkit-progress-bar{background-color:rgba(255,255,255,0.75)}
progress#read_meter::-webkit-progress-value{background-color:#2d2d2d}
progress#read_meter::-moz-progress-bar{background-color:#2d2d2d}
.percentage_number{position:fixed;width:46px;bottom:-8px;left:50%;left:calc(50% - 26px);z-index:10000001;padding:3px;font-size:0.7em;background:#313131;color:#fff;box-shadow:2px 2px 10px rgba(0,0,0,0.3);text-align:center;opacity:0;border-radius:4px;animation:popDown 0.2s forwards}
.percentage_number.display{animation:popUp 0.2s forwards}
.percentage_number::after{content:attr(title);display:inline-block}
@keyframes popUp{0%{bottom:-8px;opacity:0}100%{bottom:8px;opacity:0.7}}
@keyframes popDown{0%{bottom:8px;opacity:0.7}100%{bottom:-8px;opacity:0}}
</style>
</b:if>2- Aşağıdaki javaScript kodunu blogunuzun </body> kodunun bir satır üzerine ekleyin.
<b:if cond='data:view.isPost'>
<script>
// <![CDATA[
function readProgressMeter(){var winHeight=$(window).height(),docHeight=$('.post-body').height()+$('.post-body').offset().top,progressBar=$('#read_meter'),max,value;var percent_show=$(".percentage_number");var scrollTimer;max=docHeight-winHeight;progressBar.attr('max',max);$(this).on('scroll',function(){value=$(window).scrollTop()-$('.post-body').offset().top;progressBar.attr('value',value);var perCentage=((value / max)*100);var roundedPercentage=Math.round((Math.round(perCentage*100)/ 100));if(perCentage>=1&&perCentage<=101){clearTimeout(scrollTimer);progressBar.attr('title',"Okudunuz "+roundedPercentage+"% of the article, till now.");percent_show.addClass("display");if(perCentage<4){percent_show.css({'left':perCentage+"%",'margin-left':'0px'});}else if(perCentage>96){percent_show.css({'left':perCentage+"%",'margin-left':'-50px'});}else{percent_show.css({'left':perCentage+"%",'margin-left':'-28px'});}
percent_show.attr("title",Math.floor((Math.round(perCentage*100)/ 100))+"%");scrollTimer=setTimeout(function(){percent_show.removeClass("display")},700);}});}
$(function(){if($('body').length>0){window.setTimeout(function(){readProgressMeter();},1000);serve_adBlock_Notice();}});
// ]]>
</script>
</b:if>3- Aşağıdaki HTML kodları blogunuzun <body> kodunun bir satır altına ekleyin.
<b:if cond='data:view.isPost'>
<div class='percentage_number'></div>
<progress id='read_meter' value='0'></progress>
</b:if>Yukarıdaki adımları dopru bir şekilde tamamladıktan sonra sayfanızı kaydedin. Okuma ilerleme göstergesini kontrol etmek için blogunuzda bulunan herhangi bir makaleyi açın ve sayfayı aşağıya doğru kaydırın.
Blog Yazılarının Kelime Sayısı ve Tahmini Okuma SüresiAşağıdaki ön izleme butonuna tıklayarak okuma ilerleme çubuğu göstergesinin nasıl çalıştığını inceleyebilirsiniz.
Son Düşünceler
Bugünkü yazıda bir blog sitesine okuma ilerleme çubuğu göstergesi eklemenin kısaca değindik, şeffaflığı geliştirme ve okuyuculara zamanlarının daha verimli bir şekilde kullanmalarına yardımcı olmaya çalıştık.
Ayrıca, kurulumu ve kullanımının ne kadar kolay olduğunu gösteren kısa ipuçları ile blog sitesine okuma ilerleme göstergesinin nasıl eklendiğini de paylaştık.
Bu yazımızda paylaşılan bilgileri beğendiniz mi? Aşağıdaki yorum formlarını kullanarak görüşlerinizi bildirmeniz bize mutluluk verir.