How to Display a Weather Forecast on Your Blogger

Socialize It →

Tweet

8

Advertisements

Displaying weather forecast widget on your Blogger blog could be an interesting thing for your visitors. Recently, one of our readers emailed us asking if there was an easy way to display current weather forecast on his blog. Our developers did some research work, and was finally able to prepare a robust and well-functioning Weather forecast widget that displays weather details on the basis of your visitor’s location.In this article, we will show you how to display weather forecast on your blogger blog.

Before anyone use this widget, we will be giving some significant reasons why you should use it too, mainly discussing about its function. Let’s assume a visitor from London, England landed on your site. Now this widget would fetch the data from local weather company and would provide its details accurate. Now if the day is sunny, rainy, cloudy and etc.

Demo of the widget can be seen here.

The solution:

The first thing you need to do is to login into your blogger dashboard. Now go to Template >> Edit HTML >> and search for the skin tag, just above it paste the following piece of CSS coding (you can customize the code if you like, but we are certain that the default one would just be right for everyone).

.MyWeatherDiv .centerContainer {
    width: 300px;
    text-align: left;
    margin-bottom: 200px;
}
.green {
    color: #a6e22d;
}
.teal {
    color: #66d9ef;
}
.purp {
    color: #ae81ff;
}
.pink {
    color: #f92772;
}
.yellow {
    color: #e6db74;
}
.white {
    color: #f8f8f2;
}
.grey {
    color: #616161;
}
.f12 {
    font-size: 12px;
}
.MyWeatherDiv img {
    height: 64px;
    width: 64px;
}
.weatherInfoRight {
    z-index: 999;
    position: fixed;
    top: 10px;
    right: 10px;
}
.weatherInfoLeft {
    z-index: 999;
    position: fixed;
    top: 10px;
    left: 10px;
}
.weatherInfoBottomRight {
    z-index: 999;
    position: fixed;
    bottom: 10px;
    right: 10px;
}
.weatherInfoBottomLeft {
    z-index: 999;
    position: fixed;
    bottom: 10px;
    left: 10px;
}
.MyWeatherDiv {
    display: none;
    background-color: #272822;
    padding: 5px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.MyWeatherInfo {
    text-align: center;
    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
    color: white;
    font-size: 14px;
}
#divMyImage {
    display: none;
}
.MyWeatherClose {
    font-family: 'Segoe UI',Tahoma,Helvetica,Sans-Serif;
    cursor: pointer;
    position: absolute;
    right: 10px;
    color: white;
    font-size: 20px;
}
.MWTemperature {
    display: block;
}
.MWPlace {
    display: block;
}
.MWIP {
    display: block;
}
#clear-day {
    display: none;
}
#clear-night {
    display: none;
}
#partly-cloudy-day {
    display: none;
}
#partly-cloudy-night {
    display: none;
}
#cloudy {
    display: none;
}
#rain {
    display: none;
}
#sleet {
    display: none;
}
#snow {
    display: none;
}
#wind {
    display: none;
}
#fog {
    display: none;
}

The second thing is to add the JavaScript file that does the work quite brilliantly. Within your blogger template search for the </head> tag and just above it paste the following JS Coding. (We recommend you to please host the script on your own either on Google Drive or any other service because our script might go down if our quota of bandwidth gets full).

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/weather.js"></script>

Lastly, add this styling javascript file just above the </body> tag. You can change the position of the gadget by replacing  position: "right" to left or center. There are many other options for your customization, which could be useful to match your site’s setting.

<script type="text/javascript">
$.MyWeather({
    position: "right",
    showpopup: true,
    temperature: "c",
    closeicon: true,
    showicon: true,
    showtemperature: true,
    showlocation: true,
    showip: true,
    size: 80,
    iconcolor: "white",
    fontcolor: "white",
}, function (e, f, g, a, d, b, c) {
    $("#txtCity").html(e);
    $("#txtCountry").html(f);
    $("#txtIP").html(g);
    $("#txtLatitude").html(a);
    $("#txtLongitude").html(d);
    $("#txtTemperature").html(b);
    $("#picTemp").attr("src", c)
});
</script>

We hope this tutorial may have helped you in learning How to display weather forecast on Your Blogger site. Do give it a try, and let us know what are your thoughts about our latest development by commenting your opinions below.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).