Real-Time World Clocks for Your Website – Add Live Global Time Zones Easily

Do you want to display real-time world clocks on your Blogger website? This live global clock widget is designed to show the current time from major cities around the world — including New York, Los Angeles, Istanbul, Tokyo, Beijing, Delhi, London, Rio de Janeiro, and Berlin. It’s fully responsive, lightweight, and updates automatically every second. Whether you run a travel, finance, or lifestyle blog, adding a live clock enhances visitor engagement and gives your site a professional look. Best of all, you can add this widget to your blog with a simple copy-and-paste — no technical skills required!

New York

Los Angeles

Istanbul

Tokyo

Beijing

Delhi

London

Rio de Janeiro

<!-- World Clock Widget | Created by Earn Money Online Mastery -->

<!-- https://earnmonyonlinemastery.blogspot.com/ r -->

<style>

.world-clock-container {

  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  justify-content: center;

  font-family: Arial, sans-serif;

  margin-top: 20px;

}

.clock-card {

  background: linear-gradient(135deg, #0078d7, #00b4d8);

  color: white;

  border-radius: 15px;

  width: 170px;

  text-align: center;

  padding: 10px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  transition: transform 0.2s ease-in-out;

}

.clock-card:hover {

  transform: scale(1.05);

}

.city-name {

  font-weight: bold;

  font-size: 18px;

  margin-bottom: 5px;

}

.time-display {

  font-size: 20px;

  font-weight: 600;

}

</style>

<div class="world-clock-container">

  <div class="clock-card"><div class="city-name">New York</div><div class="time-display" id="ny-time"></div></div>

  <div class="clock-card"><div class="city-name">Los Angeles</div><div class="time-display" id="la-time"></div></div>

  <div class="clock-card"><div class="city-name">Istanbul</div><div class="time-display" id="ist-time"></div></div>

  <div class="clock-card"><div class="city-name">Tokyo</div><div class="time-display" id="tokyo-time"></div></div>

  <div class="clock-card"><div class="city-name">Beijing</div><div class="time-display" id="beijing-time"></div></div>

  <div class="clock-card"><div class="city-name">Delhi</div><div class="time-display" id="delhi-time"></div></div>

  <div class="clock-card"><div class="city-name">London</div><div class="time-display" id="london-time"></div></div>

  <div class="clock-card"><div class="city-name">Rio de Janeiro</div><div class="time-display" id="rio-time"></div></div>

  <div class="clock-card"><div class="city-name">Berlin</div><div class="time-display" id="berlin-time"></div></div>

</div>

<script>

function updateClocks() {

  const options = { hour: '2-digit', minute: '2-digit', second: '2-digit' };

  document.getElementById("ny-time").innerText = new Date().toLocaleTimeString('en-US', { timeZone: 'America/New_York', ...options });

  document.getElementById("la-time").innerText = new Date().toLocaleTimeString('en-US', { timeZone: 'America/Los_Angeles', ...options });

  document.getElementById("ist-time").innerText = new Date().toLocaleTimeString('tr-TR', { timeZone: 'Europe/Istanbul', ...options });

  document.getElementById("tokyo-time").innerText = new Date().toLocaleTimeString('ja-JP', { timeZone: 'Asia/Tokyo', ...options });

  document.getElementById("beijing-time").innerText = new Date().toLocaleTimeString('zh-CN', { timeZone: 'Asia/Shanghai', ...options });

  document.getElementById("delhi-time").innerText = new Date().toLocaleTimeString('en-IN', { timeZone: 'Asia/Kolkata', ...options });

  document.getElementById("london-time").innerText = new Date().toLocaleTimeString('en-GB', { timeZone: 'Europe/London', ...options });

  document.getElementById("rio-time").innerText = new Date().toLocaleTimeString('pt-BR', { timeZone: 'America/Sao_Paulo', ...options });

  document.getElementById("berlin-time").innerText = new Date().toLocaleTimeString('de-DE', { timeZone: 'Europe/Berlin', ...options });

}

setInterval(updateClocks, 1000);

updateClocks();

</script>

💡 How to Add This Widget to Your Blogger Site

You can easily display this real-time world clock on your Blogger website:

1. Go to your Blogger Dashboard → Layout → Add a Gadget.

2. Choose HTML/JavaScript.

3. Copy and paste the full code above.

4. Save and refresh your blog to see the live clocks instantly!

This widget updates every second and works perfectly on mobile and desktop.
Created by Earn Money Online Mastery 🌍