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.
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!
Nenhum comentário:
Postar um comentário