Personalizar LinkWithin (Posts Relacionados): Mudar Cores e Efeitos

Vamos mostrar algumas maneiras de personalizar os links de postagens relacionadas feitas pelo Linkwithin que muitos blogueiro usam para gerar mais pageviews no blog e assim fazer os visitantes do blog ler mais postagens e ficarem mais tempo no seu site. Mostrar sugestões de outras postagens no seu blog é muito útil, mas você pode alterar as cores de fundo, cor de texto e também os feitos do Linkwithin apenas adicionando algumas linhas de código. Porém se estiver procurando como trocar o texto padrão do Linkwithin veja neste tutorial: Mudar o texto You might also like.

Como Personalizar o LinkWithin

Para modificar a aparência dos assuntos relacionados no blog entre na pagina modelo > editar html > use o ctrl F para achar o trecho ]]></b:skin> e cole o código antes dele:

.linkwithin_posts {width: 700px !important;}
.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
.linkwithin_posts a:hover{background-color: #FC3 !important;}
.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}

Pagina Modelo - Editar HTML

Agora veja como alterar as cores do Linkwithin no Blogger. Em todos eles o que você precisa fazer é modificar os valores ou colocar o código HTML da cor que desejar e você pode ver os códigos neste link: Código das Cores.

.linkwithin_posts {width: 700px !important;}
700 é a largura total do gadget de posts relacionados, então se quiser que ele fique mais estreito e ocupando duas linhas diminua o valor.

.linkwithin_posts a {border: none !important;padding-right: 15px !important;background-color: #FF0;background-image: none;height: 200px;}
Aqui temos a cor de fundo de cada link background-color: #FF0. O espaço entre cada link background-color: #FF0 e a altura do gadget (200px) isso é útil caso o titulo do seu posts ultrapasse o final do gadget e fique fora da cor de fundo, então poderá aumentar esse valor.

.linkwithin_posts a:hover{background-color: #FC3 !important;}
#FC3 é a cor de fundo quando o mouse está sobre cada link.

.linkwithin_title:hover {color: #F00 !important;text-decoration: underline !important;}
Aqui temos #F00 que é a cor do texto quando o mouse está sobre o link.

Como já falamos anteriormente é só mudar o código das cores e os números referentes a larguras e se quiser pode ver aqui o código para usar bordas. Mas se quiser veja aqui outras opções de assuntos relacionados para usar no blogspot:
Lista de Posts com Assuntos Relacionados no Blog (somente texto)
Acessório para Mostrar Posts Relacionados no Blog (get.2leep)
Postagens Populares no Blogger: Gadget Posts mais Visitados

Achamos importante fazer algumas dessas alterações para fazer que links dos posts relacionados do seu blog combinem melhor com o template e as cores que usa no layout do seu blog, afinal a aparência do site é muito importante para agradar e conquistar mais visitantes e pessoas que gostam do nosso blog.

65 comentários:

  1. Fabiano, por favor postei uma questão no post/artigo do Google Plus e Seguir... abraços.

    ResponderExcluir
  2. Edson F.
    vou lá ver e responder seu comentario

    ResponderExcluir
  3. Olá, no meu blog não estou conseguindo fazer com que o Gadget apareça abaixo das postagens, ele só esta aparecendo abaixo dos títulos. Conseguiria me ajudar ?

    ResponderExcluir
  4. Tem como você me passar o código de "dicas recomendadas" para eu colocar no meu blog?? Se quiser pode enviar pelo meu email feren-e-@hotmail.com

    ResponderExcluir
  5. Oi, eu recentemente mudei o link do meu blog. Depois soube do LinkWithin e experimentei mas não funciona. Tem uma especie de lista de hiperligações e quando se carrega leva ao link antigo.
    Há algum problema com o meu blog? Estou a fazer algo errado?

    Fico á espera de respostas.

    Obrigada,
    Mariana.


    PS.: o blog que eu estou a falar é o nacozinhadamary.blogspot.com

    ResponderExcluir
  6. ei fabiano! como tira esse fundo amarelo??

    lagoautdor@gmail.com

    valeeeu

    ResponderExcluir
  7. João Augusto :-)
    esse é o endereço do linkwithin
    http://www.linkwithin.com/learn?ref=widget

    Thiago
    coloque a linha
    < div class="linkwithin_div" >< /div > junto com o código do linkwithin isso faz ele aparecer onde quiser.

    Lucas Natan
    a cor de fundo é neste trecho
    background-color: #FF0

    veja no link o Código das Cores

    Mariana link antigo? está falando de posts que excluiu do blog ? se for não tem como corrigir isso.

    ResponderExcluir
  8. Marcos Vinicius
    isso é feito através do AddThis, vou fazer um tutorial explicando como fazer.

    ResponderExcluir
  9. Fabiano uma Duvida como eu posso exibir esse Gadget apenas nas Postagens internas ou seja apenas na pagina da Postagem ?

    ResponderExcluir
  10. Johni dos Santos

    é só usar o codigo desse jeito na pagina editar html antes de post.body:

    < b:if cond='data:blog.pageType == "item"' > código linkwithin< /b:if >

    veja mais detalhado aqui: Mostrar assuntos relacionados no blog


    .

    ResponderExcluir
  11. Obrigado pela resposta Fabiano Deu Certinho

    ResponderExcluir
  12. fabiano roberto essa dica aí de cima é otima,porem eu nao consegui deu erro..sera pq eu ja utilizei o seu codigo de mudar akele nome em ingles e o outro de especificar onde aparecer esse post relacionados??

    ResponderExcluir
  13. coloque o código :

    < div class="linkwithin_div" >< /div >

    no lugar onde quer que o linkwithis apareça

    veja mais detalhado aqui: Mudar o texto You might also like

    ResponderExcluir
  14. Fabiano ,vc sabe eu pego muitas dicas aqui,eu tinha o Banner do dicas só hoje descobri que tem as dicas para blogs em uma barra de rolagem.
    Levei para meu blog,bjs

    ResponderExcluir
  15. Amigo, por favor me responda é possivel adicionar mais de 5 caixinhas de postagens ?

    ResponderExcluir
  16. para adicionar 5 é só configurar na pagina do linkwithin.

    ResponderExcluir
  17. Oi, eu queria mudar o número dessas postagens no meu blog esta aparecendo 4 post do gadget, eu queria mudar para 3, só, que eu já tentei mudar varias e varias vezes e não consegui. já criei varios outros gadgets e não muda, não sai de 4 post. preciso de ajuda!

    ResponderExcluir
  18. tem que configurar novamente no linkwithin para mudar o numero de postagens

    ResponderExcluir
  19. Fabiano e como eu faço para que o código fique com sublinhado quando o mouse estiver em cima

    ResponderExcluir
  20. Fabiano Roberto é possivel almentar as linhas que aparecem pq como vc sabe aparece um pouco do titulo da postagem e o resto aparece ...
    Tem como fazer aparecer mais do titulo da postagem ou isso é configurado pelo site linkwithin como padrao

    ResponderExcluir
  21. quando o mouse está em cima do link é no estilo
    a:hover que altera a formatação

    do jeito que publicamos no tutorial

    ResponderExcluir
  22. FAbiano estou com um serio problema que nem eu nunca vi o meu novo modelo não possue o line-3 ou o line-5 se esses codigos não conter em meu template qual o proximo codigo que terei que encontrar para publicar elementos abaixo das postagens ?

    ResponderExcluir
  23. para colocar abaixo das postagens pode procurar por

    < post.body >

    ResponderExcluir
  24. tem como fazer o linkwithin exibir 8 posts ou mais ?
    MEU EMAIL - sitecoldanimes@yahoo.com.br

    ResponderExcluir
  25. Ismael Junior no linkwithin o maximo são 5.

    tente ver esse outro tutorial: Acessório para Mostrar Posts Relacionados no Blog sobre o get.2leep

    ResponderExcluir
  26. Olá, me ajude por favor, eu fiz tudo conforme o tutorial, mas aparece somente "você tabém pode gostar de: e as imagens não aparecem abaixo....fiz algo errado mais não sei como arrumar

    ResponderExcluir
  27. Cristina veja a configuração do feed está na opção completa, se não estiver é esse o motivo do erro.

    ResponderExcluir
  28. Amigo a um sistema de posts relacionados muito mais muito melhor que o link within
    http://nrelate.com/
    Eu coloquei ele no meu blog e ficou otimo.

    ResponderExcluir
  29. Willian Ximen vou fazer uns testes e publicar um tutorial sobre esse site.

    obrigado pela sugestão.

    ResponderExcluir
  30. como coloco nos meus posto o Leia mais, esse linkwithin não funciona direito pois nos post que tem o "leia mais" aparece uma imagens relacionada logo abaixo e bem torta... sabe arruamar isso?
    veja

    http://snestalgia.blogspot.com.br/

    ResponderExcluir
  31. Este comentário foi removido pelo autor.

    ResponderExcluir
  32. Juankatatau Antonio você deve ter misturados os dois códigos

    ResponderExcluir
  33. Gabryel Cordeiro não temos controle sobre quais links aparecem.

    infelizmente no seu caso não tem o que fazer a não ser aguardar seu blog ter mais postagens

    ResponderExcluir
  34. Vi que no seu blog esse widget só aparece nos postes e não na home e nos marcadores, como posso fazer isso no meu blog?

    ResponderExcluir
  35. LiteraLendo Lendo

    coloque o código desta forma:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>código do linkwithin</b:if>

    veja mais detalhado aqui:
    Conteúdo diferente nas paginas do blog

    ResponderExcluir
  36. fabiano hoje tive uma ideia se eu usar esse widget no meu blog mais com o url de outro blog ou seja para o envio de visitas para eles será que o Google analytics deles identificaria as visitas enviadas por mim ?

    ResponderExcluir
  37. Johninão tenho certeza dessa resposta, mas acredito que não.

    se você usa o linkwithin no seu blog poderá ver que ele aparece como fonte de visitas ou seja acredito que se usar o código o linkwithin de outro blog no google analytics dele aparecerá como visitas do linkwithin e não do seu blog.

    mas como falei no inicio isso é apenas uma opinião minha não tenho certeza disso.

    ResponderExcluir
  38. Está aparecendo 3 vezes o artigo relacionado, ele tinha desaparecido, e instalei mais duas vezes... E agora??? O que faço???
    http://simplesmentesemente.blogspot.com.br/

    ResponderExcluir
  39. Gi Munaro você precisa achar os códigos e apagar.

    deve ter 3 vezes o mesmo código no seu html e precisa deixar um só.

    ResponderExcluir
  40. Ola,será que voçe poderia me ajudar?
    Nao consigo adicionar o widget automaticamente,como voçe fez ai,quando clico em'adicionar widget' nao aparece nada,esta pagina só recarrega,mas nao direciona para o blog ,nem nada,fiz tudo certinho.tentei fazer manualmente,copiei o código,e colei em um novo widget html/javascript,colei as duas partes la,funcionou,mas ai o nome do widget esta aparecendo no layout/template,e nao deveria aparecer,como devo proceder?grata desde ja.

    ResponderExcluir
  41. se está com problemas para adicionar o gadget automaticamente faça de forma manual.

    não escolha a opção blogger use outra opção para pegar o código e depois adicione no html do seu blog

    ResponderExcluir
  42. Olá, preciso de umas dicas. Coloquei linkwithin no meu blog porém ele não atualiza os posts, estão os mesmos posts que estavam no dia que instalei o linkwithin, os posts colocados depois, não estão aparecebndo. como posso resolver este problema? Grata, Vera. emgonzagui.blogspot.com.br

    ResponderExcluir
  43. Escola Municipal Cantor e Compositor Gonzaguinha o feed do seu blog está funcionando corretamente?

    tente criar novamente o código no site do linkwithin com o endereço do seu feed, isso deve resolver.

    mas não temos controle sobre o que o linkwithin mostra por isso a única coisa a fazer é verificar o feed.

    ResponderExcluir
  44. Muito bom! :D http://misturebablogger.blogspot.com.br

    ResponderExcluir
  45. Não aprendi como mudar o título "Poderá também gostar de:"

    Please me?

    Abraços !! :D

    ResponderExcluir
  46. Olá! Estou tendo problemas, os títulos das postagens não estão aparecendo embaixo das miniaturas do Linkwithin, por favor vc poderia me ajudar!!!!

    ResponderExcluir
  47. e links de texto aparecem?

    se aparecer os links é porque linkwithin não achou imagens na maior parte das suas postagens.

    verifique se o feed do seu blog está funcionando corretamente

    ResponderExcluir
  48. Como eu faço para mover o Linkwithin no meu caso ele fico passando um pouco fora do post queria trazer ele mais pro meio como faço isso

    ResponderExcluir
  49. Marcos os códigos deste tutorial permitem pequenos ajustes no linkwithin, mas no caso do gadget ficar maior que a largura do seu layout acho que o jeito é configurar o linkwithin novamente mas com um link a menos, ou seja em vez de mostrar 5 links mostre 4, por exemplo.

    ou alterar o template do seu blog para aumentar um pouco a largura das postagens, assim vai criar mais espaço para o linkwithin no final dos posts.

    ResponderExcluir
  50. Obrigado Fabio eu ja consegui resolver o problema é que eu coloquei 4 mesmo ele cabia so que ficava muito no canto mas ja consertei mas o porblema que enfrento agora é sobre as atualizações de post do linkwithin eu posto muitas coisas mas ele so mostra os antigos vc sabe ou tem algum tutorial que possar me explicar e de como fazer pra ele atualizar os posts Obrigado

    ResponderExcluir
  51. não tem nenhum código para atualizar os posts que o linkwithin mostra.

    apenas verifique se o feed do seu blog está funcionando (atualizando) corretamente.

    ResponderExcluir
  52. Po deu tudo certo, consegui até retirar o link do link within por razões estéticas. Gostaria de saber se é possível alterar o tamanho das imagens em miniatrua, isso é imprescindível. Gostaria de aumentar a altura só um pouco. E de tirar os separadores e a borda ao redor das imagens. E se possível centralizá-lo. É possível? :)

    ResponderExcluir
  53. no linkwithin não tem como alterar o tamanho das imagens, mas tem outros sites que fazem serviços similares:

    Ferramentas e Gadgets de Posts Relacionados do Addthis

    ResponderExcluir
  54. Po Fabiano, vc pode me explicar melhor? Ou deixar os links desses sites?

    ResponderExcluir
  55. o link que postei já é uma opção para mostrar assuntos relacionados.

    use nossa pesquisa no topo da pagina e busque por: assuntos relacionados

    você encontrará varias opções de sites que fazem isso.

    ResponderExcluir
  56. Oi, tem alguma forma de aumentar a quantidade de links q aparecem sem ser pelo proprio site do linkwithin? Tipo, pelo código mesmo? Pooooor favor me ajude!!

    ResponderExcluir
    Respostas
    1. não tem como alterar o numero de links pelo código

      entre no site do linkwithin e refaça a configuração usando o mesmo email e pronto. A quantidade de links atualiza sozinho

      Excluir
  57. E mais uma vez me foi muito útil esse site.
    Brigadim fabiano!

    ResponderExcluir
  58. Muito bom, mas segue mais algumas duvidas
    1 - teria com centralizar ele como um todo?
    2 - teria como mudar o tamanho as imagens

    Grato.

    ResponderExcluir
  59. o tamanho da imagem é gerada pelo linkwithin acho que não tem como alterar

    sobre centralizar pode tentar colocar esse código

    .linkwithin_posts {width: 700px !important; text-align: center;margin:auto}

    ajuste o valor 700 para a largura que desejar. Este código é apenas uma sugestão não tenho certeza que vai funcionar pois todos estes códigos na verdade já estão interferindo no padrão do linkwithin

    ResponderExcluir