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.