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='"post-body-" + data:post.id'>
.....
.....
<b:if cond='data:blog.pageType == "item"'>
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:270Tahmini 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.
0 komentar: