24 de agosto de 2016

Gadget de Calendário para Blogger

Apresento à vocês um Gadget bastante simples e funcional com objetivo de marcar o dia, mês e ano aos visitantes do seu blog, ou seja, um calendário!


O calendário em si é o mesmo representado na imagem acima e pode ser utilizado em qualquer tipo de blog ou site. A principal funcionalidade dele é a marcação do dia da semana, muito legal né?

Como adicionar o Gadget

  1. Acesse o Painel do Blogger
  2. Vá até Layout do seu blog desejado e escolha a área em que quer adicionar o gadget e clique em Adicionar um Gadget e escolha o HTML/JavaScript e cole o seguinte código:
  3. <style>
    #calendario{
    width: 100%;
    height: 195px;
    }
    </style>
    <div id="calendario">
    <script language="JavaScript">
    <!-- Begin
    var dia_da_semana = new Array('Dom','Seg','Ter','Qua','Qui','Sex','Sab');
    var mes_do_ano = new Array('Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro');
    var Calendar = new Date();
    var ano = Calendar.getFullYear();      
    var mes = Calendar.getMonth();    
    var hoje = Calendar.getDate();    
    var dia = Calendar.getDay();  
    var DIA_DA_SEMANA = 7;    
    var DIA_DO_MES = 31;    
    var imprimir;    
    Calendar.setDate(1);    
    Calendar.setMonth(mes);    
    var TR_start = '<TR>';
    var TR_end = '</TR>';
    var highlight_start = '<TD WIDTH="29"><TABLE CELLSPACING=0 BGCOLOR=E0F8F7><TR><TD WIDTH=29><B><CENTER>';
    var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
    var TD_start = '<TD WIDTH="25"><CENTER>';
    var TD_end = '</CENTER></TD>';
    imprimir =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=1ba0e1><TR><TD>';
    imprimir += '<TABLE BORDER=1 BORDERCOLOR=eeeeee CELLSPACING=0 CELLPADDING=2>' + TR_start;
    imprimir += '<TD COLSPAN="' + DIA_DA_SEMANA + '" BGCOLOR="#f2a41d"><CENTER><B>';
    imprimir += mes_do_ano[mes].fontcolor("White")  + ' <font color="White">  ' + ano + '</font></B>' + TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < DIA_DA_SEMANA; index++)
    {
    if(dia == index)
    imprimir += TD_start + '<B>' + dia_da_semana[index] + '</B>' + TD_end;
    else
    imprimir += TD_start + dia_da_semana[index] + TD_end;
    }
    imprimir += TD_end + TR_end;
    imprimir += TR_start;
    for(index=0; index < Calendar.getDay(); index++)
    imprimir += TD_start + '  ' + TD_end;
    for(index=0; index < DIA_DO_MES; index++)
    {
    if( Calendar.getDate() > index )
    {
      week_day =Calendar.getDay();
      if(week_day == 0)
      imprimir += TR_start;
      if(week_day != DIA_DA_SEMANA)
      {
      var day  = Calendar.getDate();
      if( hoje==Calendar.getDate() )
      imprimir += highlight_start + day + highlight_end + TD_end;
      else
      imprimir += TD_start + day + TD_end;
      }
      if(week_day == DIA_DA_SEMANA)
      imprimir += TR_end;
      }
      Calendar.setDate(Calendar.getDate()+1);
    }
    imprimir += '</TD></TR></TABLE></TABLE>';
    
    document.write(imprimir);
    </script></div>
    
  4. Clique em Salvar e pronto!
Seu calendário já está funcionando, se você quiser personalizar a cor de fundo onde marca o mês e ano, pesquise por #f2a41d no código e troque pelo código da cor desejada.

Dúvidas? deixe um comentário.
5 estrelas - baseado em 759 votos

Trabalho com desenvolvimento web profissionalmente desde 2014, fundei a Web Creative em 2015, uma agência focada em criação de sites e resultados digitais. Através desse blog passo um pouco da minha experiência de 6 anos com o Blogger.

Recomendamos também

0 comentários: