• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Você já conferiu como Personalizar a Sidebar do seu blog, inclusive como Personalizar os links da sidebar.
Neste tutorial veremos como personalizar os títulos da sidebar.

Se você estiver utilizando o template Minima, você deverá acrescentar o código abaixo referente aos título da sidebar, já que, por padrão, ele não consta nos templates mínima.
Para outros templates já modificados, este trecho já deve constar no código, basta procurar por ele no corpo do html do seu blog.
Procure no seu template os trechos CSS que se referem a sidebar.
Geralmente estão dentro da área :
.sidebar

Como existem muitas variações de estilos a serem aplicados aos títulos da sidebar, vou colocar alguns códigos CSS e destacar cada elemento informando o que cada um representa.
Os estilos deverão ser aplicados por você, de acordo com sua preferência.

Os títulos da sidebar, são representados pela variável:
.sidebar h2

Todos os estilos que você quiser aplicar, deverão, ser sempre incluídos neste trecho.
Veja exemplo:

.sidebar h2 {
margin: 10px;
line-height: 1.5em;  /*--altura da linha do titulo--*/
padding: 10px;
text-align: center; /*--alinhamento do texto do titulo--*/
}

Lembrando que:
text-align: é o alinhamento do texto (pode ser: center= Centro, left= esquerda ou right= direita)

Definir cor para plano de fundo do título da sidebar:

Se quiser incluir uma cor como plano de fundo ao título da sidebar, basta acrescentar a linha “background” e aplicar os estilos a ela.
Exemplo:

.sidebar h2{
background: #CCCCCC;
}

Consulte a tabela de cores html.
Se quiser você também poderá aplicar um efeito gradiente ao background do título.

Você pode optar por colocar uma imagem para compor o fundo do título da sidebar, neste caso você deve determinar o comportamento desta imagem.

.sidebar h2{
background: #CCCCCC url(ENDEREÇO-DA-IMAGEM);
}

Você pode estipular que ela se repita (para cima,para baixo, e para os lados), ou que ela não se repita e fique fixa á direita, á esquerda, no topo, ou no bottom.

Veja as maneiras que você pode estipular o comportamento da imagem:

repeat; – se você quiser que a imagem se repita tanto para cima, quanto para baixo e para os lados;
repeat-y; – a imagem repete somente na vertical
repeat-x; – a imagem repete somente na horizontal
no-repeat; – se você não quer que a imagem se repita, quer que ela fique fixa
top; – Imagem somente no topo
bottom; – imagem somente abaixo
right; – imagem a direita
left; – imagem a esquerda

Lembre-se sempre de informar os espaçamentos, incluindo valores em margin e padding.
Padding: determina as margens internas, é responsável por determinar a distância entre o conteúdo de determinado elemento e sua borda.
Margin: determina a distância de um elemento para outro.
Recomendo que você aprenda mais sobre “padding e margin” , leia o artigo que fala sobre: Diferenças entre Margin e Padding.

Alinhamento do texto do título da sidebar:

text-align:left -> titulo alinhado à esquerda.
text-align:right -> titulo alinhado à direita.
text-align:center -> titulo alinhado o centro.
text-align: justify -> titulo com alinhamento justificado (faz com que o texto contido em uma linha se estenda tocando as margens esquerda e direita).

Definir Transformação da fonte:

Você pode definir transformações da fonte do título da sidebar no formato caixa-alta ou caixa-baixa.
Para definir a propriedade de transformação de textos, você pode atribuir as seguintes variáveis:
text-transform: none; -> sem efeito.
text-transform: capitalize; -> Primeira Letra Das Palavras Maiúsculas.
text-transform: uppercase; -> TODAS AS LETRAS MAIÚSCULAS.
text-transform: lowercase; -> todas letras minúsculas.
font-variant: small-caps -> transforma letras em maiúsculas de menor altura.
font-variant: normal -> sem efeito variante.

Definir decoração da fonte do titulo da sidebar:

Para a decoração do fonte do título você pode atribuir as seguintes variáveis:
text-decoration: underline; -> título sublinhado.
text-decoration: line-through; ->título com linha em cima.
text-decoration: overline; -> título sobrelinhado.
text-decoration:none; -> sem efeito.

Definir espaço entre as letras do título:

Você pode definir o espaço entre os caracteres, ou seja, o espaço que existe entre as letras do título.
Exemplo:
letter-spacing:1px;

Inserir borda no título da sidebar:

Se quiser acrescentar borda ao título, basta incluir no CSS a variável para borda.
Exemplos de bordas:

border: 1px solid #000000 -> borda em volta de toda área do título.
border-bottom:1px solid #000000 -> borda apenas abaixo do título.
border-top: 1px solid #000000 -> borda apenas acima do titulo.
border-left: 1px solid #000000 -> bordas apenas á esquerda.
border-right:1px solid #000000 -> bordas apenas á direita.

Você também pode aplicar o efeito de Bordas Arredondadas e efeito sombreado nas bordas. Veja um exemplo com borda arredondada e efeito sombreado na borda:

border:1px solid #000000;
box-shadow: 5px 4px 10px #ccc;
-moz-box-shadow: 5px 4px 10px #ccc;
-webkit-box-shadow: 5px 4px 10px #ccc;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Veja mais sobre tipos de bordas em:
Personalizar Bordas

Definir estilo da fonte do titulo da sidebar:

Estilo da fonte: normal e italic.
Se você deseja que a fonte do título se apresente em itálico, devemos incluir no CSS a variável para o estilo da fonte.
Exemplo:
font-style: italic;
A fonte pode ser definida para se apresentar em negrito(bold).
Exemplo:
font-weight:bold;

Você também pode aplicar efeito sombra na fonte do título da sidebar.
Exemplo:
text-shadow: 2px 2px 2px #000000;

Definir cor e tamanho da fonte do titulo da sidebar:

Geralmente as alterações para cor e tamanho da fonte dos títulos da sidebar podem ser feitas através do painel do Blogger. Basta entrar na aba “designer do modelo” e clicar na opção “avançado”.
Mas se no seu template não tem esta possibilidade, você pode aplicar estilos para definir uma cor ou tamanho da fonte do titulo da sidebar diretamente no trecho CSS, basta incluir o código correspondente referente a cor e tamanho da fonte que você deseja que o título da sidebar tenha.

.sidebar h2{
color: #XXXXXX;  /*--cor da fonte--*/
font-size:Xpx;  /*--tamanho da fonte--*/
}

Definir tipo de fonte para o título da sidebar:

Você pode definir o tipo de fonte para o título diretamente no trecho CSS, basta incluir a definição da fonte que você deseja , defina sua fonte preferida, seguindo-se de algumas alternativas para ela, e encerre a listagem das fontes com uma fonte genérica, assim se o navegador do usuário não encontrar na memória do computador a primeira fonte, usará a segunda e assim por diante.
Exemplo:
font-family: ‘Trebuchet MS’, Arial, Serif;

Veja também:
Fontes diferentes para usar no blog

Identificando o código referente aos Títulos da sidebar nos templates Designer de Modelo:

Não há como eu informar precisamente o código CSS correspondente aos títulos da sidebar existentes nos templates designer de modelos, pois devido a facilidade de poder escolher como dividir as colunas da sidebar, o código CSS referentes aos títulos da sidebar podem variar dependendo do modelo que você estiver usando e da quantidade de colunas que você já tiver determinado.
Entretanto, posso deixar uma dica para que você mesmo possa tentar localizar o trecho referente aos títulos da coluna sidebar, do modelo que estiver usando.
Desta forma, conseguindo identifica-lo, você poderá acrescentar o código aplicando alguns estilos CSS, como bordas e background.

As alterações para cor e tamanho da fonte dos títulos da sidebar podem ser feitas através do painel do Blogger.
Basta entrar na aba “designer do modelo” e clicar na opção “avançado”.

Para identificar o código referente ás colunas sidebar no seu template, é necessário que você já tenha seus widgets instalados na sidebar, para facilitar a identificação.
Entre na aba “design” >> “editar html” >> marque a caixinha “expandir modelos de widget” e procure o código referente aos widgets.
É só procurar pelo título que você deu a cada widget.

Vou exemplificar, para tornar o entendimento mais fácil.
Na minha coluna sidebar eu adicionei o gadget de “Perfil” que por padrão, o titulo ficou: “Quem sou eu”, procurando pelo trecho referente a este título, eu encontrei este código:

<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>

na linha acima está:

<b:section-contents id='sidebar-right-1'>

e na linha abaixo está:

</b:section-contents>

este trecho que encerra o gadget citado.

Notem que o código de abertura do gadget em “id” temos o código: sidebar-right-1
é este trecho de código que você vai usar para aplicar o estilo ao título.

Agora entre na aba “design” >> “editar html” e procure pela tag ]]></b:skin>
e cole ANTES dela o código CSS referente ao trecho que você localizou, desta forma:

#sidebar-right-1 h2{

}

Você deve localizar o código referente a cada título dos widgets da sidebar (um por um) e incluir o código CSS seguidos dos estilos que você deseja aplicar para cada um deles.

Caso queira substituir os títulos (textos) da sidebar por uma imagem personalizada, veja este tutorial Substituir Títulos da Sidebar por Imagens.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn