Thêm tiện ích thời gian và thời tiết cho Blogspot

Hôm nay tớ lại được về sớm nên lại lên viết bài cho blog đây 😁. Nếu ai đã theo dõi blog của mình từ lâu sẽ để ý trên góc phải màn hình có tiện ích thời gian và thời tiết đúng không nào ? Như yêu cầu của bạn Nguyễn Tuấn thì mình sẽ share code cho mọi người tham khảo nhé. Đoạn code này không hề ảnh hướng tới SEO cũng như tốc độ tải trang của các bạn đâu nên cứ yên tâm mà xài đi nhé👍

Hướng dẫn chi tiết:

Bước 1: Các bạn Blogger và vào phần chỉnh sửa HTML nhé, sau đó thêm đoạn code này vào nơi bạn muốn hiển thị ( Khuyên các bạn nên để header )

<div class='timeandweather'>
<span class='time'></span>
<span id='weather'></span>

Bước 2: Tìm thẻ ]]></b:skin> và thêm đoạn css bên dưới lên nó hoặc thêm nó vào giữa cặp thẻ <style>...</style> cũng đượ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: Chèn đoạn JS này trước 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: Bước cuối cùng bạn thêm đoạn js bên dưới lên trên 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>

Chú ý: Thay "thanh hoa" thành địa chỉ của bạn nhé