How to Display a Weather Forecast on Your Blogger

Advertisements
How to Display Weather Forecast on Your Blogger
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

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

Comment With:
OR
Choose Wisely!

9 comments

December 13, 2013 at 12:26 AM

can I change then location? the location isn't valid

Editorial Team MOD
December 13, 2013 at 12:09 PM

It automatically gets the location of you via your IP Address. It shows different locations to different users depending on their IP. So, you can't set a default one.

December 13, 2013 at 11:40 PM

Thanks for this great widget Syed Bro!
Regards,
http://tronicflow.blogspot.com/

December 14, 2013 at 9:57 AM

Hi, can you make this for blogger? https://github.com/browserstate/ajaxify

December 28, 2013 at 8:22 PM

Thank's You Very Much

February 3, 2014 at 4:59 AM

How to get link with the end ".js" if i upload "weather.js" file in google drive or google chrome? i can't find the answer for this, thank you

Editorial Team MOD
February 6, 2014 at 7:32 AM

Read This: http://www.mybloggerlab.com/2013/04/how-to-host-css-or-javascript-files-in-blogger-using-google-drive.html

April 19, 2014 at 10:35 AM

Thanks! Great tips!

July 8, 2014 at 2:26 AM

Doesn't work with xmax blogger template

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.