Códigos para personalizar datas em templates nativos do Blogger

Views:

Template Simples:


Localize:

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

E troque por:

.date-header span {
border: none;
background-color: $(date.header.background.color); /*COR E FUNDO DA DATA */
color: $(date.header.color); /*COR DA FONTE DA DATA*/
letter-spacing: $(date.header.letterspacing);
width: 170px; /*LARGURA*/
height: 25px; /*ALTURA*/
padding: 5px;
padding-top: 5px;
text-align: center;
margin-top: -25px;
margin-left: 40%;
}


Dicas extras:
Fonte da data, cor de fundo e cor da fonte são alteradas via painel administrativo, aba Tema/Personalizar/Avançado/Cabeçalho da data.


Templates Marca d'água:

Localize:

h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

E substitua por:

h2.date-header {
background-color: #ddbcc1; /*COR DE FUNDO DA DATA*/
border: none;
padding: 0.4em;
margin: inherit;
  font: $(date.font); /* FONTE DA DATA*/
  color: $(date.text.color); /*COR DA FONTE DA DATA*/
width: 170px; /*LARGURA DA DATA*/
height: 20px; /*ALTURA DA DATA*/
padding: 2px;
padding-top: 10px;
text-align: center;
margin-top: -25px;
margin-left: 40%;
}

Usar imagem no Template Marca d'água


Use este código em qualquer template que tenha como tema-base os modelos Marca d'água:

h2.date-header {
background:transparent url(https://2.bp.blogspot.com/-Pnjxys1C1xU/WneB8gwQM0I/AAAAAAABdIc/p25On6EEqWg4K7j3ajlOfWMS5xkidjIlACLcBGAs/s1600/data%2B1.png) no-repeat;
width: 180px;
height: 55px;
padding: 2px;
padding-top: 35px;
text-align: center;
margin-top: -15px;
margin-left: 40%;
margin-bottom: -45px;
font: $(date.font);
color: $(date.text.color);
}

Dicas extras:
Para trocar a imagem substitua a url marcada em laranja pelo endereço da sua imagem.
E altere os valores:

width: 180px;
height: 55px;

Pelo valor da largura e da altura de sua imagem.
Ajuste a propriedade margin para posicionar a imagem, e a propriedade padding para ajustar a data dentro da imagem.

Template Espetacular

Localize:

.main-inner .widget h2.date-header {
  margin: 0 -15px 1px;
  padding: 0 0 $(date.padding.bottom) 0;

  font: $(date.font);
  color: $(date.text.color);

  background: $(date.background);

  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);

  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);

  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}


E substitua tudo por:

.main-inner .widget h2.date-header {
  width: 170px; /*LARGURA DA DATA*/
height: 25px; /*ALTURA DA DATA*/
padding: 2px;
padding-top: 8px;
text-align: center;
margin-top: -25px;
margin-left: 40%;
text-align: center;
font: $(date.font); /* FONTE DA DATA*/
color: $(date.text.color); /*COR DA FONTE DA DATA*/
background: #000000; /*COR DE FUNDO DA DATA*/
border: none;
  }

.main-inner .widget h2.date-header span {
  font: $(date.font); /* FONTE DA DATA*/
  display: block;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}


Dicas extras:
Fonte da data e cor da fonte são alteradas via painel administrativo, aba Tema/Personalizar/Avançado/Cabeçalho da data.


Template Janela da imagem


Localize:
.date-header span {
  color: $(date.header.color);
}

E troque por:

.date-header span {
background-color: #000000; /* FUNDO DA DATA*/
border: none;
color: $(date.header.color); /* COR DA FONTE DA DATA*/
font: 12px Arial; /* FONTE DA DATA*/
width: 170px;
height: 25px;
padding: 5px;
padding-top: 5px;
text-align: center;
margin-left: 44%;
}

Dicas extras:
Cor da fonte é alterada via painel administrativo, aba Tema/Personalizar/Avançado/Cabeçalho da data.


Templates Celestial:


Localize:

.main-inner .widget h2.date-header {
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}

E troque por:

.main-inner .widget h2.date-header {
background-color: #000000; /* FUNDO DA DATA*/
border: none;
color: #ffffff; /* COR DA FONTE DA DATA*/
font: 12px Arial; /* FONTE DA DATA*/
width: 170px;
height: 25px;
padding: 2px;
padding-top: 12px;
text-align: center;
margin-left: 44%;
border-bottom: 1px solid $(widget.title.border.bevel.color);
}


Template Viagem


Localize:

.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

E troque por:

.main-inner h2.date-header {
background:#000000; /* FUNDO DA DATA*/
border: none;
width: 170px;
height: 20px;
padding: 2px;
padding-top: 10px;
text-align: center;
margin-top: -35px;
margin-left: 40%;
  font: $(date.font); /* FONTE DA DATA*/
  color: $(date.text.color); /* COR DA FONTE DA DATA*/
}

Dicas extras:
Cor e tipo da fonte é alterada via painel administrativo, aba Tema/Personalizar/Avançado/Cabeçalho da data.


Usar imagem no Template Viagem


Use este código em qualquer template que tenha como tema-base os modelos Viagem:


.main-inner h2.date-header {
background:transparent url(https://2.bp.blogspot.com/-Pnjxys1C1xU/WneB8gwQM0I/AAAAAAABdIc/p25On6EEqWg4K7j3ajlOfWMS5xkidjIlACLcBGAs/s1600/data%2B1.png) no-repeat;
width: 180px;
height: 55px;
padding: 2px;
padding-top: 35px;
text-align: center;
margin-top: -55px;
margin-left: 40%;
margin-bottom: -25px;
  font: $(date.font);
  color: $(date.text.color);
}


Dicas extras:
Para trocar a imagem substitua a url marcada em laranja pelo endereço da sua imagem.
E altere os valores:

width: 180px;
height: 55px;

Pelo valor da largura e da altura de sua imagem.
Ajuste a propriedade margin para posicionar a imagem, e a propriedade padding para ajustar a data dentro da imagem.

Home Sobre mim Tutoriais Loja de templates Portfólio Fanpage