Add Time and Weather Widget to Blogger

Add Time and Weather Widget to Blogger

I’m back early today, so I’ll write a blog post again. If anyone has been following my blog for a long time, they will notice that there is a time and weather widget on the right corner of the screen, right? As requested by BBlogger, I will share the code for everyone’s preference. This code does not affect your SEO nor your page load speed, so feel free to use it.

Detailed instructions:

Step 1:  Bloggers and go to the HTML editing section, then add this code where you want to display it (Recommend to leave the header)

<div class=’timeandweather’>

<span class=’time’></span>

<span id=’weather’></span>

Step 2:  Find the ]]></b:skin> tag  and add the below css on it or add it between the <style>…</style> tag pairs:

.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}

Step 3:  Insert this JS before the </head> . tag 

<scripts>

    //<![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,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.

                            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>

Step 4:  The last step you add the js below above the </body> . tag 

<!– 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(“Sunday”,”Monday”,”Tuesday”,”Wednesday”,”Thursday”,”Friday”,”Saturday “);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>

Note: Replace “flower bar” with your address

Click to rate this post!
[Total: 0 Average: 0]
51
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x