Widget "A Hora Agora " com ícone Bootstrap nativo para o Blogger

 Caso precise de um Widget nativo para o Blogger/ Blogspot você pode copiar e usar em seu blog ou template que esteja construindo.

Widget nativo para Blogger 

Aqui forneceremos 3 exemplos do mais simples ao médio básico de widgets que mostram a hora em tempo real , e de acordo com a localização de  cada visitante.

Exemplo: Cada visitante do seu blog verá a hora de acordo sua geo localização atual, isso pode ser útil para alguns nichos de sites e blogs hospedados no  Blogger ,isso por que um simples widget pode exigir uma vps externa para executar o código e o uso de uma api para configurar as localizações de cada visitante.

No modelo de widgets de timelocal aqui disponível não é nescessário uso de api ou hospedagem externa , sendo assim uma opção mais simples fácil e prática ! 

Veja os exemplos de código copie e use como desejar ou faça melhorias e desenvolva uma nova função  !! 

Confira os exemplos:

Primeiro exemplo é uma codificação simples com pouca aparência e funções, acompanha ícone de alarme Bootstrap nativo  ⏰. Sem função AM/PM 

<div id="current-time-widget"> <svg class="bi bi-alarm" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z"></path> <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1"></path> </svg> <span id="current-time">Carregando...</span> </div> <style> #current-time-widget { display: flex; align-items: center; font-size: 1.2em; margin-top: 10px; } #current-time-widget svg { margin-right: 8px; } </style> <script> document.addEventListener('DOMContentLoaded', function () { // Função para atualizar a hora local function updateLocalTime() { const now = new Date(); const timeString = now.toLocaleTimeString('pt-BR', { hour12: false }); document.getElementById('current-time').textContent = timeString; } // Atualiza a hora a cada segundo setInterval(updateLocalTime, 1000); // Chama a função para definir a hora inicial updateLocalTime(); }); </script>

O segundo exemplo é o código com uma caixa que contém o ícone de alarme ⏰ mais os algarismos numéricos , sem função AM/ PM 

Um pouco mais avançado contendo css mais longo em relação ao anterior.

<div id="current-time-widget"> <div id="time-container"> <svg class="bi bi-alarm" fill="currentColor" height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z"></path> <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1"></path> </svg> <span id="current-time">Carregando...</span> </div> </div> <style> #current-time-widget { display: flex; align-items: center; font-size: 1.2em; margin-top: 10px; } #time-container { display: flex; align-items: center; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } #current-time-widget svg { margin-right: 8px; } </style> <script> document.addEventListener('DOMContentLoaded', function () { // Função para atualizar a hora local function updateLocalTime() { const now = new Date(); const timeString = now.toLocaleTimeString('pt-BR', { hour12: false }); document.getElementById('current-time').textContent = timeString; } // Atualiza a hora a cada segundo setInterval(updateLocalTime, 1000); // Chama a função para definir a hora inicial updateLocalTime(); }); </script>

Já no terceiro e último exemplo adicionamos ao código a função AM/PM além da caixa/borda e ícone alarme ⏰ Bootstrap tornando o código mais sofisticado e avançado 

<div id="current-time-widget"> <div id="time-container"> <svg class="bi bi-alarm" fill="currentColor" height="16" viewbox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9z"></path> <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1zm1.038 3.018a6 6 0 0 1 .924 0 6 6 0 1 1-.924 0M0 3.5c0 .753.333 1.429.86 1.887A8.04 8.04 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5M13.5 1c-.753 0-1.429.333-1.887.86a8.04 8.04 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1"></path> </svg> <span id="current-time">Carregando...</span> </div> </div> <style> #current-time-widget { display: flex; align-items: center; font-size: 1.2em; margin-top: 10px; } #time-container { display: flex; align-items: center; padding: 5px; border: 1px solid #ccc; border-radius: 5px; } #current-time-widget svg { margin-right: 8px; } </style> <script> document.addEventListener('DOMContentLoaded', function () {// Função para atualizar a hora local function updateLocalTime() { const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes().toString().padStart(2, '0'); const seconds = now.getSeconds().toString().padStart(2, '0'); const period = hours >= 12 ? 'PM' : 'AM'; const formattedHours = (hours % 12 || 12).toString().padStart(2, '0'); const timeString = `${formattedHours}:${minutes}:${seconds} ${period}`; document.getElementById('current-time').textContent = timeString; } // Atualiza a hora a cada segundo setInterval(updateLocalTime, 1000); // Chama a função para definir a hora inicial updateLocalTime(); }); </script>

Para testar o código e ver cada um como ficou e até mesmo fazer ajustes e mudanças acesse o editor de código visual click aqui 

Observe que no   editor de código visual os números e a função AM PM não irão ser visíveis devido a não ter um usuário real para definir hora ..

Precisa criar blocos de text área personalizados como os que usamos nessa postagem click aqui para acessar nossa ferramenta online 

Sobre as siglas de horários AM/PM

As siglas "AM" e "PM" são usadas para diferenciar as duas metades do dia em um formato de relógio de 12 horas:

### AM

- Significado: "Ante Meridiem" (Latim para "antes do meio-dia").

- Horário: Refere-se ao período que vai da meia-noite até 11:59 da manhã.

- Exemplo: 10:00 AM é 10 horas da manhã.

### PM

- Significado: "Post Meridiem" (Latim para "depois do meio-dia").

- Horário: Refere-se ao período que vai do meio-dia até 11:59 da noite.

- Exemplo: 10:00 PM é 10 horas da noite.

Essas siglas são especialmente usadas em países como os Estados Unidos e Canadá, onde o formato de 12 horas é mais comum. 

Em muitos outros países, o formato de 24 horas é preferido, onde, por exemplo, 10:00 PM seria representado como 22:00.

Espero que esse código possa ser útil.