Personalizar os títulos do Gadgets do blogger

em 9 de setembro de 2016

A pedido de uma leitora, estarei compartilhando sobre a personalização dos títulos do Gadgets do Blogger.
Os créditos desse tutorial vai para Elaine Gaspareto, pois foi de lá que peguei os códigos.

1 - Vá na sessão modelo e depois clica em editar html
2 - Dê um Ctrl+F e digita h2 {  e dê enter

Se você ainda não personalizou o seu blog, o código estará assim:

h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

3 - Substitua esse código, pelo código abaixo em vermelho

h2 {
font:normal 16px Comic Sans MS; /*FONTE DO TÍTULO DO GADGET*/
color: #FFF;  /*COR DO TÍTULO*/
text-align: center;  /*POSIÇÃO DOS TÍTULOS)*/
background: #000;  /*COR DE FUNDO*/
}

Prontinho! fácil, não é mesmo? Veja na imagem abaixo como ficou. O fundo preto, cor da fonte branco e título centralizado

Caso queira colocar uma imagem ao invés da cor, use esse código a seguir
h2 {
font:normal 16px Comic Sans MS; /*FONTE DO TÍTULO DO GADGET*/
text-align: center;  /*POSIÇÃO DOS TÍTULOS)*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: transparent url(ENDEREÇO DA IMAGEM) center no-repeat;
height: 30px; /*ALTURA DA IMAGEM*/
width: 262px; /*LARGURA DA IMAGEM*/
}

Veja abaixo alguma sugestões de faixinhas.

Ficou assim com a imagem, mas não gostei da faixa atrás da data, então vamos remover

Para isso, procure pelo código .main-inner h2.date-header { ele estará logo abaixo desse código que personalizamos, qualquer dúvida, copie o código, dê um Ctrl+f, coloque o código copiado na barra de busca e dê um enter. E abaixo do código encontrado cole isso: background: transparent;

O código completo ficaria assim:

.main-inner h2.date-header {

  font: $(date.font);

  color: $(date.text.color);

background: transparent;

}

Bom, não sou boa em explicação, mas espero que tenham entendido. até a próxima!

COMPARTILHE!