{"id":47158,"date":"2023-09-12T19:05:44","date_gmt":"2023-09-12T19:05:44","guid":{"rendered":"https:\/\/www.criarsites.com\/?p=47158"},"modified":"2023-09-12T19:05:46","modified_gmt":"2023-09-12T19:05:46","slug":"como-colocar-lista-de-links-personalizada-no-blogger-ou-wordpress","status":"publish","type":"post","link":"https:\/\/www.criarsites.com\/como-colocar-lista-de-links-personalizada-no-blogger-ou-wordpress\/","title":{"rendered":"Como Colocar Lista de Links Personalizada no Blogger ou WordPress!"},"content":{"rendered":"\n

Tanto o Blogger como o WordPress j\u00e1 possuem alguma ferramenta interna pronta para inserir uma lista de links na sidebar com muita facilidade, por\u00e9m algo que \u00e9 bastante frequente \u00e9 que queira ter uma lista de links que por um lado esteja contextualizada com o layout e por outro que chame a aten\u00e7\u00e3o de seus leitores para os links, desta forma o melhor a fazer \u00e9 criar sua pr\u00f3pria lista de links diretamente utilizando apenas HTML e CSS, para inserir na barra lateral do Blogger dever\u00e1 utilizar o gadget \u201cHTML\/Javascript\u201d e no WordPress em \u201cTexto\u201d.<\/p>\n\n\n\n

Todo o c\u00f3digo se divide em duas partes, onde o HTML dever\u00e1 ficar na barra lateral ou onde desejar que sua lista de links seja exibida e o CSS que para Blogger<\/a> dever\u00e1 inserir no c\u00f3digo do template, para isso dever\u00e1 ir em editar modelo, selecione \u201cEditar HTML\u201d e coloque o CSS de sua lista de links juntamente com o CSS de todo o blog.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Criando o HTML de sua lista de links<\/strong><\/h2>\n\n\n\n

A cria\u00e7\u00e3o do HTML para esta lista \u00e9 extremamente simples, basta criar uma \u201cdiv\u201d com um \u201cid\u201d atribu\u00eddo (algumas pessoas preferem trabalhar com \u201cclass\u201d), basicamente a estrutura \u00e9 a mesma, por\u00e9m quando trabalha com \u201cid\u201d no CSS dever\u00e1 utilizar\u201d#\u201d, j\u00e1 quando trabalha com \u201cclass\u201d dever\u00e1 utilizar apenas um \u201c.\u201d (ponto) antes do \u201cclass\u201d.<\/p>\n\n\n\n

V\u00e1 na \u00e1rea administrativa (Blogger ou WordPress) para criar sua lista de links, selecione o gadget HTML\/Javascript (Blogger) ou \u201ctexto\u201d para WordPress e nele coloque o c\u00f3digo da \u201cdiv\u201d que \u00e9 este abaixo.<\/p>\n\n\n\n

<div id=\u201dsualista\u201d><\/em><\/p>\n\n\n\n

<a href=\u201d<\/em>http:\/\/www.urllink1.com<\/em><\/strong>\u201d title=\u201d<\/em>Primeiro Link<\/em><\/strong>\u201c> <\/em>Primeiro Link<\/em><\/strong> <\/a><\/em><\/p>\n\n\n\n

<a href=\u201d<\/em>http:\/\/www.urllink2.com<\/em><\/strong>\u201d title=\u201d<\/em>Segundo Link<\/em><\/strong>\u201c> <\/em>Segundo Link<\/em><\/strong> <\/a><\/em><\/p>\n\n\n\n

<a href=\u201d<\/em>http:\/\/www.urllink3.com<\/em><\/strong>\u201d title=\u201d<\/em>Terceiro Link<\/em><\/strong>\u201c> <\/em>Terceiro Link<\/em><\/strong> <\/a><\/em><\/p>\n\n\n\n

<\/div><\/em><\/p>\n\n\n\n

At\u00e9 este ponto ter\u00e1 apenas uma lista muito simples de links, realmente sem nada de diferente, por\u00e9m \u00e9 agora queira come\u00e7ar a trabalhar toda a parte visual para sua lista de links atrav\u00e9s do CSS. Vale lembrar que dever\u00e1 editar o c\u00f3digo acima para inserir seus links trocando as partes em que est\u00e3o em negrito pelos urls e textos \u00e2ncora que pretende utilizar.<\/p>\n\n\n\n

Criando o CSS para sua Lista de Links<\/strong><\/h2>\n\n\n\n

Agora \u00e9 o momento de inserir o CSS para o box com sua lista de links, o CSS que dou aqui \u00e9 bem b\u00e1sico mas j\u00e1 mostra um resultado interessante, que pode ser visto em funcionamento na lista de links que uso l\u00e1 no Dinheiro Web (meu antigo blog).<\/p>\n\n\n\n

Lembre-se de que este CSS para wordpress dever\u00e1 ser inserido no style.css e no Blogger dever\u00e1 ficar junto com o restante do CSS de todo o template. Basta abrir o arquivo onde ficar\u00e1 o CSS colar o c\u00f3digo abaixo l\u00e1 e salvar o arquivo. Claro que poder\u00e1 fazer diversas altera\u00e7\u00f5es neste CSS para adequar sua lista de links com seu blog.<\/p>\n\n\n\n

#sualista {<\/em><\/p>\n\n\n\n

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

}<\/em><\/p>\n\n\n\n

Pronto, a esta altura seu blog j\u00e1 pode ter diversas listas de links em pontos estrat\u00e9gicos e sem depender de nenhum plugin!<\/p>\n\n\n\n

Este \u00e9 um guest post que foi escrito por Vinicius Horta do site https:\/\/viniciushorta.com\/<\/p>\n","protected":false},"excerpt":{"rendered":"

Tanto o Blogger como o WordPress j\u00e1 possuem alguma ferramenta interna pronta para inserir uma lista de links na sidebar com muita facilidade, por\u00e9m algo que \u00e9 bastante frequente \u00e9 que queira ter uma lista de links que por um lado esteja contextualizada com o layout e por outro que chame a aten\u00e7\u00e3o de seus […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"_links":{"self":[{"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/posts\/47158"}],"collection":[{"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/comments?post=47158"}],"version-history":[{"count":2,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/posts\/47158\/revisions"}],"predecessor-version":[{"id":47162,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/posts\/47158\/revisions\/47162"}],"wp:attachment":[{"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/media?parent=47158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/categories?post=47158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.criarsites.com\/wp-json\/wp\/v2\/tags?post=47158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}