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;
