quinta-feira, 27 de dezembro de 2012

Tutorial: Como colocar widget contagem regressiva no blog!



Olá!
Hoje vou-vos ensinar a colocar um widget de contagem regressiva no seu blog!

1º Passo
Vá Blogger » Design » adicionar um gadget » HTML/JavaScript e cole o codigo abaixo (completo!)


<div style="color:#444444;
font-size:14px;
background:#ffffff url(Url da imagem) 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
Depois de colar o gadget, no inicio do codigo vai mudar o seguinte: 


background:#ffffff url(Url da imagem) no-repeat center;   - onde diz url da imagem, ponha o url da imagem que quer usar para fundo!

var on_event="EVENTO"; //Mensagem no dia do evento  - Onde diz evento, ponha o nome do evento
var event="EVENTO"; //Nome do evento  - ponha outra vez o nome do evento
var yr=2011;  - Onde diz  2011, ponha o ano  em que se realiza o envento
var mo=12;   - Onde está 12, ponha o mês em  que se realiza o evento
var da=25;  - Onde está 25, ponha o dia em que se realiza o evento
var hr=00;  - Onde está 00, ponha a hora em que se realiza o evento
var min=00;  - Onde está 00, ponha os minutos em que se realiza o evento


E já está!!

Créditos ao site Blogando facil!!


Bjs e até ao próximo post!




Sem comentários:

Enviar um comentário