Blogger Timeago jQuery Eklentisi

Timeago, güncellenen blog yayınları zaman dilimini otomatik olarak "2 dakika önce" veya "yaklaşık 1 saat önce" gibi desteklemeyi kolaylaştıran bir jQuery eklentisidir. Aşağıdaki bilgiyi inceleyin;

Sosyal medya sitelerinde, özellikle Twitter ve Facebook'ta "3 saniye önce" veya "5 dakika önce" gibi zaman damgalarını görmüş olabilirsiniz.

"30 dakika önce", blog yayının zaman olarak ne kadar önce eklentidiğini gösteriyor. Bu, her saniye, dakika, saat, gün, hafta ve yıl güncellenir. Böylece tam bir tarih göstermek yerine (belirli bir süre), blog yayınının ne kadar önce yayınlandığını gösterir.

Bknz: Blogger Toplam Yayın ve Yorum Sayısı Eklentisi

Blogger siteleri için, Timeago eklentisinin kurulumu ve kullanımı ile ilgi bilgileri sizlerle paylaşacağım. Blogger Timeago eklentisini blog sitenize eklemek için aşağıdaki adımları takip edin.

Blogger Timeago Nasıl Eklenir?

Blogger hesabınıza giriş yapın ve ardın blogunuz kumanda panelinin sol tarafında bulunan menüden Tema > HTML'i Düzenle yolunu takip ederek blogunuzun şablon editör (şablon kodları) sayfasını açın. Bu sayfada aranan kodları daha hızlı bulmak için CTRL+F tuşları yardımını kullanın.

Ön İzleme

Birinci adım: Aşağdaki jQuery kodunu eklemek için, şablon kodları sayfasında bulunan </body> kodunu bulun ve aşağıdaki jQuery kodunu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

jQuery

<script type='text/javascript'>
//<![CDATA[
(function(e){if(typeof define==="function"&&define.amd){define(["jquery"],e)}else{e(jQuery)}})(function(e){function r(){var n=i(this);var r=t.settings;if(!isNaN(n.datetime)){if(r.cutoff==0||Math.abs(o(n.datetime))<r.cutoff){e(this).text(s(n.datetime))}}return this}function i(n){n=e(n);if(!n.data("timeago")){n.data("timeago",{datetime:t.datetime(n)});var r=e.trim(n.text());if(t.settings.localeTitle){n.attr("title",n.data("timeago").datetime.toLocaleString())}else if(r.length>0&&!(t.isTime(n)&&n.attr("title"))){n.attr("title",r)}}return n.data("timeago")}function s(e){return t.inWords(o(e))}function o(e){return(new Date).getTime()-e.getTime()}e.timeago=function(t){if(t instanceof Date){return s(t)}else if(typeof t==="string"){return s(e.timeago.parse(t))}else if(typeof t==="number"){return s(new Date(t))}else{return s(e.timeago.datetime(t))}};var t=e.timeago;e.extend(e.timeago,{settings:{refreshMillis:6e4,allowPast:true,allowFuture:false,localeTitle:false,cutoff:0,strings:{prefixAgo:null,prefixFromNow:null,suffixAgo:"önce",suffixFromNow:"şimdi",inPast:"az önce",seconds:"birkaç saniye",minute:"%d dakika",minutes:"%d dakika",hour:"%d saat",hours:"%d saat",day:"%d gün",days:"%d gün",month:"ay",months:"%d ay",year:"%d yıl",years:"%d yıl",wordSeparator:" ",numbers:[]}},inWords:function(t){function l(r,i){var s=e.isFunction(r)?r(i,t):r;var o=n.numbers&&n.numbers[i]||i;return s.replace(/%d/i,o)}if(!this.settings.allowPast&&!this.settings.allowFuture){throw"timeago allowPast and allowFuture settings can not both be set to false."}var n=this.settings.strings;var r=n.prefixAgo;var i=n.suffixAgo;if(this.settings.allowFuture){if(t<0){r=n.prefixFromNow;i=n.suffixFromNow}}if(!this.settings.allowPast&&t>=0){return this.settings.strings.inPast}var s=Math.abs(t)/1e3;var o=s/60;var u=o/60;var a=u/24;var f=a/365;var c=s<45&&l(n.seconds,Math.round(s))||s<90&&l(n.minute,1)||o<45&&l(n.minutes,Math.round(o))||o<90&&l(n.hour,1)||u<24&&l(n.hours,Math.round(u))||u<42&&l(n.day,1)||a<30&&l(n.days,Math.round(a))||a<45&&l(n.month,1)||a<365&&l(n.months,Math.round(a/30))||f<1.5&&l(n.year,1)||l(n.years,Math.round(f));var h=n.wordSeparator||"";if(n.wordSeparator===undefined){h=" "}return e.trim([r,c,i].join(h))},parse:function(t){var n=e.trim(t);n=n.replace(/\.\d+/,"");n=n.replace(/-/,"/").replace(/-/,"/");n=n.replace(/T/," ").replace(/Z/," UTC");n=n.replace(/([\+\-]\d\d)\:?(\d\d)/," $1$2");n=n.replace(/([\+\-]\d\d)$/," $100");return new Date(n)},datetime:function(n){var r=t.isTime(n)?e(n).attr("datetime"):e(n).attr("title");return t.parse(r)},isTime:function(t){return e(t).get(0).tagName.toLowerCase()==="time"}});var n={init:function(){var n=e.proxy(r,this);n();var i=t.settings;if(i.refreshMillis>0){this._timeagoInterval=setInterval(n,i.refreshMillis)}},update:function(n){var i=t.parse(n);e(this).data("timeago",{datetime:i});if(t.settings.localeTitle)e(this).attr("title",i.toLocaleString());r.apply(this)},updateFromDOM:function(){e(this).data("timeago",{datetime:t.parse(t.isTime(this)?e(this).attr("datetime"):e(this).attr("title"))});r.apply(this)},dispose:function(){if(this._timeagoInterval){window.clearInterval(this._timeagoInterval);this._timeagoInterval=null}}};e.fn.timeago=function(e,t){var r=e?n[e]:n.init;if(!r){throw new Error("Zaman damgası için '"+e+"' bilinmeyen zaman dilimi")}this.each(function(){r.call(this,t)});return this};document.createElement("abbr");document.createElement("time")});
$(document).ready(function(e) { e("abbr.timeago").timeago()});
//]]>
</script>

Aşağıdaki değişiklikleri yapmadan önce blogunuzun ana sayfasını ziyaret ederek yayınların zaman damgasını kontrol edin. Zaman damgasının doğru çalışmaması durumunda aşağıdaki değişiklikleri yapın.

Bknz: Blogger Sabit Sayfalar ve Yayınlar İçin İzleme Sayacı Eklentisi

İkinci adım: Blogger Timeago eklentisinin doğu bir şekilde çalışması için, blogunuzun yayın zaman damgası kodlarını değiştirin. Blogger sitelerinde yayın zaman damgası aşağıdaki örnek kodda olduğu gibidir.

Örnek yayın zaman damgası kodu

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Yukarıdaki benzer kod yerine aşağıdaki zaman damgası kodunu ekleyin. Öncelikle zaman damgası kodlarını değiştirmeden önce blogunuzun zaman damgası kodlarını yedek olarak not defterine kaydedin.

Blogger sitelerinde yayın zaman damgası kodu ana sayfa, yayın sayfası ve sabit sayfa için birden fazla olabilir.

Aşağıdaki zaman damgası kodu içerisinde belirtilen icon kodunu eklemek istediğiniz farklı bir icon ile değiştirebilirsiniz. Tüm değişiklikleri yaptıktan sonra şablonu kaydederek blogunuzu kontrol edin.

HTML

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<i class='fa fa-calendar-o'/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published timeago' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

Blogger Biçimlendirme Ayarları

Blog yayınlarınızın ve yorumlarınızın saat ve tarih ayarlarını biçimlendirerek doğru çalışmasını sağlayın. Blogger biçimlendime ayarlarına ulaşmak için, blogunuzun kumanda panelinde sol tarafta bulunan menüden Ayarlar > Dil ve biçimlendirme yolunu takip ederek ulaşabilirsiniz.

Biçimlendirme ayarlarınızı aşağıdaki örnekte olduğu gibi yapılandırın;

Bu yayınımızda Blogger Timeago eklentisinin kurulumu ve çalışması hakkında bilgiler paylaştık. Yayın ile ilgili görüş ve sorularınız için yorum bırakabilirsiniz.