Değerli takipçilerimiz bu yazımızda sizlere Web Sitelerinde ve Blog Sayfalarında bulunan Metin, Yazı veya Makalelerin Kelime Sayısını ve Tahmini Okuma süresini sayfanızda nasıl gösterebileceğiniz ile ilgili basit bir JavaScript kod eklentisi ile anlatmaya çalışacağım.
Takipçilerinize, sayfanızda yayınladığınız Metin, Yazı veya Makalelerde toplam kaç kelime olduğunu belirtilen, bu kelimelerin ne kadar sürede okunabileceğini tahmini olarak takipçileriniz ile paylaşabileceğiniz bilgisini vermiş olursunuz. Bu tarz eklentiler ile gösterilen bilgiler ziyaretçilerin ilgisini çekecektir.
Blog Yazıları Okuma Süresi ve Kelime Sayısı Gösterme Eklentisi Nasıl Kurulur?
Öncelikle Blogger hesabınıza giriş yaparak Blogger Kontrol Panelinden Tema > HTML’yi Düzenle kısmına giderek bloğunuzun Kod Editör panelini açın ve aşağıda yer alan adımları uygulayın. Kod Editör Panelindeki kodlara hızlı erişebilmek için CTRL + F tuş kombinasyonunu kullanabilirsiniz.1. Adım : Blog sayfanızda yer alan Metin, Yazı veya Makalelere Tahmini Okuma Süresi ve Toplam Kelime Sayısı görüntülüme HTML Kodunu bloğunuzun <data:post.body/> kodunun bir satır üzerine ekleyin.
NOT: Bloğunuzda <data:post.body/> kodu birden fazla bulunabilir. Kodu yanlış yere eklememek adına aşağıdaki Örnek Kodlama kısmını inceleyin.
HTML Kodu
<div class='content-reading-time'>
<span>
<p>
<small class='reading-time'>
<span class="eta"></span> (<span class="words"></span> Kelime)
</small>
</p>
</span>
</div>
Örnek Kodlama
<b:if cond='data:view.isSingleItem'>
.....
.....
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div class='content-reading-time'>
<span>
<p>
<small class='reading-time'>
<span class="eta"></span> (<span class="words"></span> Kelime)
</small>
</p>
</span>
</div>
<data:post.body/>
.....
.....
<b:if cond='data:blog.pageType == "item"'>
<b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
</b:if>2. Adım : Aşağıda vermiş olduğum CSS Kodunu kontrol panelinden Tema > HTML'yi Düzenle kımsına girerek açılan Kod Editöründe ]]></b:skin> tagını ya da </style> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz ]]></b:skin> tagının ya da </style> tagının bir satır üzerine ekleyin.
CSS Kodu
.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;
}3. Adım : Aşağıdaki JavaScript Kodunu yine kontrol panelinden Tema > HTML'yi Düzenle kımsına girerek açılan Kod Editöründe </body> tagını CTRL + F tuş kombinasyonları ile aratın. Bulduğunuz </body> tagının bir satır üzerine ekleyin ve Temayı Kaydet butonuna basın.
JavaScript Kodu
<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>Detaylı Bilgiler ve Değiştirilebilir 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') olarak belirlenmiştir. Sayfanızda okuma süresinin görüntülenmesini istemiyorsanız, aşağıda belirtilen kodu kaldırmanız yeterli olacaktır.
ReadingTimeTarget
<span class="eta"></span>2- WordCountTarget: "id / class / element" - Toplam kelime sayısını depolama kimliğini, sınıfını veya öğesini tanımlayan dize (varsayılan: ''). Kelime sayısının görüntülenmesini istemiyorsanız, aşağıda belirtilen kodu kaldırmanız yeterli olacaktır..
WordCountTarget
(<span class="words"></span> Kelime)3- WordsPerMinute: Tahmini okuma süresini hesaplamak için dakikada bir kelime tanımlayan bir tam sayı (varsayılan: 270). Tahmini okuma süresini hesaplamak için, dakikada 270 kelime okunabileceğini göstermektedir. Aşağıdaki kodu JavaScript kodu içerinde bularak değiştirebilirsiniz.
WordsPerMinute
wordsPerMinute:2704- Lang: "en / fr / de / es / nl / sk / cz / ru" - Kullanılacak dili gösteren iki harfli bir dize (varsayılan:"tr"). JavaScript kodunu birden fazla dilde kullanabilirsiniz. aşağıdaki kodu JavaScript kodu içerisinde bularak belirtilen dil seçenekleri ile değiştirebilirsiniz.
Lang
lang:'tr'Blog Yazılarının Kelime Sayısı ve Tahmini Okuma Süresi ile ilgili bilgi ve görüşleriniz için yorum formunu kullanabilirsiniz.
