Gratis widgets

Gratis weer- en tijdwidgets die je zelf kan toevoegen aan je website.

Deze widgets stellen we gratis ter beschikking. Je kan de html-code kopiéren en op je eigen website plaatsen.

Deze widgets zijn helemaal gratis! Hier is slechts één voorwaarde aan verbonden. Er mogen geen wijzigingen in de code worden aangebracht.

Wanneer je gratis gebruik maakt van deze widget(s) ga je ermee akkoord dat je geen wijzigingen mag aanbrengen.

Tijdwidget

Bij deze tijd widget kan je zelf de kleur, de breedte en het tijdformaat aanpassen. Kopieer daarna de widget code en plaats deze op je eigen site.

Widget Aanpassen

Thema:

Breedte (px):

Tijdformaat:

Seconden tonen:

Widget Code

Huidig weer widget

Kopieer onderstaande code naar je website:

<!-- BEGIN: Gratis Weerwidget van WereldTijdInfo.nl -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">
<div class="weer-widget">
  <i id="weather-icon" class="wi wi-day-sunny"></i>
  <h2 id="temperature">--°C</h2>
  <p id="description">Weer ophalen...</p>
  <div style="font-size:10px; margin-top:8px; opacity:0.7;">
    <a href="https://wereldtijdinfo.nl" target="_blank" style="color:inherit; text-decoration:none;">WereldTijdInfo.nl</a>
  </div>
</div>
<style>
  .weer-widget {
    background: #F1F5FD);
    color: navy;
    padding: 15px 25px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    text-align: center;
    width: 100%;
    max-width: 200px;
    margin: auto;
    font-family: Arial, sans-serif;
    animation: fadeIn 2s ease-in-out;
  }
  .weer-widget i {
    font-size: 60px;
    margin-bottom: 10px;
    animation: pulse 2s infinite;
  }
  .weer-widget h2 {
    margin: 0;
    font-size: 20px;
  }
  .weer-widget p {
    margin: 5px 0;
  }
  @keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>
<script>
  var latitude = 52.37;
  var longitude = 4.89;
  var iconMap = {
    0: "wi-day-sunny",
    1: "wi-day-sunny-overcast",
    2: "wi-cloud",
    3: "wi-cloudy",
    45: "wi-fog",
    48: "wi-fog",
    51: "wi-sprinkle",
    53: "wi-showers",
    55: "wi-rain",
    61: "wi-showers",
    63: "wi-rain",
    65: "wi-rain-wind",
    66: "wi-rain-mix",
    67: "wi-rain-mix",
    71: "wi-snow",
    73: "wi-snow",
    75: "wi-snow-wind",
    77: "wi-snowflake-cold",
    80: "wi-showers",
    81: "wi-rain",
    82: "wi-rain-wind",
    85: "wi-snow",
    86: "wi-snow-wind",
    95: "wi-thunderstorm",
    96: "wi-thunderstorm",
    99: "wi-thunderstorm"
  };
  var descriptionMap = {
    0: "Helder",
    1: "Grotendeels helder",
    2: "Gedeeltelijk bewolkt",
    3: "Bewolkt",
    45: "Mist",
    48: "Rijpmist",
    51: "Lichte motregen",
    53: "Motregen",
    55: "Zware motregen",
    61: "Lichte regen",
    63: "Matige regen",
    65: "Zware regen",
    66: "Lichte ijzel",
    67: "Zware ijzel",
    71: "Lichte sneeuwval",
    73: "Matige sneeuwval",
    75: "Zware sneeuwval",
    77: "Sneeuwkorrels",
    80: "Lichte buien",
    81: "Matige buien",
    82: "Zware buien",
    85: "Lichte sneeuwbuien",
    86: "Zware sneeuwbuien",
    95: "Onweer",
    96: "Onweer met lichte hagel",
    99: "Onweer met zware hagel"
  };
  function getWeather() {
    fetch("https://api.open-meteo.com/v1/forecast?latitude=" + latitude + "&longitude=" + longitude + "¤t_weather=true")
    .then(function(res) { return res.json(); })
    .then(function(data) {
      var temp = data.current_weather.temperature;
      var code = data.current_weather.weathercode;
      document.getElementById("temperature").textContent = temp + "°C";
      document.getElementById("description").textContent = descriptionMap[code] || "Onbekend weer";
      document.getElementById("weather-icon").className = "wi " + (iconMap[code] || "wi-na");
    })
    .catch(function() {
      document.getElementById("description").textContent = "Fout bij laden weer";
    });
  }
  getWeather();
</script>
<!-- EINDE: Gratis Weerwidget van WereldTijdInfo.nl -->

Preview:

7-Daagse weersverwachting widget

⚙️ Widget Instellingen

Tijdsverschil tussen landen

Een tool om het tijdsverschil tussen alle landen van de wereld te zien inclusief tijdzone.

Klik hier

Wereldkalender

Kies een jaar en land om de jaarkalender van dat land inclusief de feestdagen te kunnen bekijken

Klik hier

Vliegtijd

Vul het land van vertrek en van aankomst in, eventueel met tussenstops, en je krijgt direct jouw vliegtijd te zien.

Klik hier

Gratis widgets

Gratis weer- en tijdwidgets die je zelf kan toevoegen aan je website.

Tijdwidget

Widget Aanpassen

Widget Code

Huidig weer widget

Kopieer onderstaande code naar je website:

Preview:

--°C

7-Daagse weersverwachting widget

🌤️ Weer Widget Generator

⚙️ Widget Instellingen

👀 Live Voorbeeld

📋 Widget Code

Tijdsverschil tussen landen

Wereldkalender

Vliegtijd

Deel deze pagina

Contact

Wereldtijdinfo is onderdeel van RM STUDIO