Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Sidebar Vanessa S.

Personalizar os links da Sidebar

Você já conferiu diversas maneiras de Personalizar a Sidebar do seu blog.
Porém, uma dúvida que alguns leitores já me relataram é que não sabem como adicionar links na sidebar, ou que não conseguem alterar a cor dos links da sidebar.
Para usuários avançados, é algo simples, mas para os iniciantes não.
Notei que dentre os tutoriais que já publiquei aqui, estava faltando ensinar a personalizar os links da Sidebar.

Pensando nisso, neste tutorial, trataremos apenas sobre os links da sidebar.
Veremos como incluir uma lista de links manualmente na sidebar, como incluir ícones ao lado dos links, alterar a cor dos links da sidebar, e como incluir bordas abaixo dos links.
Para entender sobre a área de links na sidebar, requer que você já esteja familiarizado com os códigos referente a sidebar no seu blog. Se ainda não está, aconselho que leia este tutorial:
Personalizando a Sidebar.

Como colocar links na sidebar:

Se você deseja acrescentar uma lista de links na sua sidebar, para, por exemplo, divulgar sites úteis que você recomenda a seus leitores,você terá que incluir esta lista de forma manual.

Entre na aba “design” ? “Elementos de página” ? Clique em “Adicionar um elemento de página”? Escolha tipo “HTML/Javascript” e cole o seguinte código lá.


<a href="LINK">TITULO</a>
<br />

Para cada link que queira incluir, repita o código acima quantas vezes quiser.
Se quiser acrescentar uma imagem ícone ao lado da cada link que você irá incluir manualmente, use este código:


<img src="ENDEREÇO-DA-IMAGEM" /><a href="LINK">TITULO</a>
<br />

Colocar imagem ícones ao lado dos links da Sidebar

Se no seu template não tiver a linha de código referente a linha de links da sidebar e você deverá acrescenta-la, para poder personalizar a maneira que seus links deverão se apresentar na sidebar.
Procure no seu template os trechos CSS que se referem a sidebar. Geralmente estão dentro da área .sidebar
Será dentro desta área que você irá colar o código CSS para definir os estilos dos links.
Acrescente:


.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
background: url(ENDEREÇO-DA-IMAGEM) no-repeat ;
line-height:1.5em;
margin:0;
padding:0 0 0 20px;
}

Se quiser dar um efeito “hover” nos icones que você acabou de incluir ao lado dos links, acrescente este trecho:


.sidebar li:hover {
background: url(ENDEREÇO-DA-IMAGEM-HOVER) no-repeat;
}

Colocar borda abaixo dos links da sidebar:

Se você quiser acrescentar uma borda abaixo dos links da sidebar, acrescente:
border-bottom: 1px dotted #ddd;
no trecho: .sidebar li{
devendo ficar assim:


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

.sidebar li {
background: url(ENDEREÇO-DA-IMAGEM) no-repeat ;
line-height:1.5em;
margin:0;
padding:1px 0px 2px 20px;
list-style-type:none;
border-bottom: 1px dotted #ddd; /*--edite borda--*/
}

Lembrando que o código acima é apenas um exemplo, e que você deverá editar as cores e tipo de borda de acordo com seu gosto.

Alterar ou personalizar a cor dos links da sidebar:

Muitas vezes no template já tem configuração estabelecida para as cores dos links no blog. Ocorre que algumas vezes, quando se altera a cor dos links,a alteração acaba não se aplicando aos links da sidebar, ou o usuário quer apenas alterar a cor dos links da sidebar e manter as cores dos demais links da maneira que já estavam estabelecidas.
Para modificar as cores apenas dos links da sidebar, você deverá acrescentar a linha de código referente a cor.
acrescente:
color:#0000;

devendo ficar assim:


.sidebar a:link, .sidebar a:visited{
color:#000; /*--edite a cor--*/
}
.sidebar a:hover{
color: #ddd; /*--edite a cor--*/
}

Lembrando que o código acima é apenas um exemplo, e que você deverá editar as cores de acordo com seu gosto.

Alterar ou personalizar a fonte dos links da sidebar:

Acrescente a linha de código referente a fonte, no trecho:
.sidebar a:link, .sidebar a:visited{
devendo ficar assim:


.sidebar a:link, .sidebar a:visited{
color:#000; /*--edite a cor--*/
font-weight:normal; /*--edite--*/
font-size: 13px; /*--edite tamanho da fonte--*/
}
.sidebar a:hover{
color: #ddd; /*--edite a cor--*/
}

Não esqueça que você deve editar as cores de bordas, link e fonte de acordo com seu gosto. As cores constantes nos códigos acima servem apenas como um exemplo.

Entendendo os elementos referente aos links:

.sidebar li -> Se refere aos itens das listas.
.sidebar ul -> Se refere a lista inteira.
.sidebar a:link -> Se refere aos links individuais.
.sidebar a:visited -> Se refere aos links já visitados.
.sidebar a:hover -> Se refere aos links quando passamos o mouse em cima.

Agora que você já entendeu melhor sobre os links na sua sidebar, ficou mais fácil personalizar esta área. Basta ir alterando e ajustando de acordo com seu gosto. Vá fazendo os ajustes e visualizando se estão do jeito que você quer.
Uma dica é sempre ir visualizando antes de salvar as alterações.

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

8 Comentários

  1. Guthierres disse:

    Olá, tudo bem, estou com uma pequena duvida e queria saber se você pode me ajudar.
    Estou construindo um templete para meu blog humoremdia.com porem estou parado pois não consigo encontra a parte para incluir uma barra entre a 1 ª e 2ª colunas para dividir elas essa separação saria igual o fundo. por favor se poder me ajudar agradeço.

  2. The Blogger Better disse:

    Meu blog preferido… S2 Mundo Blogger S2

  3. João Santos disse:

    Boa tarde,

    Seu tutorial foi aplicado com perfeição ao meu blog. Mais será que você tem algum artigo onde personalizar os links do Footer?

  4. Kássio disse:

    Muito obrigado mais uma vez Clau, seu site é ótimo, muito bom mesmo! me ajuda bastante, parabéns de verdade!

  5. Alysson Nathan Girotto disse:

    Esse blog é o melhor. Vlw por tudo Clau, no meu caso eu tive que fazer varias modificações e acho q vou ter que deixar assim =/

  6. ::Clau:: disse:

    @Alysson Nathan Girotto:
    Com certeza vc deve ter feito alguma modificação no seu template relacionada as colunas, ou incluido bordas e não deve ter ajustado os valores de width (largura) nelas.
    Vc deve observar qual a largura que está estipulada em outer-wrapper e em main-wrapper e sidebar-wrapper, e deve ajustá-las.
    Se quiser, veja este tutorial, a parte que trata sobre Editando a largura das colunas:
    Colunas na sidebar

    @Lucas Muller:
    Tenta estipular uma largura de width em .sidebar li que seja menor que a que vc estipulou em sidebar.

  7. Lucas Muller disse:

    clau preciso de uma ajuda quando coloco a borda embaixo dos links ela atravessa a sidebar ve nos testes
    http://blogdetestes258.blogspot.com/

  8. Alysson Nathan Girotto disse:

    Excelente artigo. Parabéns. Estou com um problema, estou criando um blog e não to conseguindo alinhar a area de posts, ja tentei seus artigos, porem a sidebar desce bem em baixo e o post ocupa o seu lugar. Pode me ajudar? o blog em questão é esse http://mundodetestes.blogspot.com/ (ainda em construção)

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.