Estamos chegando à parte final da estrutura do template. Após essa postagem nos restam apenas alguns detalhes e opcionais. Aqui vou ensinar como mudar os efeitos da sidebar, e na próxima postagem ensino como fazer para definir o tamanho das colunas.

1º – Faça login no Blogger, entre em “Layout” -> “Editar HTML”;

2º – Vamos editar o título da sidebar. Encontre (Ctrl + f):

.sidebar h2 {

Fiz as seguintes mudanças:

padding: 5px;
border: 1px solid #000;
font-size: 13px;

Onde padding define as distancias do escrito das bordas. Border é a configuração das bordas, coloquei 1px solido de cor preta. Font-size é o tamanho da fonte, usei 13px como vocês podem ver.
“Brinque” um pouquinho, vale a pena você testar efeitos, fontes, tamanhos, etc. O Google oferece diversas fontes para isso.

A cor de fundo e a cor da letra estão como variáveis, sendo possível sua modificação diretamente na aba “Fontes e cores”. Assim não é necessária a mudança direta no CSS.

3º - Procure:

.sidebar li {

Vamos editar o \"li\" da sidebar. Podemos dizer que está é a parte em que mudamos os links da sidebar, a parte básica.
Apague TUDO que está entre {...}.
Depois adicione:

margin: 0; 
padding-top: 0;
padding-bottom: 5px;

Assim retiramos as configurações inicias e colocamos 5px de distância de um link para o outro.

4º - Depois de definir as distâncias dos links da sidebar, nos resta configurar as cores, ícones, sublinhados, etc.

Por isso vamos CRIAR novas caracterisitas, dentro do CSS depois de sidebar li:

.sidebar a, sidebar a:link{
}

.sidebar a:hover{
}

.sidebar a:visited{
}

Em sidebar a, sidebar a:link, adicione as configurações iniciais dos links, as configurações que serão aplicadas quando alguém visitar seu blog.

Em sidebar a:hover vai ser aplicada as configurações quando o visitantes passarem o mouse sobre o link.

Em sidebar a:visited vai ser aplicada as configurações no link após o clique. Assim vai ficar marcado como se fosse um aviso que a pessoa já visitou este link.

Exemplo que vou utilizar:

.sidebar a, .sidebar a:link{
text-decoration: none;
padding-left: 20px;
background: url(http://codigosblog.net/servidor/li.gif) no-repeat;
}

.sidebar a:hover{
text-decoration: underline;
}

.sidebar a:visited{
background: url(http://codigosblog.net/servidor/livisited.gif) no-repeat;
}

• O que eu fiz?

Text-decoration: none; -> Retirei o sublinhado.
Padding-left: 20px; -> Coloquei 20px de distância da palavra linkada ao canto esquerdo.
Background: url...; -> Coloquei um ícone no link antes e depois de já visitado (a:visited).
Text-decoration: underline; -> Coloquei um sublinhado no link quando passa o mouse.

O template seu deve estar parecido estruturalmente com esse:

Acompanhe as mudanças do template: www.fazendoseutemplate.blogspot.com

Pronto, basicamente é isso. Procure ser curioso e modifique o quando quiser as configurações da sidebar. Mas lembre sempre de verificar as mudanças em alguns navegadores (Firefox, Chrome, Internet Explorer 7 ou superior, etc).