Colocar imagem nos títulos da sidebar

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;