Como fazer um template para o Blogger Listas e Links

Continuando a série sobre como fazer um template, hoje vou tratar dos links e listas no Blogger.

No começo do código do seu template (o Mínima, de testes) você encontra este trecho:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
a:link {
color:$linkcolor;
text-decoration:none;
}
a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}
a:hover {
color:$titlecolor;
text-decoration:underline;
}

Toda a parte em vermelho refere-se aos links da página: suas cores e se serão sublinhados ou não; mas é claro que nem todos os links precisam se comportar da mesma maneira. Você pode determinar, por exemplo, que os links de sua postagem se apresentem de maneira diferente dos links da sidebar.

Basicamente os estilos dos links são representados desta maneira:



a:link estilo do link no estado inicial
a:visited estilo do link visitado
a:hover estilo do link quando se passa o mouse sobre ele
a:active estilo do link ativo, quando clicado.

As determinações para os links devem respeitar a hierarquia apresentada acima.

Para adicionar um sublinhado no link:
text-decoration: underline;

Sem subinhado:
Text-decoration: none;

Adicionando Sobrelinhado:
text-decoration: overline;

Você pode também acrescentar um fundo colorido para os links, utilizando a propriedade background como para os outros elementos da página.

Para estabelecer o comportamento dos links de sua postagem, é preciso determiná-los dentro da classe .post

.post-body a:link{
color: #993366;
text-decoration: underline;}

.post-body a:hover{
color: #EBC2D7;
text-decoration: underline overline;}

O resultado pode ser visto aqui: Aula Template . Passe o mouse onde está Link Primeiro e veja o efeito de underline e overline juntos.

Você pode detreminar comportamentos e cores diferentes para todos os elementos e classes do template: header, post, sidebar, etc.

Para a sidebar:

.sidebar a:link{
color: #000;
text-decoration: none;}

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

Basta respeitar a sintaxe apresentada.

Listas e Menus

Procure no código do seu template este trecho:

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}

.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

Esta é uma lista simples e os valores contidos determinam a aparência das listas na sidebar (lista de marcadores, arquivos, blogroll, etc).

As tags <ul> e </ul> contém cada elemento da lista (ou menu), que são <li> &lt/li>.

Em .sidebar ul se determinará a aparência de toda a lista e em .sidebar li a aparência de cada item desta lista.

list-style é o seletor de marcadores da lista e aqui você determinará se cada item da lista exibirá um marcador ou não :

list-style-image imagem como marcador da lista;
list-style-position onde o marcador da lista é posicionado;
list-style-type tipo do marcador da lista;
list-style maneira abreviada para todas as propriedades;

list-style-type:
none: sem marcador
disc: círculo (bolinha cheia)
circle: circunferência (bolinha vazia)
square: quadrado cheio
decimal: números 1, 2, 3, 4, ...

list-style-image:
none (nenhuma imagem)
URL: url(endereço da imagem)

list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto

Ex. 01 - Vou determinar que a minha lista contenha marcadores quadrados:

.sidebar ul{
list-style: square inside; } (quadrado e alinhado aos itens da lista)



Neste exemplo eu determino uma cor para o fundo da lista e outra para cada item :


Óbviamente você está aí pensando: não deu certo, só aparece uma cor e não duas. Sim, a cor que predomina é a cor dos itens da lista, isto por que não existe diferenças entre os limites de .sidebar ul e .sidebar li no template original. É preciso fazer as seguintes mudanças:

.sidebar ul {
width: 220px;
list-style:square inside;
margin:0 0 0;
padding:0 0 0;
background: #B89F67;
}
.sidebar li {
margin:2px auto 2px;
padding-top:0;
width: 200px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #E7DECB;
}

Determinei uma largura para ul e outra menor para li, além disso, estipulei uma margem de 2px entre um item da lista e outro, para que a cor de fundo (de .sidebar ul) possa ser notada:


As variações podem ser muitas: você pode acrescentar imagen de fundo e combinações de cor com o fundo da sidebar.

Note que aqui no meu blog, nas listas da sidebar, não só o link se comporta diferente, quando passa-se o mouse por cima, como o background de cada item também se altera (o fundo torna-se transprente e surge uma borda azul). Vejamos como isto é possivel:

Primeiro determine as cores, largura, etc, de sidebar ul:

.sidebar ul {
width: 200px;
list-style:square inside;
margin:10px auto 10px;
padding:5px;
background: #030303;
}

Depois determine a aparência de cada item da lista:

.sidebar li {
margin:2px auto 2px;
width: 190px;
padding: 3px 0 3px 10px;
text-indent:0px;
line-height:1.5em;
background: #F4F4F4;
border-bottom: 1px solid transparent;
}

Veja que aqui acrescentei uma borda de 1px abaixo de cada link da lista, transparente. É necessário que isso seja feito para que o elemento da lista não dance quando se passe o mouse por ele, já que vou acrescentar um border-bottom no estado hover.

Primeiro determino o comportamento dos links no estado natural e hover:

.sidebar a:link{color: #FF6600;text-decoration: none;}

.sidebar a:hover{color: #C6E6FD; text-decoration: none;}

E aqui determino o comportamento do background de cada espaço ocupado por cada um dos itens da lista, quando passa o mouse sobre eles:

.sidebar li:hover{background: transparent; border-bottom: 1px solid #00FFFF}

A diferença aqui é que determinei um comportamento para a linha onde se encontra o item, seja ele um link ou não. O resultado pode ser visto aqui, na lista da sidebar.

Por hoje é isso. Se você quiser ler mais sobre personalização da sidebar, veja aqui.
Dúvidas é só deixar nos comentários, assim que possível, responderei.

Abraços!