Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

22 setembro 2008

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!

Artigos Relacionados

12 comentários:

Johnny disse...

Outro tutorial que vai para os meus favoritos.

Igreja Batista Nova Vida de Sobradinho disse...

Ariane, eu de novo...
a alguns dias estava tendo problema com as postagens do blog, mas resolvi o problema.
Agora, descobri que meu blog Minha Família Amada no IE sempre dá erro de página ao carregar, mas como uso somente o firefox, não percebi. Mas duas semanas atrás estava funcionando ok. Procurei mas não tenho idéia do que fazer e não fiz nenhuma mudança no código que pudesse dar este erro. Preciso de uma dica sua.
Desta vez vou aguardar sua resposta...
aguardo seu contato.
Matheus

Presbítero Matheus Souza disse...

Peço seu perdão pois quando fiz meu pedido de ajuda estava logado com o endereço da nossa igreja IBNVS.
o nosso blog com problemas no IE é minhafamiliaamada.blogspot.com
Aguardo sua dica
Matheus

Ariane disse...

Matheus, a sidebar desapareceu no IE, não é isso? Talvez seja um problema de medidas. Tente diminuir um pouco a largura da sidebar e veja o resultado.

Andrei disse...

como eu faço pra adicionar um item à minha side bar ?

Iustus disse...

Caro amigo primeiro quero lhe dar os parabéns pelo seu blog, está muito bonito e bem informativo e têm sido de grande ajuda.
Bom estou com um problema eu baixei um novo template para o blogger e não consigo editar os botões como você têm no seu ai em cima, como: Home, templates e feed. Também gostaria de saber como posso colocar uma barra lateral como a sua. Aqui vai o endereço do meu blog para vc dar uma olhada e ver alguns erros - http://projetonovasonorum.blogspot.com/
obrigado desde já.

Michael disse...

Como que eu faço para que o background seja um link também...

igual ao seu de agora.....

Brigado...

Áh e eu perguntei em outro comentário só que eu não lembro qual daí eu não sei se tu me respondeu .. Como que eu coloco hover em imagem... com html..

Eu sei que vc disse para naum fazer perguntas mas vc é minha única esperança..
já procurei muito no google e em vários outros mecanismos de de pesquisa como colocar um hover em

Abraços

Marcelo F. disse...

Meu parabens ficou muito legal esse tutorial, parabens mesmo!

Uma duvida que eu tenho se vc puder me ajudar.

Como, onde que eu consigo um codigo para mudar a cor do meu texto? Tipo se eu quiser colocar meu texto preto ou amarelo etc, quais codigos colocar ?

lobo disse...

eu acabaei de fazer meu blog e tenho o menu mas nao sei como adicionar paginas ao menu, exemplo:cuando clico em um dos menu e abre outra pagina do meu blog, mas eu nao sei como fazer isso sera q vc pode me ajudar... envie x favor a resposta como fazo para adicionar paginas ao menu no meu e-mail:
tiagowenzel@hotmail.com
obrigado....

Lιℓℓσ Scaparro ✖ disse...

Nossa, ótimo Blog. e por sinal está de parabens! tdu bem Organizado, no lugar e de uma menira muito Objetiva!
Realmente caiu do Céu essa ajuda!
Só tenho uma dúvida, visualizei um posto do blog, onde possui 1o modelos de templates, resolvi baixar um e analisa-lo como funciona. O template que eu baixei é o: Notepad Chaos, porem não conseguido trocar um cósifo dele.
Ele possui no canto superior esquerdo tres links, onde esses links levam ao Blog, ou seja sempre o mesmo lugar.
Gostaria de saber como faço para poder trocar o endereço de destinos dos links???
lillo@lillotm.com

Desde já agradeço!

Natalia Cruz disse...

Ariane,muuuito obrigada.Me ajudaste a ter mais interesse em criar um blog, o que antes me dava arrepios só de pensar.
Tuas aulas são práticas e agradáveis.Já tá na lista de favoritos.
Finalmente consegui dar o 1º passo e estou me interessando cada vez mais.

Monise disse...

Oi Ariane !!
Muito bom seu blog, só fiquei com uma duvida se vc poder me ajudar, eu não consegui que a minha imagem ficasse totalmente a mostra http://monisefreire.blogspot.com/
o post fica por cima, tem algum comando que aumente o tamanho da area da imagem ?
Beijão
Monise
monisefreire@terra.com.br

Postar um comentário

Os comentários são moderados.