Como Colocar Lista de Links Personalizada no Blogger ou WordPress!

Like
Like Love Haha Wow Sad Angry

como-colocar-lista-de-links-personalizada-no-blogger-ou-wordpress

Tanto o Blogger como o WordPress já possuem alguma ferramenta interna pronta para inserir uma lista de links na sidebar com muita facilidade, porém algo que é bastante frequente é que queira ter uma lista de links que por um lado esteja contextualizada com o layout e por outro que chame a atenção de seus leitores para os links, desta forma o melhor a fazer é criar sua própria lista de links diretamente utilizando apenas HTML e CSS, para inserir na barra lateral do Blogger deverá utilizar o gadget “HTML/Javascript” e no WordPress em “Texto”.

Todo o código se divide em duas partes, onde o HTML deverá ficar na barra lateral ou onde desejar que sua lista de links seja exibida e o CSS que para Blogger deverá inserir no código do template, para isso deverá ir em editar modelo, selecione “Editar HTML” e coloque o CSS de sua lista de links juntamente com o CSS de todo o blog.

Criando o HTML de sua lista de links

A criação do HTML para esta lista é extremamente simples, basta criar uma “div” com um “id” atribuído (algumas pessoas preferem trabalhar com “class”), basicamente a estrutura é a mesma, porém quando trabalha com “id” no CSS deverá utilizar”#”, já quando trabalha com “class” deverá utilizar apenas um “.” (ponto) antes do “class”.

Vá na área administrativa (Blogger ou WordPress) para criar sua lista de links, selecione o gadget HTML/Javascript (Blogger) ou “texto” para WordPress e nele coloque o código da “div” que é este abaixo.

<div id=”sualista”>

<a href=”http://www.urllink1.com” title=”Primeiro Link“> Primeiro Link </a>

<a href=”http://www.urllink2.com” title=”Segundo Link“> Segundo Link </a>

<a href=”http://www.urllink3.com” title=”Terceiro Link“> Terceiro Link </a>

</div>

Até este ponto terá apenas uma lista muito simples de links, realmente sem nada de diferente, porém é agora queira começar a trabalhar toda a parte visual para sua lista de links através do CSS. Vale lembrar que deverá editar o código acima para inserir seus links trocando as partes em que estão em negrito pelos urls e textos âncora que pretende utilizar.

Criando o CSS para sua Lista de Links

Agora é o momento de inserir o CSS para o box com sua lista de links, o CSS que dou aqui é bem básico mas já mostra um resultado interessante, que pode ser visto em funcionamento na lista de links que uso lá no Dinheiro Web.

Lembre-se de que este CSS para wordpress deverá ser inserido no style.css e no Blogger deverá ficar junto com o restante do CSS de todo o template. Basta abrir o arquivo onde ficará o CSS colar o código abaixo lá e salvar o arquivo. Claro que poderá fazer diversas alterações neste CSS para adequar sua lista de links com seu blog.

#sualista {

float:left;
margin-bottom:10px;
width:300px;
padding:10px;
border-style: solid !important;
border-width: 1px !important;
border-color: #ABABAB !important;
border-radius: 4px !important;
-webkit-border-radius: 6px 6px 6px 6px !important;
-moz-border-radius: 6px 6px 6px 6px !important;
background-color:#FFFFFF;
border: 1px solid #ABABAB;

}

Pronto, a esta altura seu blog já pode ter diversas listas de links em pontos estratégicos e sem depender de nenhum plugin!

Este é um guest post que foi escrito por Vinicius Horta do blog Dinheiro Web.

Like
Like Love Haha Wow Sad Angry

Sobre Vinicius Horta

Blogueiro e Web Designer com Formação nas ferramentas Adobe- SENAC – SP e curso de Comunicação e Comunicação Institucional - FGV. Adoro esta vida de blogs e internet. Escrevo sobre desenvolvimento e monetização de Blogs, Sites, Programas de Afiliados e Carreira Freelancer.
Adicionar a favoritos link permanente.

9 Comments

  1. Maurício Rodrigues

    Vinicius e sobre os cuidados de usar Links junto ao Google? O que ele anda pensando sobre esta forma de trabalho?

    • Olá Maurício!
      Se tratando de links internos do blog pode trabalhar a linkagem normalmente, já se for link de um blog para outro é bom ter um pouco mais de cuidado, evte por exemplo usar textos âncoras perfeitos e repetidos, tente tornar os links o mais natural possível.
      Abraço!

  2. Simples e eficiente, parabéns pela dica!

  3. Gabriel Martins

    Bem simples o tutorial, mas como uso wordpress, travei no “gadget”, passei um tempinho até descobrir que é a mesma coisa que “widget”… Mas deu tudo certinho, é muito bom ter uma opção diferente de menu para o visitante…

    Abraços

  4. Gabriel Martins

    Uma dúvida, no caso só é possível adicional esta lista de link até aonde o tema do wordpress permite né? No meu caso só no Sidebar…

    abraços

  5. Gabriel Martins

    O código CSS não funcionou de jeito algum…

  6. Gabriel Martins

    Ahaaaannn consegui!! O problema era que eu tinha copiado tudo e colado, mas as “aspas” estam saindo erradas, consertei as aspas e agora tá tudo show!!!

  7. Olá Vinícius. Tudo bem?
    Parabéns pelo post! Para completar essa dica excelente, é interessante você mencionar que devemos inserir esse código CSS antes da tag “/b skin”.
    ]]>.

    Grato!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *