Download "How to add a Weather Widget to your Website for Free"

Download this video with UDL Client

Video mp4 HD+ with sound
Mp3 in the best quality
Any size files

"videoThumbnail How to add a Weather Widget to your Website for Free

When you fail to erase half of the Universe: Marvel What if #shorts

When you fail to erase half of the Universe: Marvel What if #shorts

Explosions Mega Pack (green screen)

Explosions Mega Pack (green screen)

Bokeh Video Background HD FREE Animated BG Best Quality

Bokeh Video Background HD FREE Animated BG Best Quality

MODELLING For Absolute Beginners - Blender Tutorial

MODELLING For Absolute Beginners - Blender Tutorial

Zenitsu Agatsuma Twixtor Clips

Zenitsu Agatsuma Twixtor Clips

Japanese Lesson 23: Nai-de Kudasai

Japanese Lesson 23: Nai-de Kudasai

How to Customize and Use Assignable Buttons | Yamaha PSR-SX700

How to Customize and Use Assignable Buttons | Yamaha PSR-SX700

Surviving 13000 Days Solo In 99 Nights in the Forest Roblox! New Record!

Surviving 13000 Days Solo In 99 Nights in the Forest Roblox! New Record!

INSERT-REMOVE SIM/SD CARD Motorola MOTO E4

INSERT-REMOVE SIM/SD CARD Motorola MOTO E4

Channel: simple phone 2000

What Are French People’s New Year’s Resolutions for 2026? | Easy French 250

What Are French People’s New Year’s Resolutions for 2026? | Easy French 250

Channel: Easy French

weather widget

website

free

responsive

customizable

html widget

tutorial

wordpress weather widget

embed

animated

00:00:00

[Music]

00:00:04

in this tutorial I will show you how you

00:00:07

can use weather widget Tadeo

00:00:09

to quickly create a weather widget for

00:00:11

your website the widgets are totally

00:00:14

free

00:00:15

they are very customizable and they are

00:00:17

available in several different languages

00:00:20

they are also fully responsive this

00:00:23

means that the widget will expand to

00:00:25

fill its container so it can fit nicely

00:00:28

in a sidebar of any size and then it can

00:00:30

automatically expand to fit in the main

00:00:33

content area it will also look great on

00:00:35

the smaller screens of phones and

00:00:38

tablets in this tutorial I will first

00:00:41

create an embed a widget in an example

00:00:44

web site and then we will do the same

00:00:46

for a wordpress site in the end we will

00:00:50

go over every field in the interface and

00:00:52

I will offer to you some useful tips

00:00:57

this is the first example website we are

00:00:59

going to work with and what I want to do

00:01:02

is to add a weather widget here in the

00:01:05

sidebar under the menu so let's get to

00:01:10

our code editor let's ow and the page I

00:01:14

would like our wicked to go to and then

00:01:17

let's scroll down to find the correct

00:01:20

place to embed our widget so here is a

00:01:23

sidebar here is the menu here is where

00:01:28

the menu ends so here is where we would

00:01:32

like to place our widget so now let's

00:01:35

get to the weather wicked to die our web

00:01:38

site and let's say we would like to add

00:01:42

weather widget for Sydney so in the

00:01:46

select location input box let's type

00:01:49

Sydney let's select it from the drop

00:01:54

down as you can see the weather details

00:01:58

of Sydney are now loaded in the widget

00:02:00

then we click the get code button

00:02:03

we copy the code and then we return to

00:02:07

our code editor and paste it to our

00:02:10

chosen location we save then we return

00:02:15

to our website we refresh and as you can

00:02:20

see the widget has been successfully

00:02:22

embedded in our website if we wanted we

00:02:25

could stop here but we will continue

00:02:28

because we want to make this weather

00:02:31

widget better much the look and feel of

00:02:33

our website so let's get back to the

00:02:37

weather widget or Die or website and

00:02:39

let's change to options let's change the

00:02:42

forecast days from 75 and let's choose a

00:02:48

different theme let's use this pure one

00:02:53

it will probably fit our design better

00:02:56

now let's click the get code button

00:02:59

again to get the updated code click here

00:03:03

to copy the code and then let's get back

00:03:07

to our ready door copy the new code over

00:03:10

the old one save the changes now let's

00:03:13

get back to our website refresh it and

00:03:17

now we have a widget that fits much

00:03:21

better with this website but let's not

00:03:25

stop here let's make it a blend even

00:03:28

better with our website so what I'm

00:03:30

going to do next is as we have this

00:03:34

heading down here I'm gonna add the same

00:03:39

here above our weather wiki so let's get

00:03:43

back to our code and you can see here

00:03:46

that heading and as you can see it is

00:03:49

inside this section so I will just copy

00:03:55

this section paste it here

00:04:01

now let's cut our widget

00:04:04

[Music]

00:04:06

and then let's replace everything in

00:04:09

this section apart from the header with

00:04:12

the code with our widget let's save

00:04:16

let's get back to our browser let's

00:04:22

refresh and here is the result obviously

00:04:25

I want to change this heading I wanted

00:04:29

to say Sydney weather so let's get back to our

00:04:33

code le door and change that heading to

00:04:39

say Sydney weather so we get back to our

00:04:43

browser refresh and now we can see it

00:04:47

says Sydney weather but I don't want to

00:04:50

say Sydney weather here so let's go back

00:04:54

to weather widget at i/o let's go to

00:04:57

settings and let's delete the labels

00:05:00

from the widget itself let's get the

00:05:03

code again copy back to our code replace

00:05:08

the old code with a new one save now

00:05:11

let's get back to our website refresh

00:05:13

and here we have the widget without the

00:05:17

label at this point it looks pretty good

00:05:20

and again we could stop here but let's

00:05:24

also do a fully customized solution so

00:05:27

let's get back to weather widget todai

00:05:34

I will choose from the themes then blank

00:05:39

theme which has no colors set so

00:05:43

basically we can start from scratch

00:05:46

[Music]

00:05:47

I will temporarily choose a white

00:05:50

background and now using the developer

00:05:58

tools of our browser let's pick a few

00:06:01

colors from our website so let's select

00:06:05

this heading here let's choose this

00:06:09

orange color from here and we will use

00:06:15

it as the color for the Sun and as the

00:06:18

color for the high temperature next

00:06:23

let's copy this dark grey color which is

00:06:26

used for the headings and we will use

00:06:30

that as the color for our text the text

00:06:34

color is the fallback color for all

00:06:36

other text and icon colors so now all

00:06:42

text and icons apart from the Sun and

00:06:46

high temperature colors which we have

00:06:49

said earlier are now using this dark

00:06:53

gray color so another thing I'd like to

00:06:56

do is to add a blue color for the low

00:07:00

temperature and the rain color now let's

00:07:10

remove that white background we

00:07:12

temporarily added before so the

00:07:15

background of our website will be

00:07:18

visible under our widget next let's

00:07:21

click the get code button copy the new

00:07:25

code get back to our editor paste have a

00:07:31

new code over the old one save the

00:07:36

changes return to our website refresh it

00:07:41

and now have the final result which as

00:07:47

you can see matches perfectly with our

00:07:51

website

00:07:52

[Music]

00:08:01

a few days have passed and now let's say

00:08:04

we would like to make a modification to

00:08:06

our widget let's say we would like to

00:08:09

use a different font the easiest way to

00:08:12

do this change is to first go back to

00:08:15

weather widget attire and to click on

00:08:18

the load code button now as per the

00:08:25

instructions of this window what we need

00:08:28

to do is to paste here the code we

00:08:30

previously created so now we return to

00:08:35

our code editor we open the file where

00:08:39

we had previously created the widget we

00:08:43

scroll down to find it here it is

00:08:48

so we highlight it we copy it and then

00:08:53

we return to weather widget udaya we

00:08:56

paste the code and click the button to

00:08:59

load it now as you can see all our

00:09:03

previous settings have been loaded so we

00:09:06

can now proceed with the change first we

00:09:10

click on the options tab we select a

00:09:13

different font

00:09:18

and then we click the get code button we

00:09:23

copy the new code and we paste it over

00:09:27

the old one we save we return to our

00:09:32

website reload the browser and now our

00:09:36

widget has the new font next we will add

00:09:47

a weather widget to this WordPress

00:09:50

example website what I want to do is to

00:09:54

add it at the top of the sidebar here

00:09:57

and the plan is to make it look like the

00:10:01

other widgets in the sidebar so now

00:10:05

let's go to weather widget to die oh

00:10:08

let's type our location here in this

00:10:12

case it will be London I don't want a

00:10:16

label inside the widget so I will remove

00:10:20

the labels from here in the options I

00:10:23

will now change to a three-day forecast

00:10:26

I will select the blank theme because I

00:10:32

want to customize everything from

00:10:34

scratch

00:10:35

I will customize it I will use a white

00:10:38

background now I'll get back to our

00:10:41

website to pick some colors first I will

00:10:46

pick this red and I will use it as the

00:10:54

color for the high temperature and the

00:10:57

color for the Sun next let's pick this

00:11:04

green color from here

00:11:08

and we'll use that as the cloud color

00:11:15

and last I will pick this dark grey

00:11:22

brown color from the heading and I will

00:11:29

use that for the text color which is

00:11:33

also the fallback color for all other

00:11:37

text and icons now let's get the code

00:11:43

copied then we will go to our WordPress

00:11:49

dashboard under appearance I will select

00:11:55

widgets and what we want to use is this

00:12:00

custom HTML widget so we grab it from

00:12:06

here and drop it at the top of our

00:12:10

sidebar as content we paste the code we

00:12:15

copied earlier from weather widget todai

00:12:18

oh and as a title I will type London

00:12:23

weather and I will save now we return to

00:12:28

the front end of our website and here we

00:12:33

can see the final result

00:12:35

[Music]

00:12:39

you

00:12:43

in this part of the tutorial we'll go

00:12:45

over every field available in the

00:12:47

interface which you can use to create a

00:12:49

widget that perfectly matches your

00:12:50

website the first thing I want to show

00:12:54

you is that you can drag the border on

00:12:56

the right of the widget here to preview

00:13:00

the widget in different sizes note that

00:13:04

this doesn't set the size of the widget

00:13:06

to any specific width because the widget

00:13:09

is responsive and it will always resize

00:13:12

itself to match the width of its

00:13:13

container so if you do want to set the

00:13:17

widget to a specific width like for

00:13:20

example 800 pixels then you have to

00:13:23

place the widget in a container like a

00:13:25

div that has its width set to 800 pixels

00:13:29

so let's now move to the first field in

00:13:34

our settings which is the select

00:13:37

location field here we can enter the

00:13:41

name of any location like city or the

00:13:46

name of a village so if for example we

00:13:49

enter London here we get the weather for

00:13:53

London or we can enter Paris and we get

00:13:59

the weather for Paris or we can enter

00:14:03

let's say we Montreal and we get the

00:14:07

weather for Montreal next we have the to

00:14:11

label fields here and in this field you

00:14:16

can enter anything you want in any

00:14:19

language you want so for example we

00:14:22

could type my hotel weather or my hotel

00:14:29

whatever okay so you can type anything

00:14:33

you want here

00:14:34

or since these fields are optional you

00:14:37

can just use one of them or none of them

00:14:41

they are totally optional and if you

00:14:43

don't want them you

00:14:45

so let's stab it back now

00:14:48

Montreal weather and let's move to the

00:14:53

next field which is the language field

00:14:57

here as you can see there are several

00:15:02

different languages from which you can

00:15:05

choose from Arabic - Bulgarian - French

00:15:19

or crane e'en or Chinese ok so now let's

00:15:28

put it back to english the last field in

00:15:34

the settings section is the units field

00:15:38

and here you can choose between

00:15:41

international units or units used in the

00:15:46

USA the most obvious difference here is

00:15:50

the unit for the temperature so for

00:15:53

international units it is in Celsius

00:15:57

while for the USA units the temperature

00:16:01

is in Fahrenheit but another difference

00:16:05

is between centimeters and inches so if

00:16:09

we hover over an icon here we see that

00:16:12

the snow amount is indicated in inches

00:16:17

but if we change units to international

00:16:22

we can now see that snow is indicated in

00:16:27

centimeters so now let's move to the

00:16:32

options section

00:16:36

the first field here is the phone's

00:16:40

field here you can select among many

00:16:44

different phones some of the phones are

00:16:48

actually phone stacks with what's called

00:16:51

web safe fonts which are found in most

00:16:56

operating systems while the rest are

00:16:59

from Google phones

00:17:02

one thing to note is that the available

00:17:04

phones in this field will depend on the

00:17:08

language selected earlier so if you

00:17:11

let's say you had selected Arabic or

00:17:13

Chinese or Japanese you will see a

00:17:17

different set of fonts here next we move

00:17:22

to the icon set field and as you can see

00:17:25

we have three different icon sets here

00:17:29

with the last option here being an

00:17:32

animated icon set let's go back to the

00:17:41

default for now

00:17:47

in this next field we can select if we

00:17:51

want to show only the current weather or

00:17:55

if we would like to show weather

00:17:58

forecast for today in the next few days

00:18:02

or if we prefer to show both the current

00:18:07

weather and the forecast as a last field

00:18:10

in this section we have the forecast

00:18:13

days and this of course is relevant only

00:18:16

we are showing a forecast if we had

00:18:19

earlier selected to show only the

00:18:21

current weather this field will not be

00:18:23

relevant and here you have the option to

00:18:27

choose between seven five and three days

00:18:33

of forecast

00:18:35

let's select here five for now next

00:18:40

let's move to the themes section here we

00:18:49

have five different types of themes

00:18:55

flood themes gradient themes themes with

00:19:01

pattern themes with an image and the

00:19:06

theme based on the current weather

00:19:08

conditions for the flood themes only

00:19:13

basic flood colors are used the gradient

00:19:20

themes are using a gradient based

00:19:24

background as you can see here

00:19:33

the pattern themes have as a background

00:19:37

smaller repeating image while the image

00:19:44

themes use larger single image for the

00:19:50

whole widget and weather conditions

00:19:55

theme is a special kind of theme which

00:19:58

sets the background and the colors based

00:20:01

on the current weather conditions for

00:20:04

the selected location so in Montreal now

00:20:07

the weather is clear and it is night

00:20:11

so the theme used here is a clear night

00:20:15

sky theme the last section is the

00:20:20

customized section but as you can see we

00:20:24

cannot customize this special weather

00:20:26

conditions theme and this is because

00:20:28

this theme is actually many different

00:20:31

themes one for each kind of weather

00:20:34

condition we can however customize every

00:20:38

other theme so let's choose a flat theme

00:20:44

let's choose this pure one and let's

00:20:51

customize it in the customize section we

00:20:55

can customize the colors for the various

00:20:58

elements of our widget such as the

00:21:00

background the text and the icons so

00:21:04

let's start with the background as you

00:21:07

can see we have a white background here

00:21:09

but we can change it to any color we

00:21:12

want so we can change it to red for

00:21:16

example or we can try this light teal

00:21:21

color we can also use this second column

00:21:25

of the color picker to lower the opacity

00:21:28

in the case of the background color

00:21:30

lowering the opacity will have the

00:21:33

effect of your own websites background

00:21:35

to be visible under the widget for our

00:21:39

example here let's put the opacity back

00:21:41

to

00:21:42

percent the next field is the accent

00:21:45

color which basically defines a

00:21:47

background under the odd-numbered day

00:21:51

columns so that would be the first third

00:21:54

fifth and seventh day columns in this

00:21:59

case as you can see we're using a low

00:22:01

opacity black color and this has the

00:22:04

effect of slightly darkening the

00:22:07

background color but we could also use

00:22:10

color with its full opacity for example

00:22:14

a blue color like this but usually a

00:22:18

better approach for this field is to use

00:22:21

a low opacity black white or gray color

00:22:25

which makes this accent to easily blend

00:22:29

with a background next we have the text

00:22:32

field which sets the color for the

00:22:35

labels the current temperature and

00:22:38

description and the day names so if we

00:22:43

change this field to let's say a dark

00:22:46

blue color

00:22:49

as you can see now the labels the

00:22:53

current temp and description and the day

00:22:57

names are now using this color an

00:23:00

important thing to note is that the text

00:23:03

color is also the default color for all

00:23:06

text and icon elements of the widget so

00:23:10

if any of those colors are not set then

00:23:13

they will also use the text color which

00:23:16

in this case is this dark blue so if for

00:23:20

example I remove the color for the high

00:23:23

temperature as you can see where high

00:23:26

temperature is now displayed with a dark

00:23:29

blue color we defined in the text field

00:23:32

but for this example I will give it a

00:23:36

high temp its own color dark red let's

00:23:41

also change the low temperature to use a

00:23:46

great color the shadow field places a

00:23:53

shadow behind all text and icons this is

00:23:58

really useful in cases of busy image

00:24:00

backgrounds because it helps the text

00:24:04

and icons to pop and become more visible

00:24:07

and we can use the opacity to define how

00:24:12

strong we want this effect to be in

00:24:15

cases of light color themes such as this

00:24:18

one we usually don't need a shadow at

00:24:21

all so I will remove it the Sun color is

00:24:25

used wherever a Sun appears in the icons

00:24:29

so let's change the color to some dark

00:24:35

red color for the Sun the moon color

00:24:39

again it is used wherever there is moon

00:24:43

in an icon same deal with the cloud

00:24:47

color changes the

00:24:50

of the clouds as they appear in the

00:24:52

icons the cloud filled color is only

00:24:56

relevant if we are using the animated

00:24:59

icon set otherwise as you can see it has

00:25:03

no effect but if we now change to the

00:25:10

animated icon set you can now see the

00:25:13

cloud fill color shown in the widget

00:25:16

these red eyes are really much so let's

00:25:19

use white for this field so this next

00:25:23

one is the color for the rain let's use

00:25:28

purple for the rain and you can see the

00:25:34

purple rain here and the last field is

00:25:38

the color for their snow and again we

00:25:42

can use whatever color we want for that

00:25:45

as well

00:25:50

once we are done creating the widget as

00:25:52

we want it we can click on the get code

00:25:57

button we can copy the supplied snippet

00:26:00

and then we can paste it at any place in

00:26:05

any website where we would like the

00:26:07

widget to appear now we will let's say

00:26:10

some days or months have passed and you

00:26:14

want to make some change to your widget

00:26:17

then you can load all your

00:26:20

customizations by clicking on the load

00:26:22

code button and pasting here their

00:26:26

weather widget code you are using in

00:26:28

your website you can then make the

00:26:32

changes you want and get the updated

00:26:35

code to use in your website one last

00:26:42

thing to note is that there is one

00:26:43

important difference in how to customize

00:26:46

the gradient pattern and image themes

00:26:50

gradient themes use a gradient

00:26:52

background which sits behind the

00:26:55

background that you said in the

00:26:56

customize section something similar is

00:26:59

true for the image based themes which

00:27:02

use an image as a background so if we

00:27:06

were to use this clear theme as you can

00:27:09

see the background is set to white with

00:27:12

slightly lowered opacity which allows

00:27:16

the gradient background to be seen we

00:27:20

can then change the white to some

00:27:22

different color

00:27:24

keeping the slightly lowered opacity to

00:27:27

get a gradient using this different

00:27:30

color

00:27:31

the lower we set the opacity the

00:27:33

stronger the gradient effect becomes and

00:27:36

if we were to totally remove our own

00:27:39

background then we will just see the

00:27:42

gradient background which sits behind if

00:27:45

you want no background at all when you

00:27:47

have to start with a flat film in this

00:27:50

case we will use a white with a slightly

00:27:53

lower capacity

00:27:56

and we can adjust the opacity setting to

00:28:00

get the exact effect we want something

00:28:03

similar is true for image based themes

00:28:11

so in this case as you can see we use no

00:28:16

background colour at all so the image

00:28:19

background is fully visible and if we

00:28:23

were to use a background color with 100%

00:28:26

opacity then the image will be hidden so

00:28:29

no point in doing that but what we can

00:28:32

do is use a background color with a

00:28:35

lowered opacity which has the effect of

00:28:38

giving our image different tint

00:28:49

and again if we remove the background

00:28:52

color the background image is shown

00:28:55

without anything added to it whether

00:29:00

Wichita diam is a new project and new

00:29:02

features will come out in the next month

00:29:04

you can follow us on Facebook or Twitter

00:29:07

you can check some example projects on

00:29:10

our köppen account and if you have any

00:29:12

questions you can contact us directly by

00:29:14

using the contact form in our website

Description:

A tutorial on how to use WeatherWidget.io to quickly create a free Weather Widget for your website. Visit: https://weatherwidget.io/ GO TO: - 0:55 Adding a Weather Widget to a website - 05:35 Creating a totally custom widget - 07:59 Modifying a previously created widget - 09:45 Weather Widget for Wordpress __SETTINGS__ - 13:31 Select Location - 14:10 Labels - 14:55 Language - 15:32 Units __OPTIONS__ - 16:35 Fonts - 17:21 Icon Sets - 17:46 Current / Forecast - 18:10 Forecast Days - 18:47 __THEMES__ - 20:18 __CUSTOMIZE__ - 26:38 Note regarding Gradient, Pattern and Image Themes The widgets created are: - Very Customizable - Available in many languages - Fully Responsive to match any width Background Music Attribution: Fluidscape by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100393 Artist: http://incompetech.com/

Mediafile available in formats

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "How to add a Weather Widget to your Website for Free" video?

http://univideos.ru/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "How to add a Weather Widget to your Website for Free" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "How to add a Weather Widget to your Website for Free" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "How to add a Weather Widget to your Website for Free" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "How to add a Weather Widget to your Website for Free"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "How to add a Weather Widget to your Website for Free"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

How do I play and download streaming video?

For this purpose you need VLC-player, which can be downloaded for free from the official website https://www.videolan.org/vlc/.

How to play streaming video through VLC player:

in video formats, hover your mouse over "Streaming Video**";
right-click on "Copy link";
open VLC-player;
select Media - Open Network Stream - Network in the menu;
paste the copied link into the input field;
click "Play".

To download streaming video via VLC player, you need to convert it:

copy the video address (URL);
select "Open Network Stream" in the "Media" item of VLC player and paste the link to the video into the input field;
click on the arrow on the "Play" button and select "Convert" in the list;
select "Video - H.264 + MP3 (MP4)" in the "Profile" line;
click the "Browse" button to select a folder to save the converted video and click the "Start" button;
conversion speed depends on the resolution and duration of the video.

Warning: this download method no longer works with most YouTube videos.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.