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 (meu antigo blog).

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 site https://viniciushorta.com/