Adicionando contagem regressiva ao blog

Compartilhar:
Olá amigos blogueiros! Como já repararam aqui no blog, adicionei uma contagem regressiva ao blog fazendo a contagem de dias faltantes para o lançamento oficial do Windows 8. Mas como fiz para criar tal contagem regressiva? Fiz tudo aquilo com a ajuda do ClockEasy e é claro, uma boa pitada de minhas ideias. Vamos ver como fazer bem direitinho? Então prossiga o tutorial.

1. Primeiramente, acesse a página do ClockEasy na guia Countdown, para diminuir o trajeto, acesse o link direto.

2. Ao abrir a página, você se depara com inúmeras funcionalidades, vamos explicá-las.
Clique na imagem para ampliar
  • 1: Estilo - Você pode escolher entre inline ou block. Veja as ilustrações do site;
  • 2: Data - Data de término da contagem. Ex.: A partir de hoje até o dia 10/30/2012;
  • 3 e 4: Hour e Minute -  Hora e minuto do término da data, horário que irá terminar a contagem;
  • 5: Until event - Nome do evento que aparecerá antes da contagem;
  • 6: On Event - Mensagem que aparecerá quando chegar a hora e o dia da contagem;
  • 7: More details - Caso deseje, adicione detalhes adicionais;
  • Sem número: Estilos da contagem;
  • 8: Padding - Caso escolha uma borda, a distância interna da borda ao texto;
  • 9: Generate - Gera o código da contagem.
3. Ao configurar tudo como desejado, clique no botão Generate e copie o código fornecido.

4. Logo, acesse o painel de controle do seu blog e clique em Layout e clique em Adicionar um gadget. Selecione a opção HTML/JavaScript, se desejar, coloque um título e em Conteúdo cole o código copiado no passo anterior.

5. Clique no botão Salvar e em seguida em Salvar organização.

Pronto! Não é bem simples fazer uma contagem regressiva? Ah, e se você voltar à página inicial do site, você verá inúmeras opções relacionadas a relógios. Caso você entenda bem o código, pode dar uma personalizada (como eu fiz). Caso tenha dúvidas, deixe seu comentário e até a próxima!
► Postagens Relacionadas:

4 Comentários

Herlan Santos disse...

Olá João.


Excelente tutorial, muito bom esse widget.


Abraços!

23 de outubro de 2012 23:51
João Almeida disse...

Obrigado Herlan! Volte sempre.

24 de outubro de 2012 12:56
José Alves disse...

João Parabéns! Só não consigo gerar o código. Fica branco! O que faço?

24 de agosto de 2013 04:41
Luke Novaes disse...

Oi João boa noite!
Como eu faço para personalizar? O contador está funcionando certinho mais é muito simples.
Como faço para alterar sem estragar o código HTML. Ainda não entendo muito desse tipo de código uso ele mais no cópia e cola.

20 de julho de 2015 21:22

Postar um comentário