Google has the weather API, and there is no ads. Try this tutorial i made for that API.
Google's Weather API (PHP) tutorial
with HTML and CSS you can customize it to look however you want. To make it switch between F and C, just use simple Javascript code.
How To?
This API is XML file response from Google's server. We request this XML file for our specific area first.
PHP:
<?php
$xml = simplexml_load_file('http://www.google.com/ig/api?weather=new-york');
$information = $xml->xpath("/xml_api_reply/weather/forecast_information");
$current = $xml->xpath("/xml_api_reply/weather/current_conditions");
$forecast_list = $xml->xpath("/xml_api_reply/weather/forecast_conditions");
?>
The first line gets the XML file with "new-york" weather information. The other lines is for the variables to be ordered.
Now we can start build our HTML/PHP content.
HTML:
<h1>New-York City Weather</h1>
<div class="weather">
<img src="<?php echo 'http://www.google.com' . $current[0]->icon['data']?>" alt="weather" />
<div class="condition"><strong>Today</strong><br />
<?php echo $current[0]->temp_f['data'] ?>° F,<?php echo $current[0]->condition['data'] ?>
</div>
</div>
<?php foreach ($forecast_list as $forecast) { ?>
<div class="weather">
<img src="<?php echo 'http://www.google.com' . $forecast->icon['data']?>" alt="weather" />
<div class="condition">
<strong><?php echo $forecast->day_of_week['data']; ?></strong><br />
<?php echo $forecast->low['data'] ?>° F - <?php echo $forecast->high['data'] ?>° F,
<?php echo $forecast->condition['data'] ?>
</div>
</div>
<?php } ?>
You want it to be nice, right? CSS...
HTML:
.weather {width:245px; height:40px; background:#d7d7d7; padding:2px; margin-bottom:2px;}
.weather img {float:left;}
.weather .condition {width:200px; height:40px; float:right; text-align:left;}
That's it
.
To see live example visit
here.
