Colocar imagem nos títulos da sidebar - Novos Modelos

Este tutorial se aplica aos novos modelos de templates (Designer de Modelo).

Colocar uma imagem junto aos títulos dos widgets da sidebar nos novos modelos do Blogger é bastante simples e isso pode ser feito através do painel Designer de Modelo.

1- Clique no link Design e depois em Designer de Modelo;
2- Já no painel escuro que se abre, clique em Avançado (última opção do menu à esquerda);
3- Clique em 'Adicionar CSS' (também última opção da lista);
4- Na caixa em branco que se abre, acrescente o seguinte código:

.sidebar .widget h2{background: url(aqui a url da imagem) no-repeat center right; padding: 10px 0px;}

center right determina que a imagem apareça à direita do título na sidebar, como na imagem abaixo (estrela):

Imagem da estrela à direita do título 'Lista 01'

Note que ao inserir o código CSS a visualização do resultado é imediata. Para salvar, basta clicar em Aplicar ao Blog

Você pode salvar sua imagem no próprio Blogger (Picasa) seguindo estes passos:

1- Clique em Nova Postagem e hospede a imagem já salva em seu computador, dentro da área do post;

 2- Clique em Editar HTML, copie a url da imagem e transfira para o código acima (no lugar de 'aqui a url da imagem');

 
3- salve o post como Rascunho. Você poderá também excluir esta postagem posteriormente (sem clicar na opção de excluir a imagem).

Neste exemplo, além de acrescentar a imagem, coloquei uma borda dupla abaixo do título:

E o código acrescentado foi:

.sidebar .widget h2{background: url(http://4.bp.blogspot.com/-BMkR1jw_tVo/TbVcNgzWq1I/AAAAAAAATRw/__D2bm8Vf8w/s1600/star.png) no-repeat 99% 0%; padding: 8px 0px 2px;border-bottom: 3px double #fff; margin: 3px 0px; }

Se você quiser acrescentar imagens diferentes para cada widget, é preciso primeiro saber o nome que cada um recebe. Para isso, clique em Editar HTML e procure no código do template
trechos semelhantes a:

<b:widget id='CustomSearch1' locked='false' title='Pesquisar' type='CustomSearch'/>

o modelo será sempre assim, iniciando por <b:widget id= e o que vier logo depois, entre aspas, é a id do elemento que foi acrescentado na sidebar; neste caso, CustomSearch1, que é o widget de Pesquisa. Agora que já sei a id correta, volto para Designer de Modelo e em Avançado -> Adicionar CSS, coloco o seguinte código:

#CustomSearch1 h2{background: url(url da imagem) no-repeat 99% 0%;padding: 18px 0px 5px;}

Resultado:

Uma imagem para cada widget

Note que no primeiro caso que expliquei lá no começo do tutorial, determinamos estilo para todos os títulos da sidebar, com .sidebar .widget h2 e neste último caso estamos especificando um widget em particular.O que foi determinado no primeiro caso prevalecerá sobre todos os outros e por isso a borda branca aparece abaixo do título. Caso não queira que a borda apareça em um determinado widget, basta acrescentar border:none;

Leia Mais

Estilo para os titulos da sidebar

Antes de tudo, preciso avisar que este tutorial serve para os modelos de layout (não testei os novos modelos) e foi usado um template Mínima.

A classe a que pertencem os títulos da sidebar é h2 e no template Mínima existe um trecho do código para h2, que engloba os títulos da sidebar e a data dos posts:

/* Headings
----------------------------------------------- */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;}

Mas você pode dar outros estilos para os títulos da sidebar, inclusive usando imagens e cores diferentes para cada um, bastando acrescentar um pouquinho mais de css.

Sidebar sem estilo:

Primeiro, localize no código CSS, o trecho:

/* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;}

Logo depois, acrescente:

.sidebar h2{   }

é entre as chaves que você irá acrescentar o estilo que pretende dar aos títulos da sidebar. Por exemplo:

.sidebar h2{
font-size: 22px;
color: red;}

resultado:

Você pode acrescentar aqui estilos para a fonte e cores do plano de fundo (ou até mesmo uma imagem para o background). Pode, por exemplo, determinar que a primeira letra de cada titulo seja diferente do restante:

.sidebar h2{
font-size: 17px;
color: #777e95;
font-family: Tahoma;}

.sidebar h2:first-letter {
font-family:Tangerine;
color:#8262ae;
font-size:38px;
font-weight: bold}

resultado:

Posso criar e acrescentar uma imagem de fundo (aqui criei uma imagem 320 x 50):

.sidebar h2{
width: 320px;
height: 50px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
}

resultado:

Note como os títulos não ficaram centrados (estão muito 'para cima'). Então, não basta colocar a medida da imagem, é preciso usar um pouco de padding:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;}

resultado:

 Veja que eu subtrai de height o valor que coloquei em padding-top.

Mas o titulo ainda está 'grudado' no limite à esquerda da imagem. Preciso usar padding aqui? Não. Basta acrescentar text-indent:

.sidebar h2{
width: 320px;
height: 35px;
font-size: 17px;
color: #777e95;
font-family: Tahoma;
background: url(http://3.bp.blogspot.com/_YGpl3rQPSzI/TPPq5PUdiBI/AAAAAAAAQ-I/hrx4kFtnQG4/s1600/side.png)  no-repeat;
padding-top: 15px;
text-indent: 10px;}

resultado:

Agora eu quero usar um ícone diferente para cada título da sidebar. Como expliquei aqui, procure o id de cada widget que acrescentou na sidebar. No meu caso, são:

Anote as ID's e acrescente lá no CSS:

#CustomSearch1 h2{
background: #ccc url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

Veja que já não vale mais o background que coloquei em .sidebar h2. O que fiz aqui foi colocar uma cor de fundo e o ícone posicionado, 10px de distância do topo do espaço ocupado pelo título e 280px de distância da esquerda, além de uma borda arredondada de 5px (código em vermelho):

Faça o mesmo para cada widget da sidebar e em cada um coloque uma imagem e cor  diferente:
#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px; }

#Profile1 h2{
background: #E3FDB3 url(http://1.bp.blogspot.com/_YGpl3rQPSzI/TPPjxoHvnII/AAAAAAAAQ9k/7oDcQSHmh4A/s1600/Buddy+Chat_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

#Label1 h2{background: #FCF1B4 url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPj1QzXk3I/AAAAAAAAQ9w/kgBQ1cSLbeo/s1600/Tag_32.png)  no-repeat 280px 10px;
-moz-border-radius: 5px;
border-radius: 5px;}

resultado:

Invertendo a posição do ícone:

#CustomSearch1 h2{
background: #DAF2FE url(http://2.bp.blogspot.com/_YGpl3rQPSzI/TPPjWZXr1wI/AAAAAAAAQ9g/5Qkq22EfRUQ/s1600/Find+Search_32.png)  no-repeat 4px 10px;
text-indent: 36px;
-moz-border-radius: 5px;
border-radius: 5px; }

Para completar, veja este tutorial no blog Vagabundia, que ensina como usar span para dar estilos diferentes para um mesmo título.

Leia Mais