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
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.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”.
<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,
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!
