Personalizar os títulos dos gadgets

Hoje vou partilhar com você uma dica simples e bem facinha de fazer: colocar fundo em seus títulos dos gadgets,
Assim, como eu uso atualmente (09/2013):

Para começar acesse a aba Modelo de seu blog, e a seguir clique em Editar html.
Dentro da caixa de código tecle Ctrl+F e na barra de busca que abrir procure por isso:

h2 {

Essa é a tag que define a aparência dos títulos dos gadgets.
Caso você nunca tenha personalizado essa parte estará assim:

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

Agora vou ensinar o básico para personalizar.
Veja os códigos:

Centralizando o título:

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

Colocar uma cor de fundo:

 h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
}

Arredondando as bordas do fundo:

 h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
background: #000;
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

Sendo que 3px é o ângulo de arredondamento. Quanto maior o número mais arredondado fica. Mantenha o mesmo número nas 4 ocorrências pois cada uma delas é um filtro para os diferentes navegadores.

Colocando imagem ao invés de cor:

h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
background: transparent url(ENDEREÇO DE SUA IMAGEM) center no-repeat 
height: 50px; /*altura da imagem*/
width: 200px;  /*largura da imagem*/
}

Você pode colocar faixinhas, por exemplo. Basta saber o tamanho dela e hospedar para obter a url da imagem.
Sugestões de imagens:

 Crédito das faixinhas: Tumblr

 Caso queira colocar uma imagem tipo papel amassadinho, por exemplo, troque no-repeat por repeat no código e mantenha os valores em height e width.

Colocando sombra no texto do título:

h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #000;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
}


Veja como ficaria o código completo, com fundo vermelho:

h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: #ff000b;  /*color de fundo*/
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}

E aqui o código completo, com a faixinha verde:

h2 {
font: $(widget.title.font);  /*fonte do título do gadget*/
color: $(widget.title.text.color);  /*cor da fonte*/
background: transparent url(http://3.bp.blogspot.com/-9qSzwQLCQME/UhfxRyrdrRI/AAAAAAAAuXQ/XUmtp_3gk7s/s1600/popular-smaller-2.png) center no-repeat;
height: 49px;
width: 262px;
text-shadow:0px 1px 1px #fff; /*cor e inclinação da sombra*/
 -moz-border-radius: 3px;
-webkit-border-radius:3px;
-goog-ms-border-radius: 3px;
border-radius:3px;
}


Copiar os códigos
Agora é com você!
À partir desses códigos básicos você pode mudar, colocar outros tipos de imagens, colocar bordas, etc.
Não há limite!

Gostou?
Clica em curtir!
Eu agradeço!