Imagem para cada item da sidebar

Uma imagem para cada item da sidebar

Vou ensinar colocar uma imagem diferente para cada título da sidebar, como neste blog de testes.

1-Após instalar na Sidebar as widgets (Elementos de Página, como listas de links, imagens, slide, etc,) vá em Editar HTML, clique emExpandir Modelo de Widget e procure por este trecho ( o título será o mesmo que você escolheu para a widget):

<b:widget id='LinkList4' locked='false' title='Link Link' type='LinkList'><b:includable id='main'>
<div class='link1'><b:if cond='data:title'><h2><data:title/></h2></b:if></div>
<div class='widget-content'>

Acrescente ao código o que está em vermelho.

2-Agora cole este código acima de ]]></b:skin>:

.link1{
background: #CEF7FF url(link da imagem) no-repeat top right}

Você pode dar qualquer nome que desejar a class que criar, contanto que seja extamente o mesmo utilizado no CSS e no HTML.
Para cada widget adicionada deve-se repetir o procedimento, criando umadiv classoriginal para cada uma. No exemplo do meu blog de testes criei:

.link1{
background: #CEF7FF url(http://i30.tinypic.com/2a9crd1.png) no-repeat top right}
.link2{
background: #CEFFE8 url(http://i31.tinypic.com/2rrwh34.jpg) no-repeat top right}
.link3{
background:#FFF5CE url(http://i30.tinypic.com/25f7tdt.jpg) no-repeat top right}
.link4{
background:#FFCECE url(http://i25.tinypic.com/nxqtls.jpg) no-repeat top right}

Nota: certifique-se de que seu template contém o trecho que corresponde aos títulos da sidebar, no CSS (.sidebar h2{) para que você possa alinhar os títulos com as imagens.