Blogger Okuma İlerleme Göstergesi (Read Meter)

Eğer çok uzun yazılar yayınlıyorsanız okuyucularınız için bu eklentiyi kullanmanızda fayda var. Açıkçası ben bazen uzun yazılar okurken yazının bitmesine ne kadar kaldığını merak ediyorum. Lafı uzatmadan nasıl yapılacağını anlatayım.

1. Adım
İlk olarak Blogger > Tema > HTML'yi Düzenle kısmına girip </head> kodunu bulalım ve aşağıdaki CSS kodlarını hemen üstüne yapıştıralım.

[<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. Adım
</body> kodunu bulalım ve hemen üstüne aşağıdaki JS kodlarını yapıştıralım.

[<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. Adım
Son olarak <body ya da <body> kodlarını aratıp bulalım ve bu kodun bir satır altına aşağıdaki HTML kodlarını yapıştıralım.