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.

Bknz: 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.

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.

Bknz: 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.

Bknz: 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.
Bu makale faydalı mı?

Kategori İçerikleri

Blogger
Disqus
Yorum Ekle

13 yorum

Cok isime yaradi tskler.Arkaplan rengi solmus duruyor.Canlandirilma imkani varmidir?Color ile ilgili bir yer bulamadim.Ama calisiyor ve isime yaradi.

Cevap

Merhaba, sorunuzu tam olarak anlayamadım.

Cevap

eklentinin arkaplani gri renkte ama soluk duruyor.Mesela burda yorumda cevap yazisi varya canli koyu renk gri duruyor.Sizin önizleme sitenizdeki eklentiyede bakarsak arkaplani ölü gibi duruyor.Mesela yorumdaki Cevap gibi arkaplani canli koyu hale getirebilsek daha iyi olurdu.

Cevap

Merhaba Hitman, yukarıdaki CSS kodları içerisinde bulunan #adb3b9 yere https://bloggereklentileri.blogspot.com/p/blogger.html sayfasından istediğiniz renk kodunu ekleyebilirsiniz.

Cevap

Gözümden kacmis.Tesekkürler simdi oldu.Sayfa görüntüleme sayisinida halletseydim süper olcakti.Bu konudada yardimci oluesaniz memnun olurum.

Cevap

Buradaki probleminiz nedir, neyi yapamadınız?

Cevap

Tamam onuda hallettim saolun.Firebase den kaynakli bir hataymis.Firebaseden sadece isimi ekledim oldu.Cizgiden sonraki numarayida yaziyordum olmamisti.Sadece isimle oldu.Tskler gercekten önemli ve kolay bulunmayan eklentileri sunuyorsunuz.

Cevap

Rica ederim :)

Cevap

Bazı siteler yeni yayınları için bildirim gönderiyor. Hem masaüstünde hemde mobilde bildirim geliyor. Bunun hakkındada bir paylaşım yapabilir misiniz.

Cevap

Ekran görüntüsü aldım. Şu şekilde bildirim geliyor https://vimeo.com/225426103

Cevap

Merhaba, bu bir tarayıcı özelliğidir. Buradan inceleyebilirsiniz: https://support.google.com/chrome/answer/3220216?co=GENIE.Platform%3DDesktop&hl=tr

Cevap

Cok saol isime yaradi.arkaplan rengi soluk gibi duruyor.Canli hale getirilebilirmi?Color ile ilgili biryer bulamadim.

Cevap

Güle güle kullanın.

Cevap