| Published in Weather |
The www.tititudorancea.info
Free Weather Forecast Widget
Use this widget to show the weather forecast for a certain place on your website or blog. It's powerful, fast, easy to implement and it works for about 200,000 places, cities, towns and even small villages from all over the world. And it's 100% free!
See the examples below and get the code for the one that fits your website. If you need help setting this widget, read the Setup Parameters and the FAQ below.
This setup is for layouts with ample horizontal space. For a seven-day forecast, the widget needs a minimum width of 575px. If your layout is wider, the widget will auto-expand to fill the available space.
To insert the widget into a 575px-wide place, you have to set
.WFOT1 {border:0;padding:0}
If the width of your layout is smaller than 575px, you can set the variable "days" to a lower value (say 4), or you could use the variable "columns" to force the widget to use two (or more) rows (see the next example).
|
Weather forecast
provided by tititudorancea.info
|
In this example, the variable "columns" was set to "3", and the variable "days" was set to "6" to make the widget use two rows. If you set |
|
Weather forecast
provided by tititudorancea.info
|
In this example, the variable "columns" was set to "2" and the widget uses three rows. With the default CSS definitions, the widget needs 232 pixels. If you set If you set the padding to 4px, like so: |
|
Weather forecast
provided by tititudorancea.info
|
This setup is for narrow columns (ie. columns with a width of about 200px, more or less). We are using this one on our website, too. The widget will auto-expand to fill the available witdh of your column. The variable sidebyside=yes makes the text appear next to the icons (not below the icons, as in the previous examples). If the variable sidebyside is set to yes, the variable columns is ignored. |
|
Weather forecast
provided by tititudorancea.info
|
If you need to insert the widget into a really narrow space, this is the setup you need. It normally needs 106px, but if you set In this example the days parameter was set to 2, but you can set it to 7 for a full forecast. |
place (required)
This is the most important parameter: its value must be the ID (as a string) of the place you want to show the forecast for. To get the ID of a place, go to the page with the forecast for that place, and then click the "GET THE CODE" button on the right column. When you click that button, all the widgets on this page are updated to use the ID of that place, and you may copy the code from any example.
If you did not visit the forecast page for a place before coming here, type the name of a place in the search box on the right, and once you find it click the "GET THE CODE" button on the right column of the page.
days (required)
This is another important parameter. It controls the number of days (valid range is 1 to 7) of the forecast.
lang (optional)
This parameter controls the language of the forecast. Default value is en. Other accepted values are: de, fr, it, pt, es, ro.
temp (optional)
You can modify this parameter to show Celsius temperatures (temp=c) or Fahrenheit temperatures (temp=f). If you omit this parameter, the default is c.
s (optional, but recommended)
This parameter controls the type of place, and it helps the widget run faster. Its value is filled in automatically (with the place ID) when you click the "GET THE CODE" button on the forecast page. Accepted values are in the range 1-3.
utf8 (optional)
The names of some places include special charactes. If your website has the encoding UTF-8, set this parameter to yes to display them as they are. If your website uses another encoding, leave the value of this parameter to no (the default value) to translate special characters to ASCII.
If the source code of your website includes something like meta http-equiv="Content-Type" content="text/html; charset=utf-8" then your site is encode in UTF-8, and you may set the parameter utf8 of the widget to yes.
If the names of the place you want to show the forecast for does not include special charactes, the value of this parameter does not matter, and you may delete it.
columns (optional)
If you want to limit the number of columns (ie. forecast days) on each row, set the columns parameter. Accepted values are in the range 1 to 7. See the examples above.
sidebyside (optional)
If this is set to yes, the text of the forecast is shown next to the icons, not below. Please remember that if you set sidebyside to yes, the parameter columns is ignored.
Can I change the colors/fonts/background color of the widget?
You may change the CSS definitions to adapt the widget to the design of your website or blog.
For example, if you want to remove the gray border, in the CSS definitions, detele this: border:2px solid #E1E1E1;.
To remove the background, replace background-color:#F1F1F1; with background-color:#FFFFFF; in the the .WFOT1 definition.
To remove the padding, replace padding:10px with padding:0 in the the .WFOT1 definition.
Can I use two (or more) widgets on the same page?
Yes, but you have to delete from the code of each widget the line <div id="wf_div"></div>. Also, as all the widgets will use the same CSS definitions, you may delete the CSS styles portion (ie. from <style> to </style>) of the second and subsequent widgets (leave only the CSS definitions of the first one).
How often are the forecasts updated?
Our weather forecasts are normally updated four times a day.
How fast is this widget?
Our weather forecast widget is very fast. It is normally delivered to the client in about 0.02 seconds.
Can I move the CSS definitions in the head portion of my website, or in my external CSS file?
Yes, this is a good idea, some DOCTYPEs require CSS defintions to be placed in the HEAD of the html page, and it's never wrong to do so.
 If you own or manage a travel-related business such as a hotel, a bed-and-breakfast, a restaurant, a pub or a cafeteria, you can create a web page for your business for free on Titi Tudorancea Travel Info. ยป  |