Colocar contagem regressiva no blog

Por:

| 21 de jun de 2011

Adicione um relógio com contagem regressiva para um evento importante que queira lembrar aos leitores do seu blog.
Esse contador é totalmente customizável. Você pode alterar a cor de fundo, bordas, cor do texto, colocar uma imagem de fundo,
alterar o evento que quer exibir e a data em que será realizado.
Veja como adicionar o Gadget (widget) de Contagem regressiva em 3 passos simples.

Tutorial

1º Passo - Adicionando o gadget
Para adicionar o gadget vá em:Design / Elementos de página e clique em 'Adicionar um gadget'.
Escolha o gadget HTML / Javascript e cole o seguinte código.

<div style="color:#444444;
font-size:14px;
background:#ffffff url() no-repeat center;
border:1px solid #444444;
max-height:185px;
max-width:250px;
padding:10px;
-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px">

<script type="text/javascript">
document.write("<span id='pageinval35' style='font-family:arial, helvetica, sans-serif; font-weight:bold;';></span>");

function countdown_load99(){var the_event="SÓ FALTAM";

var on_event="EVENTO"; //Mensagem no dia do evento
var event="EVENTO"; //Nome do evento
var yr=2011;
var mo=12;
var da=25;
var hr=00;
var min=00;
var sec=0;
var month='';
var month=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");var bottom_event="";var now_d=new Date();
var now_year=now_d.getYear();if (now_year < 1000)now_year+=1900;var now_month=now_d.getMonth();
var now_day=now_d.getDate();
var now_hour=now_d.getHours();
var now_min=now_d.getMinutes();
var now_sec=now_d.getSeconds();
var now_val=month[now_month]+" "+now_day+", "+now_year+" "+now_hour+":"+now_min+":"+now_sec;event_val=month[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec;difference=Date.parse(event_val)-Date.parse(now_val);differenceday=Math.floor(difference/(60*60*1000*24)*1);differencehour=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);differencemin=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);differencesec=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);if(document.getElementById('pageinval35')){if(differenceday<=0&&differencehour<=0&&differencemin<=0&&differencesec<=1&&now_day==da){document.getElementById('pageinval35').innerHTML=on_event;}else if (differenceday<=-1){document.getElementById('pageinval35').innerHTML="Evento : "+on_event+" ... já passou";}else {document.getElementById('pageinval35').innerHTML="<center><font size='4'>"+the_event+"</font><br/> "+differenceday+" dias<br/> "+differencehour+" horas<br/> "+differencemin+" minutos<br/> "+differencesec+" segundos "+bottom_event+" para... <p/> <font size='4'><b>"+event;}
}setTimeout("countdown_load99()",1000);}countdown_load99();

// distribuição: http://www.blogandofacil.com.br
</script>
</div>


2º Passo - Personalizando o gadget
Altere os seguintes campos para personalizar o gadget: 

font-size:14px; // aqui você define o tamanho da fonte do texto
background:#fff url(url de imagem) no-repeat center; // aqui você define a cor e imagem de fundo do gadget. A imagem deve ter a largura e altura iguais ás do gadget
border:1px solid #444444; // aqui você define largura, estilo e cor da borda do gadget.
max-height:185px; // altura máxima do gadget
max-width:250px; // largura máxima do gadget

3º Passo - Definindo a data e o nome do evento (configurando)
Altere os seguintes campos como desejar.

var on_event="EVENTO"; // Substitua EVENTO pelo nome do evento
var event="EVENTO"; // Repita o nome do evento
var yr=2011; // Ano em que será realizado
var mo=12; // Mês
var da=25; // Dia
var hr=00; // Hora
var min=00; // Minutos


Clique em Salvar.
Se quiser você pode arrastar o gadget para qualquer canto do seu blog. Pronto! :D
Gerador de Senha - Crie senhas mais seguras
- Topo