Makale uzunluğuna göre zaman sayacı

Makale uzunluğunun ne kadar zamanda okunulabilir olduğunu gösterir.

Söz verdiğim gibi, her yerde olmayan ve farklı eklentileri paylaşıyorum. Çünkü uzun zamandır blogger kullanmama rağmen ilk defa böyle bir eklentiye denk geldim. Eklenti ArlinaDesign sitesinden alınmadır arkadaşlar. Ben sadece kurcalayıp ne işe yaradığını çözüyorum o kadar.

Bu eklenti her makale için bir zaman sayacı oluşturuyor. Örneğin çok çok uzun bir makale ise okuyucuyu 4 dk ya da 5 dk şeklinde bilgilendiriyor.

Ya da çok kısa yazılar için (Bir dakikadan az) şeklinde bir bilgilendirme yer alıyor. Çünkü herkesin zamanı kıymetli herkes hemen okuyup geçeyim derdinde. Kodu tabiki kendi sayfamda uyguladım. Eğer hemen demoyu görmek isterseniz en alttaki demo adresinden bakabilirsiniz. Çok uzun ya da çok kısa bir makaleye girdiğinizde zaman sayacının değiştiğini fark edeceksiniz.

Kullanmak isteyenler için işte kodlar.


Öncelikle aşağıdaki kodları temanızdaki </head> kodunun hemen üzerine ekleyin.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Bu kodu eğer daha önceden eklediyseniz bu adımı atlayın.

1. Blogger kumanda panelinden > Şablonu düzenle ve HTML Düzenle diyerek > aşağıdaki kodları ]]></b:skin> ya da </style> kodunun hemen üzerine yapıştırın.

span.right {float:right;display:inline-block;padding:10px 5px;}

2. Daha sonra </body> kodunun hemen üzerine aşağıdaki kodları ekleyin.

<script type='text/javascript'>
//<![CDATA[
// Reading Time Author: Michael Lynch http://michaelynch.com Licensed under the MIT license
!function(e){e.fn.readingTime=function(n){var t={readingTimeTarget:".eta",wordCountTarget:null,wordsPerMinute:270,round:!0,lang:"en",lessThanAMinuteString:"",prependTimeString:"",prependWordString:"",remotePath:null,remoteTarget:null,success:function(){},error:function(){}},i=this,r=e(this);i.settings=e.extend({},t,n);var a=i.settings;if(!this.length)return a.error.call(this),this;if("it"==a.lang)var s=a.lessThanAMinuteString||"Meno di un minuto",l="min";else if("fr"==a.lang)var s=a.lessThanAMinuteString||"Moins d'une minute",l="min";else if("de"==a.lang)var s=a.lessThanAMinuteString||"Weniger als eine Minute",l="min";else if("es"==a.lang)var s=a.lessThanAMinuteString||"Menos de un minuto",l="min";else if("nl"==a.lang)var s=a.lessThanAMinuteString||"Minder dan een minuut",l="min";else if("sk"==a.lang)var s=a.lessThanAMinuteString||"Menej než minútu",l="min";else if("cz"==a.lang)var s=a.lessThanAMinuteString||"Méně než minutu",l="min";else if("hu"==a.lang)var s=a.lessThanAMinuteString||"Kevesebb mint egy perc",l="perc";else var s=a.lessThanAMinuteString||"Less than a minute",l="min";var u=function(n){if(""!==n){var t=n.trim().split(/\s+/g).length,i=a.wordsPerMinute/60,r=t/i;if(a.round===!0)var u=Math.round(r/60);else var u=Math.floor(r/60);var g=Math.round(r-60*u);if(a.round===!0)u>0?e(a.readingTimeTarget).text(a.prependTimeString+u+" "+l):e(a.readingTimeTarget).text(a.prependTimeString+s);else{var o=u+":"+g;e(a.readingTimeTarget).text(a.prependTimeString+o)}""!==a.wordCountTarget&&void 0!==a.wordCountTarget&&e(a.wordCountTarget).text(a.prependWordString+t),a.success.call(this)}else a.error.call(this,"The element is empty.")};r.each(function(){null!=a.remotePath&&null!=a.remoteTarget?e.get(a.remotePath,function(n){u(e("<div>").html(n).find(a.remoteTarget).text())}):u(r.text())})}}(jQuery);
$(function(){$('.post-body').readingTime();});
//]]>
</script>

Bu kodlar herhangi bir yazınızın toplam okuma süresidir.

wordsPerMinute:270 : 1 dakikaya tekabül eden kelime sayısır.

Less than a minute : Bir dakikadan az bildirimidir.

3. Son olarak temanızda <div class='post-header'> kodunu aratarak altına ya da uygun gördüğünüz başka bir alana aşağıdaki kodları ekleyin.

<span class='right'><i class='fa fa-clock-o'/> <span class='eta'/></span>

4. Temanızı kaydedin.

Demo
click to view

• Tweet
• Share
• Share
• Share
• Share

About Blog Düzenim

Blog Düzenim bloggeri geliştirmek ve yeni blog kullanıcılarına yardımcı olmak amacıyla açılmıştır. We love blogger.

Related Post