Blog Yazılarının Kelime Sayısı ve Tahmini Okuma Süresi

12.7.17
Blogger Page Views Counter

Bu yazımızda blog ve web sitelerinde bulunan makale, metin veya yazıların kelime sayısını ve tahmini okuma süresini görüntülemek için basit bir jQuery eklentisi hakkında ipuçları paylaşacağım.

Blogger Timeago jQuery Eklentisi

Blog takipçilerinize sayfalarınızdaki yazıların toplam kelime ve okuma süresini göstererek blog yayınlarınız ile ilgili detaylı bilgi vermiş olursunuz. Diğer blog platformlarında olduğu gibi bu eklentide gösterilen bilgiler blog ziyaretçilerinin ilgisini çekecektir.

Blog Yazıları Okuma Süresi ve Kelime Sayısı Gösterme Eklentisi Nasıl Kurulur?

Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör sayfasını açın ve aşağıdaki adımları uygulayın. Şablon kodlarınız arasında aradığınız kodlara daha hızlı erişmek için, klavyenizin CTRL+F tuşlarından faydalanabilirsiniz.

Ön İzleme

Birinci adım: Aşağıdaki CSS kodları blogunuzun stil doyasına ekleyin. Blogunuzda bulunan ]]></b:skin> veya </style> kodunu bulun ve aşağıdaki CSS kodlarını ]]></b:skin> veya </style> kodunun bir satır üzerine ekleyin.

CSS
.content-reading-time {
    padding: 0 0 20px 0;
    margin: 0 0 20px 0;
}
.reading-time {
    background: #adb3b9;
    color: #fff;
    text-transform: capitalize;
    padding: 0 8px;
    float: left;
    font-size: 12px;
    border-radius: 2px;
}

İkinci adım: Blog sayfanızdaki yazıların tahmini okuma ve toplam kelime sayısı görüntüleme parametresini blogunuzun 'post-body' kodunun içerisine ekleyin.

HTML
<div class='content-reading-time'>
<span><p><small class='reading-time'><span class="eta"></span> (<span class="words"></span> kelime)</small></p></span>
</div>

Blogunuzda birden fazla <data:post.body/> kodu bulunabilir, bu neden aşağıdaki örnek kodda olduğu gibi yukarıdaki kodu aşağıdaki örnek kodda belirtilen yere 'item' içerik sayfası <data:post.body/> kodunun bir satır üzerine ekleyin.

Örnek Kodlama
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
.....
.....
<b:if cond='data:blog.pageType == &quot;item&quot;'>
KODU BURAYA EKLEYİN
<div itemprop='description'><p><data:post.body/></p></div>
</b:if>
.....
.....
</div>

Üçüncü adım: Aşağıdaki jQuery kodunu editör sayfanızda bulunan </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

Örnek Kodlama
<script type='text/javascript'>
//<![CDATA[
// Reading Time
;(function($){var totalReadingTimeSeconds;$.fn.readingTime=function(options){var defaults={readingTimeTarget:'.eta',readingTimeAsNumber:false,wordCountTarget:null,wordsPerMinute:270,round:true,lang:'tr',lessThanAMinuteString:'',prependTimeString:'',prependWordString:'',remotePath:null,remoteTarget:null,success:function(){},error:function(){}},plugin=this,el=$(this);plugin.settings=$.extend({},defaults,options);var s=plugin.settings;if(!this.length){s.error.call(this);return this;}
if(s.lang=='it'){var lessThanAMinute=s.lessThanAMinuteString||"Meno di un minuto";var minShortForm='min';}else if(s.lang=='fr'){var lessThanAMinute=s.lessThanAMinuteString||"Moins d'une minute";var minShortForm='min';}else if(s.lang=='de'){var lessThanAMinute=s.lessThanAMinuteString||"Weniger als eine Minute";var minShortForm='min';}else if(s.lang=='es'){var lessThanAMinute=s.lessThanAMinuteString||"Menos de un minuto";var minShortForm='min';}else if(s.lang=='nl'){var lessThanAMinute=s.lessThanAMinuteString||"Minder dan een minuut";var minShortForm='min';}else if(s.lang=='sk'){var lessThanAMinute=s.lessThanAMinuteString||"Menej než minútu";var minShortForm='min';}else if(s.lang=='cz'){var lessThanAMinute=s.lessThanAMinuteString||"Méně než minutu";var minShortForm='min';}else if(s.lang=='hu'){var lessThanAMinute=s.lessThanAMinuteString||"Kevesebb mint egy perc";var minShortForm='perc';}else if(s.lang=='ru'){var lessThanAMinute=s.lessThanAMinuteString||"Меньше минуты";var minShortForm='мин';}else if(s.lang=='ar'){var lessThanAMinute=s.lessThanAMinuteString||"أقل من دقيقة";var minShortForm='دقيقة';}else if(s.lang=='da'){var lessThanAMinute=s.lessThanAMinuteString||"Mindre end et minut";var minShortForm='min';}else if(s.lang=='is'){var lessThanAMinute=s.lessThanAMinuteString||"Minna en eina mínútu";var minShortForm='min';}else if(s.lang=='no'){var lessThanAMinute=s.lessThanAMinuteString||"Mindre enn ett minutt";var minShortForm='min';}else if(s.lang=='pl'){var lessThanAMinute=s.lessThanAMinuteString||"Mniej niż minutę";var minShortForm='min';}else if(s.lang=='ru'){var lessThanAMinute=s.lessThanAMinuteString||"Меньше минуты";var minShortForm='мой';}else if(s.lang=='sv'){var lessThanAMinute=s.lessThanAMinuteString||"Mindre än en minut";var minShortForm='min';}else if(s.lang=='tr'){var lessThanAMinute=s.lessThanAMinuteString||"Bir dakikadan az";var minShortForm='dk';}else{var lessThanAMinute=s.lessThanAMinuteString||'Less than a minute';var minShortForm='min';}
var setTime=function(text){if(text!==''){var totalWords=text.trim().split(/\s+/g).length;var wordsPerSecond=s.wordsPerMinute / 60;totalReadingTimeSeconds=totalWords / wordsPerSecond;if(s.round===true){var readingTimeMinutes=Math.round(totalReadingTimeSeconds / 60);}else{var readingTimeMinutes=Math.floor(totalReadingTimeSeconds / 60);}
var readingTimeSeconds=Math.round(totalReadingTimeSeconds-readingTimeMinutes*60);if(s.round===true){if(readingTimeMinutes>0){$(s.readingTimeTarget).text(s.prependTimeString+readingTimeMinutes+((!s.readingTimeAsNumber)?' '+minShortForm:''));}else{$(s.readingTimeTarget).text((!s.readingTimeAsNumber)?s.prependTimeString+lessThanAMinute:readingTimeMinutes);}}else{var readingTime=readingTimeMinutes+':'+readingTimeSeconds;$(s.readingTimeTarget).text(s.prependTimeString+readingTime);}
if(s.wordCountTarget!==''&&s.wordCountTarget!==undefined){$(s.wordCountTarget).text(s.prependWordString+totalWords);}
s.success.call(this);}else{s.error.call(this,'The element is empty.');}};el.each(function(){if(s.remotePath!=null&&s.remoteTarget!=null){$.get(s.remotePath,function(data){setTime($('<div>').html(data).find(s.remoteTarget).text());});}else{setTime(el.text());}});return totalReadingTimeSeconds;}})(jQuery);
//]]>
$(function() {$('.post-body').each(function() {$(this).readingTime({readingTimeTarget: $(this).find('.eta'),wordCountTarget: $(this).find('.words'),remotePath:$(this).attr('data-file'),remoteTarget: $(this).attr('data-target')});});});
</script>

Bilgiler ve Seçenekler

1- ReadingTimeTarget: "id / class / element" - Tahmini okuma süresini depolama kimliğini, sınıfını veya öğesini tanımlayan dize (varsayılan: 'eta').

ReadingTimeTarget
<span class="eta"></span>

Okuma süresinin görüntülenmesini istemiyorsanız, yukarıdaki kodu kaldırabilirsiniz.

2- WordCountTarget: "id / class / element" - Toplam kelime sayısını depolama kimliğini, sınıfını veya öğesini tanımlayan dize (varsayılan: '').

WordCountTarget
(<span class="words"></span> kelime)

Kelime sayısının görüntülenmesini istemiyorsanız, yukarıdaki kodu kaldırabilirsiniz.

Blogger Toplam Yayın ve Yorum Sayısı Eklentisi

3- WordsPerMinute: Tahmini okuma süresini hesaplamak için dakikada bir kelime tanımlayan bir tam sayı (varsayılan: 270).

WordsPerMinute
wordsPerMinute:270

Tahmini okuma süresini hesaplamak için, her dakika 270 kelime okunabileceğini göstermektedir. Yukarıdaki kodu jQuery kodu içerinde bularak değiştirebilirsiniz.

4- Lang: "en / fr / de / es / nl / sk / cz / ru" - Kullanılacak dili gösteren iki harfli bir dize (varsayılan:"tr").

Lang
lang:'tr'

jQuery kodunu birden fazla dilde kullanabilirsiniz. Yukarıdaki kodu jQuery kodu içerisinde bularak belirtilen dil seçenekleri ile değiştirebilirsiniz.

Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi

Yukarıdaki kodları Blogger dışında diğer blog platformlarında da kullanabilirsiniz. Eklenti ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.

  1. Bunu ekledim fakat tema rengiyle uyumlu hale nasıl getirebilirim?

    YanıtlayınSil
    Yanıtlar
    1. Merhaba, CSS kodları içerisinde bulunan "background:#adb3b9" renk kodunu değiştirerek yapabilirsiniz. CSS kodlarına bir kaç stil kodu daha ekleyerek daha farklı görünüm de elde edebilirsiniz.

      Sil
  2. Evet bunu hallettim. Tek merak ettiğim konu kaldı. Css kodunu, reklamdan sonra görünmemesi yani yazar isminin hemen altında görünmesi için satırının hemen üstüne değil de reklam kodlarının olduğu 6-7 satır öncesine ekliyorum ve tam yerine oturuyor yani yazar isminin hemen altında kalıyor. Bu tam benim istediğim yer. Fakat bu sefer de dakika görünmüyor. Bunu nasıl halledebilirim? Sadece Tahmini okuma süresi olarak görünüyor

    YanıtlayınSil
    Yanıtlar
    1. Kodu tam olarak "Post" içerisine eklemelisiniz, aksi halde çalışmaz..

      Sil
  3. İletişim ve hakkında sayfasında da tahmini okuma süresi görünüyor. Bunu o sayfalardan nasıl kaldırabilirim? Sadece blog yazılarının içinde görünsün istiyorum

    YanıtlayınSil
    Yanıtlar
    1. Merhaba, eklentinin hangi sayfalarda görünmesini istiyorsanız, veri konumlandırma etiketlerinden faydalanmanız gerekiyor. Daha paylaşmış olduğumuz yayında bu bilgiler mevcut; https://bit.ly/34nh1wv bağlantıdan ilgili yayına ulaşabilirsiniz.

      Sil