Web Günlüğü - Anasayfa
Web Günlüğü

blogger ipuçları, eklentileri ve temalarının yer aldığı web günlüğü

Sayfalar



bu bloğu izle

Bumerang - Yazarkafe

Olist Blogger Teması
canlı radyo dinle

Blogger Yazı Okunma Süresini Gösterme

19 Mayıs 2016 Perşembe - #

Fırsat buldukça blogger ile ilgili ipucu, eklenti ve geliştirmeler hakkında paylaşımlar yapmaya devam ediyorum. Fakat bunu yaparken önceliğim daha çok henüz keşfedilmemiş, paylaşılmamış olan konular. Bugün de bu düşünceyle devam ederek başka blog plaftormlarında gördüğüm uygulaması oldukça kolay, bloggerda yazıların okunma süresini göstermeye yarayan bir kod parçasını paylaşmak istedim. Yazı bilgi alanlarına eklenerek kullanılabilecek bu kod parçası temelinde yazı uzunluğuna göre ortalama olarak yazının ne kadar sürede okunabileceğini gösteriyor.

Gerekli javascript kodları (<body></body> etiketleri arasında bir yere eklenebilir)
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var txt = $('.entry-content')[0].textContent,
    wordCount = txt.replace( /[^\w ]/g, "" ).split( /\s+/ ).length;
    var readingTimeInMinutes = Math.floor(wordCount / 250) + 1;
    var readingTimeAsString = readingTimeInMinutes + " dakika";
    $('.reading-time').html(readingTimeAsString);
});
//]]>
</script>
Sonucun, sürenin gösterileceği alan (yazı bilgilerinin yer aldığı alana eklenebilir)
<span class="reading-time"></span>
Yukarıda görüldüğü gibi turuncu renkte belirtilmiş 2 alan var. Birincisi yani .entry-content yazı içeriğinin yer aldığı div'e ait class'ı belirtiyor. Bu class ya da id değişkenlik gösterebilir .post-body, .post-content, .entry-content gibi.(Tarayıcıların Öğeyi denetle özelliği kullanılarak kolayca bulunabilir.) İkinci belirgin alan .reading-time ise sürenin nerede, yani hangi elementte gösterilmesi gerektiğini belirtiyor.