Loading [MathJax]/extensions/MathZoom.js

Tạo widget thời tiết và thời gian cho blogger

byThầy Hiếu Bụng Bự • • 4 min read
0

 hí xin chào mọi người nha, nay thì  mình xin chia sẽ cho mọi người cách chúng ta tạo một tiện ít thông báo về thơi gian và thời tiết trên blogger nha. 

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 + '&deg;' + 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 + '&deg;' + 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ỉnh của bạn thôi nhe. chúc các bạn thành công okiii la. 
4.6 / 1187 rates
Thầy Hiếu Bụng Bự

Chuyến phiêu lưu của đời là học hỏi. Mục đích của đời là trưởng thành. Bản tính của đời là thay đổi. Thách thức của đời là vượt qua. Tinh túy của đời là quan tâm. Cơ hội của đời là phụng sự. Bí mật của đời là dám làm. Hương vị của đời là giúp đỡ. Vẻ đẹp của đời là cho đi.

Post a Comment

Previous Post Next Post