 |
| Tạo widget thời tiết và thời gian cho blogger |
Với code này chúng ta có thể tạo một tiện ích thông báo cho người dùng biết được thời tiết ở những nơi khác nhế nào, nhiệt độ ra sao, thời gian là bao nhiêu, ....
Code này thì mình chỉ viết css sơ sơ thôi mọi người có thể tự build lại css nha, để đẹp với tầm nhìn của mọi người hơn.
Bước 1: mọi người thêm html này vào vị trí mà mọi người muốn hiển thị, hoặc mọi người cũng có thể tạo một widget và bỏ đoạn code html phía bên dưới vào.
<div class='timeandweather'> <span class='time'></span> <span id='weather'></span>Bước 2: tìm cho mình thẻ ]]></b:skin> và thêm đoạn code css bên dưới và phía thên của thẻ ]]></b:skin> hoặc các bạn cũng có thể thêm css vào phía bên trong của cặp thẻ này <style>..... </style> đều được nhé.
.time{display:inline-block;color:#ffffff;font-size:13px}
.time:before{content:"\f274";font-family:FontAwesome;margin-right:7px}
.time:after{content:" / ";margin:0 1em}
#weather{color:#ffffff;font-size:13px;}
#weather img{max-width:55px;vertical-align:middle;margin-top:-2px}
Bước 3: tìm cho mình thẻ <head> và dán đoạn javascript bên dưới vào phía trên của thẻ <head>
<script >
//<![CDATA[
!function (t) {
"use strict";
function e(t, e) {
return "f" === t ? Math.round(5 / 9 * (e - 32)) : Math.round(1.8 * e + 32)
}
t.extend({
simpleWeather: function (i) {
i = t.extend({
location: "",
woeid: "",
unit: "f",
success: function (t) {},
error: function (t) {}
}, i);
var o = new Date,
n = "https://query.yahooapis.com/v1/public/yql?format=json&rnd=" + o.getFullYear() + o.getMonth() + o.getDay() + o.getHours() + "&diagnostics=true&callback=?&q=";
if ("" !== i.location) {
var r = "";
r = /^(\-?\d+(\.\d+)?),\s*(\-?\d+(\.\d+)?)$/.test(i.location) ? "(" + i.location + ")" : i.location, n += 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="' + r + '") and u="' + i.unit + '"'
} else {
if ("" === i.woeid) return i.error("Could not retrieve weather due to an invalid location."), !1;
n += "select * from weather.forecast where woeid=" + i.woeid + ' and u="' + i.unit + '"'
}
return t.getJSON(encodeURI(n), function (t) {
if (null !== t && null !== t.query && null !== t.query.results && "Yahoo! Weather Error" !== t.query.results.channel.description) {
var o, n = t.query.results.channel,
r = {},
s = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW", "N"],
a = "https://s.yimg.com/os/mit/media/m/weather/images/icons/l/44d-100567.png";
r.title = n.item.title, r.temp = n.item.condition.temp, r.code = n.item.condition.code, r.todayCode = n.item.forecast[0].code, r.currently = n.item.condition.text, r.high = n.item.forecast[0].high, r.low = n.item.forecast[0].low, r.text = n.item.forecast[0].text, r.humidity = n.atmosphere.humidity, r.pressure = n.atmosphere.pressure, r.rising = n.atmosphere.rising, r.visibility = n.atmosphere.visibility, r.sunrise = n.astronomy.sunrise, r.sunset = n.astronomy.sunset, r.description = n.item.description, r.city = n.location.city, r.country = n.location.country, r.region = n.location.region, r.updated = n.item.pubDate, r.link = n.item.link, r.units = {
temp: n.units.temperature,
distance: n.units.distance,
pressure: n.units.pressure,
speed: n.units.speed
}, r.wind = {
chill: n.wind.chill,
direction: s[Math.round(n.wind.direction / 22.5)],
speed: n.wind.speed
}, n.item.condition.temp < 80 && n.atmosphere.humidity < 40 ? r.heatindex = -42.379 + 2.04901523 * n.item.condition.temp + 10.14333127 * n.atmosphere.humidity - .22475541 * n.item.condition.temp * n.atmosphere.humidity - 6.83783 * Math.pow(10, -3) * Math.pow(n.item.condition.temp, 2) - 5.481717 * Math.pow(10, -2) * Math.pow(n.atmosphere.humidity, 2) + 1.22874 * Math.pow(10, -3) * Math.pow(n.item.condition.temp, 2) * n.atmosphere.humidity + 8.5282 * Math.pow(10, -4) * n.item.condition.temp * Math.pow(n.atmosphere.humidity, 2) - 1.99 * Math.pow(10, -6) * Math.pow(n.item.condition.temp, 2) * Math.pow(n.atmosphere.humidity, 2) : r.heatindex = n.item.condition.temp, "3200" == n.item.condition.code ? (r.thumbnail = a, r.image = a) : (r.thumbnail = "https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/" + n.item.condition.code + "ds.png", r.image = "https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/" + n.item.condition.code + "d.png"), r.alt = {
temp: e(i.unit, n.item.condition.temp),
high: e(i.unit, n.item.forecast[0].high),
low: e(i.unit, n.item.forecast[0].low)
}, "f" === i.unit ? r.alt.unit = "c" : r.alt.unit = "f", r.forecast = [];
for (var m = 0; m < n.item.forecast.length; m++) o = n.item.forecast[m], o.alt = {
high: e(i.unit, n.item.forecast[m].high),
low: e(i.unit, n.item.forecast[m].low)
}, "3200" == n.item.forecast[m].code ? (o.thumbnail = a, o.image = a) : (o.thumbnail = "https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/" + n.item.forecast[m].code + "ds.png", o.image = "https://s.yimg.com/zz/combo?a/i/us/nws/weather/gr/" + n.item.forecast[m].code + "d.png"), r.forecast.push(o);
i.success(r)
} else i.error("There was a problem retrieving the latest weather information.")
}), this
}
})
}(jQuery);
//]]>
</script>
Bước 4: tìm cho mình thẻ </body> và thêm đoạn javascript phái dưới vào phía trên của thẻ </body>
<!-- Weather + Time -->
<script>
//<![CDATA[
$.simpleWeather({
location: 'viet nam, thanh hoa',
woeid: '',
unit: 'c',
success: function(weather) {
html = '<span>' + weather.city + ' </span><img src="' + weather.thumbnail + '"><span> ' + weather.temp + '°' + weather.units.temp + '</span>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>' + error + '</p>');
}
});
$.simpleWeather({
location: 'viet nam, thanh hoa',
woeid: '',
unit: 'c',
success: function(weather) {
for (var i = 4; i < weather.forecast.length; i++) {
html = '<img class="weather-image" src="' + weather.image + '">' + '<span class="weather-type">' + weather.currently + '</span><span class="weather-temp"> ' + weather.temp + '°' + weather.units.temp + '</span><span class="weather-date">' + weather.forecast[i].date + '</span><span class="weather-region">' + weather.city + ', ' + weather.country + '</span>';
}
html += '<span class="weather-humidity">' + weather.humidity + '%</span> ';
html += '<span class="weather-wind">' + weather.wind.speed + ' MPH</span>';
$("#weather-widget").html(html);
},
error: function(error) {
$("#weather-widget").html('<p>' + error + '</p>');
}
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var dayName=new Array("Chủ nhật","Thứ hai","Thứ ba","Thứ tư","Thứ năm","Thứ sáu","Thứ bảy");var monName=new Array("1","2","3","4","5","6","7","8","9","10","11","12");var now=new Date();var str_time=dayName[now.getDay()]+', '+now.getDate()+'/'+monName[now.getMonth()]+'/'+now.getFullYear()+' '+now.getHours()+':'+now.getMinutes()+' GMT+7';$('.time').html(str_time);});
//]]>
</script>
Và thế là xong rồi nhá, tai đây bạn chỉ cần thay địa chỉ "thanh hoa" thành tên tỉnh của bạn thôi nhé. Chúc các bạn thành công!