Hưỡng Dẫn Tích Hợp Plugin Timeago Vào Blog
Timeago là 1 tiện ích nhỏ giúp bạn thay đổi cách hiển thị ngày giờ xuất bản bài đăng của trang web. Thông thường với template blogger mặc định ngày giờ thường được hiển thị kiểu như dd/mm/yyyy, sau khi sử dụng timeago nó sẽ được thay thế bằng một khoảng thời gian như: vừa đăng, 1 phút trước, 1 ngày trước, 1 tháng trước, 1 năm trước ....
Bạn tiến hành đăng nhập vào trang chỉnh sửa template của blogger
Thêm jquery dưới đây ( nếu chưa có, có rồi thì thôi )
Thông thường tempate blogger thường đặt thời gian nằm trong
Thêm 1 đoạn js nữa để bật timeago
Khi đó tất cả class tên published sẽ đồng loạt được đổi thành một khoảng thời gian thay vì thời gian cụ thể như mặc định
Để thay tiếng việt cái bạn cần thêm đoạn js dưới đây
Hướng Dẫn
Bạn tiến hành đăng nhập vào trang chỉnh sửa template của blogger
Thêm jquery dưới đây ( nếu chưa có, có rồi thì thôi )
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js' type='text/javascript'/>
Dán đoạn mã này lên trên thẻ </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-timeago/1.6.3/jquery.timeago.min.js' type='text/javascript'/>class='published' bạn kiểm tra trong template mình có không nhé, nếu không có thì phải dùng F12 để kiếm tra tên class chứa nội dung ngày tháng hiển thị.Thêm 1 đoạn js nữa để bật timeago
<script type="text/javascript">//<![CDATA[
jQuery(document).ready(function() {
jQuery(".published").timeago();
});
//]]></script>
Để thay tiếng việt cái bạn cần thêm đoạn js dưới đây
<script type='text/javascript'>//<![CDATA[
(function(factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && typeof module.exports === 'object') {
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function($) {
$.timeago = function(timestamp) {
if (timestamp instanceof Date) {
return inWords(timestamp);
} else if (typeof timestamp === "string") {
return inWords($.timeago.parse(timestamp));
} else if (typeof timestamp === "number") {
return inWords(new Date(timestamp));
} else {
return inWords($.timeago.datetime(timestamp));
}
};
var $t = $.timeago;
$.extend($.timeago, {
settings: {
refreshMillis: 60000,
allowPast: true,
allowFuture: false,
localeTitle: false,
cutoff: 0,
autoDispose: true,
strings: {
prefixAgo: null,
prefixFromNow: null,
suffixAgo: "",
suffixFromNow: "vừa đăng",
inPast: "bất kỳ lúc nào",
seconds: "ít hơn một phút",
minute: "1 phút trước",
minutes: "%d phút trước",
hour: "1 giờ trước",
hours: "%d giờ trước",
day: "Hôm qua",
days: "%d ngày trước",
month: "1 tháng trước",
months: "%d tháng trước",
year: "1 năm trước",
years: "%d năm trước",
wordSeparator: " ",
numbers: []
}
},
inWords: function(distanceMillis) {
if (!this.settings.allowPast && !this.settings.allowFuture) {
throw 'timeago allowPast and allowFuture settings can not both be set to false.';
}
var $l = this.settings.strings;
var prefix = $l.prefixAgo;
var suffix = $l.suffixAgo;
if (this.settings.allowFuture) {
if (distanceMillis < 0) {
prefix = $l.prefixFromNow;
suffix = $l.suffixFromNow;
}
}
if (!this.settings.allowPast && distanceMillis >= 0) {
return this.settings.strings.inPast;
}
var seconds = Math.abs(distanceMillis) / 1000;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
function substitute(stringOrFunction, number) {
var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
var value = ($l.numbers && $l.numbers[number]) || number;
return string.replace(/%d/i, value);
}
var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
seconds < 90 && substitute($l.minute, 1) ||
minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
minutes < 90 && substitute($l.hour, 1) ||
hours < 24 && substitute($l.hours, Math.round(hours)) ||
hours < 42 && substitute($l.day, 1) ||
days < 30 && substitute($l.days, Math.round(days)) ||
days < 45 && substitute($l.month, 1) ||
days < 365 && substitute($l.months, Math.round(days / 30)) ||
years < 1.5 && substitute($l.year, 1) ||
substitute($l.years, Math.round(years));
var separator = $l.wordSeparator || "";
if ($l.wordSeparator === undefined) {
separator = " ";
}
return $.trim([prefix, words, suffix].join(separator));
},
parse: function(iso8601) {
var s = $.trim(iso8601);
s = s.replace(/\.\d+/, ""); // remove milliseconds
s = s.replace(/-/, "/").replace(/-/, "/");
s = s.replace(/T/, " ").replace(/Z/, " UTC");
s = s.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
s = s.replace(/([\+\-]\d\d)$/, " $100"); // +09 -> +0900
return new Date(s);
},
datetime: function(elem) {
var iso8601 = $t.isTime(elem) ? $(elem).attr("datetime") : $(elem).attr("title");
return $t.parse(iso8601);
},
isTime: function(elem) {
// jQuery's `is()` doesn't play well with HTML5 in IE
return $(elem).get(0).tagName.toLowerCase() === "time"; // $(elem).is("time");
}
});
// functions that can be called via $(el).timeago('action')
// init is default when no action is given
// functions are called with context of a single element
var functions = {
init: function() {
functions.dispose.call(this);
var refresh_el = $.proxy(refresh, this);
refresh_el();
var $s = $t.settings;
if ($s.refreshMillis > 0) {
this._timeagoInterval = setInterval(refresh_el, $s.refreshMillis);
}
},
update: function(timestamp) {
var date = (timestamp instanceof Date) ? timestamp : $t.parse(timestamp);
$(this).data('timeago', {
datetime: date
});
if ($t.settings.localeTitle) {
$(this).attr("title", date.toLocaleString());
}
refresh.apply(this);
},
updateFromDOM: function() {
$(this).data('timeago', {
datetime: $t.parse($t.isTime(this) ? $(this).attr("datetime") : $(this).attr("title"))
});
refresh.apply(this);
},
dispose: function() {
if (this._timeagoInterval) {
window.clearInterval(this._timeagoInterval);
this._timeagoInterval = null;
}
}
};
$.fn.timeago = function(action, options) {
var fn = action ? functions[action] : functions.init;
if (!fn) {
throw new Error("Unknown function name '" + action + "' for timeago");
}
// each over objects here and call the requested function
this.each(function() {
fn.call(this, options);
});
return this;
};
function refresh() {
var $s = $t.settings;
//check if it's still visible
if ($s.autoDispose && !$.contains(document.documentElement, this)) {
//stop if it has been removed
$(this).timeago("dispose");
return this;
}
var data = prepareData(this);
if (!isNaN(data.datetime)) {
if ($s.cutoff === 0 || Math.abs(distance(data.datetime)) < $s.cutoff) {
$(this).text(inWords(data.datetime));
} else {
if ($(this).attr('title').length > 0) {
$(this).text($(this).attr('title'));
}
}
}
return this;
}
function prepareData(element) {
element = $(element);
if (!element.data("timeago")) {
element.data("timeago", {
datetime: $t.datetime(element)
});
var text = $.trim(element.text());
if ($t.settings.localeTitle) {
element.attr("title", element.data('timeago').datetime.toLocaleString());
} else if (text.length > 0 && !($t.isTime(element) && element.attr("title"))) {
element.attr("title", text);
}
}
return element.data("timeago");
}
function inWords(date) {
return $t.inWords(distance(date));
}
function distance(date) {
return (new Date().getTime() - date.getTime());
}
// fix for IE6 suckage
document.createElement("abbr");
document.createElement("time");
}));
//]]></script>
<script src='https://cdn.jsdelivr.net/gh/agicute/cdn/timeago_mahoa.js' type='text/javascript'/>