Fazendo seu template – Parte 4 – Configurando efeitos da(s) sidebar(es)

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: http://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).

Continue lendo >>