Exibindo lista de parceiros lado a lado na lateral

Fonte: Iago Melanias/BlogandocomFacilidade

Olá Blogueiros, depois que publicamos o artigo Exibindo lista de parceiros lado a lado na lateral, vários usuários da plataforma WordPress, vieram nos perguntar por que não criamos uma versão para o WordPress, certamente, é uma boa pergunta, mas como gostamos de manter sempre a organização em nossos artigos, resolvemos então criar um tutorial apenas para usuários Blogger e outro, apenas para usuários WordPress. Separar os parceiros dessa forma, economiza um enorme espaço e faz com que sua lateral fique menos poluída em termos de espaço ocupado.

Vamos ao Tutorial:

1º – Acesse o painel do seu blog WordPress e clique na guia Aparência.

2º – Em seguida, clique em Editor

3º – Selecione o arquivo style.css (estilo) e depois da última linha, adicione o seguinte código:

#lista1 {
float: left;
border-right: 1px solid #CCC;
width: 140px;
}
#lista2 {
float: left;
width: 140px;
margin-left: 20px;
}
#lista1, #lista2 {
font-family: Arial,sans-serif;
}
#lista1 ul, #lista2 ul {
margin: 0;
padding: 0;
}
#lista1 ul li, #lista2 ul li {
list-style: none;
}

4º – Depois, clique em Atualizar Arquivo.

5º – Em seguida, clique em Widgets na guia Aparência do seu blog.

6º – Arraste um widget de texto e dê um nome qualquer a ele.

7º – Dentro do conteúdo do widget, cole o seguinte código e lembre-se de substituir os campos negritados:

<div id="lista1">
<ul>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
</ul>
</div>
<div id="lista2">
<ul>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
<li><a href="ENDEREÇO DO PARCEIRO" target="_blank" rel="nofollow">NOME DO PARCEIRO</a></li>
</ul>
</div>

• Lembre-se de substituir os textos negritados em azul e vermelho, pelos respectivos urls e nomes dos parceiros.
• Para cada novo parceiro, usa-se “<li><a href=”ENDEREÇO DO PARCEIRO” target=”_blank” rel=”nofollow”>NOME DO PARCEIRO</a></li>” (sem aspas) antes da tag </ul> da lista respectiva.

8º – Depois, clique em Salvar.

Tags | blog, blogger, lista de parceiros, widgets, wordpress