• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

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.

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn