How To Display A Conditions Forecast On Your Blogger

Displaying weather condition forecast widget on your Blogger weblog could move an interesting affair for your visitors. Recently, 1 of our readers emailed us yell for if at that topographic point was an slow means to display electrical flow weather condition forecast on his blog. Our developers did only about inquiry work, in addition to was in conclusion able to prepare a robust in addition to well-functioning Weather forecast widget that displays weather condition details on the ground of your visitor’s location.In this article, nosotros volition demo yous how to display weather condition forecast on your blogger blog.

Before anyone work this widget, nosotros volition move giving only about meaning reasons why yous should work it too, mainly discussing most its function. Let’s assume a visitor from London, England landed on your site. Now this widget would fetch the information from local weather condition society in addition to would render its details accurate. Now if the twenty-four hr menstruum is sunny, rainy, cloudy in addition to etc.

Demo of the widget tin sack move seen here.

The solution:

The get-go affair yous demand to produce is to login into your blogger dashboard. Now acquire to Template >> Edit HTML >> in addition to search for the peel tag, only inwards a higher house it glue the next slice of CSS coding (you tin sack customize the code if yous like, but nosotros are for certain that the default 1 would only move correct 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 instant affair is to add together the JavaScript file that does the piece of work quite brilliantly. Within your blogger template search for the </head> tag in addition to only inwards a higher house it glue the next JS Coding. (We recommend yous to delight host the script on your ain either on Google Drive or whatever other service because our script mightiness acquire downward if our quota of bandwidth gets full).

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

Lastly, add together this styling javascript file only inwards a higher house the </body> tag. You tin sack alter the seat of the gadget yesteryear replacing  position: "right" to left or center. There are many other options for your customization, which could move useful to represent 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",
}, part (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 promise this tutorial may convey helped yous inwards learning How to display weather condition forecast on Your Blogger site. Do laissez passer on it a try, in addition to allow us know what are your thoughts most our latest evolution yesteryear commenting your opinions below.