How to add weather forcast on your blogger

Hope you all fine. Most of the bloggers wnat to make their blog more interesting and attractive. They always try to make something more responsive and try to add something unique things on their blog to impress their audience. So taday i share with you some thing more unique which will help you to impress your readers. Displaying a weather forecast is a unique thing.

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.

Steps to add  weather forcast on your blogger:

First of you should be logged into your blogger dashboard before we goto our main steps. After logging in to your blogger dashboard goto template>>Edit html and their search for skin tag and just above it paste the following piece of CSS code:

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

Second step 

Second step is to adding javascript code. For this search for </head> tag and just above it paste the following code:

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

Final step 

Last and final step. Now find for </body> tag and just above it paste the following piece of code. 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>

If you done all the steps carefully then you should see the weather forecast on your blogger. I hope this tutorial will help you to impress your readers and make your bloggger more responsive. Also share your thoughts with about this tutorial. Thanks