Slide

Tutorial: gadget personalizado de posts relacionados

quarta-feira, fevereiro 04, 2015


Sabem aquele gadget de "Posts relacionados" ou "Veja também" que alguns blogs (incluindo o LNG) possuem? Hoje vou ensinar vocês como adicioná-lo e como personalizar. O resultado será como o do blog:


INSTALANDO O GADGET

1. Acesse o site LinkWithin e preencha seus dados:


Selecione a opção exibida caso seu blog tenha fundo escuro e letras claras. 

2. Clique em "Get Widget!"

3. Clique em "Install Widget" na janela que será aberta e posicione o gadget no Layout do seu blog abaixo das postagens, dessa forma:


Depois, é só salvar. Agora vamos para a parte de personalização.


PERSONALIZANDO O GADGET

1. Personalizando o título exibido


Algumas vezes o gadget vem em inglês, e o título dele aparecerá como "You might also like". É possível modificar esse título e escrever o que for de nossa preferência. Para isso, basta seguir alguns passos. No Layout do seu blog, abra o gadget e clique em Editar. Abaixo do código exibido, cole o seguinte trecho:
<script>linkwithin_text=' Seu texto aqui '</script>
Agora, substitua a parte em negrito pela frase que você deseja exibir. No meu caso, ficou assim:
<script>
var linkwithin_site_id = 2293565;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a><script>linkwithin_text='Veja também:'</script>
Por fim, é só salvar.

2. Personalizando o formato, cores e fonte


Eu pessoalmente, não gosto muito da aparência do gadget oferecido pelo LinkWithin. Mas felizmente, é possível modificá-lo! Utilizando CSS, vamos deixar as imagens arredondadas, eliminar a borda que separa as postagens e também optar pelas cores de nossa preferência, assim como a fonte do texto. Para isso, acesse o acesse o Painel do blog > Modelo > Editar HTML e procure (Ctrl+F) por ]]></b:skin>

 Antes de ]]></b:skin>, cole o seguinte código:


/* LinkWithin personalizado

----------------------------------------------- */

.linkwithin_div {

background: #FFFFFF; /* Cor de fundo */

padding: 0 10px;

}
.linkwithin_text {
font-size:16px; /* Tamanho do título do gadget */
color:#696969; /* Cor do título do gadget */
}
a#linkwithin_logolink_0, a#linkwithin_logolink_1, a#linkwithin_logolink_2, a#linkwithin_logolink_3, a#linkwithin_logolink_4, a#linkwithin_logolink_5, a#linkwithin_logolink_6, a#linkwithin_logolink_7, a#linkwithin_logolink_8, a#linkwithin_logolink_9, a#linkwithin_logolink_10, a#linkwithin_logolink_11, a#linkwithin_logolink_12, a#linkwithin_logolink_13, a#linkwithin_logolink_14, a#linkwithin_logolink_15, a#linkwithin_logolink_16, a#linkwithin_logolink_17, a#linkwithin_logolink_18, a#linkwithin_logolink_19, a#linkwithin_logolink_20 {
display:none; /* Com isto eliminamos o link */
}
.linkwithin_posts {
width: 714px !important; /* Tamanho do gadget */
}
.linkwithin_posts a {
border: 0 !important;
padding-right: 10px !important;
}
.linkwithin_posts a:hover {
background: #FFFFFF !important; /* Cor de fundo ao passar o cursor */
}
.linkwithin_img_0 div, div.linkwithin_img_0,
.linkwithin_img_1 div, div.linkwithin_img_1,
.linkwithin_img_2 div, div.linkwithin_img_2,
.linkwithin_img_3 div, div.linkwithin_img_3,
.linkwithin_img_4 div, div.linkwithin_img_4,
.linkwithin_img_5 div, div.linkwithin_img_5,
.linkwithin_img_6 div, div.linkwithin_img_6,
.linkwithin_img_7 div, div.linkwithin_img_7,
.linkwithin_img_8 div, div.linkwithin_img_8,
.linkwithin_img_9 div, div.linkwithin_img_9,
.linkwithin_img_10 div, div.linkwithin_img_10,
.linkwithin_img_11 div, div.linkwithin_img_11,
.linkwithin_img_12 div, div.linkwithin_img_12,
.linkwithin_img_13 div, div.linkwithin_img_13,
.linkwithin_img_14 div, div.linkwithin_img_14,
.linkwithin_img_15 div, div.linkwithin_img_15,
.linkwithin_img_16 div, div.linkwithin_img_16,
.linkwithin_img_17 div, div.linkwithin_img_17,
.linkwithin_img_18 div, div.linkwithin_img_18,
.linkwithin_img_19 div, div.linkwithin_img_19,
.linkwithin_img_20 div, div.linkwithin_img_20 {
/* Bordas arredondadas */
-webkit-border-radius: 80px !important;
-moz-border-radius: 80px;
border-radius: 80px;
border:0 !important;
}
.linkwithin_title {
color: #BEBEBE !important; /* Cor dos títulos das postagens */
font: normal 13px "FrankRuehl", cursive !important; /* Fonte dos títulos das postagens */
line-height: 13px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #FFB6C1 !important; /* Cor dos títulos ao passar o cursor */
font-weight:!important;
}

Os trechos em negrito correspondem aos itens que vocês podem personalizar, e eu indico essa tabela de cores aqui. Depois, é só salvar :)

Leia também

29 comentários

  1. Obrigada! Deu certinho aqui, finalmente! O teu tuto foi o único que funcionou comigo até hoje *o* muito obrigada :D
    xx

    http://diariodeumafricana.blogspot.pt

    ResponderExcluir
    Respostas
    1. Que bom Sandra, fico feliz :D De nada!

      Excluir
    2. Como vc deixou "LEIA TAMBÉM?" Com esses quadros grandes? Eu queria assim!! :) Pode me ajudar?

      http://www.divaemaquiada.com.br/

      Excluir
  2. Puxa! Tentei colocar, mas apareceu apenas "Veja também:". O que será que deu errado? Uma ajuda, por favor. uaheuahea :/

    ResponderExcluir
    Respostas
    1. Ué, que estranho ): Tu chegou a esperar um pouco? O meu demorou um pouquinho pra aparecer...

      Excluir
  3. No meu também aconteceu a mesma coisa que oda menina acima :(
    Toda vez que tento fazer este tutorial só aparece o nome "Veja também"
    Me ajuda :(

    ResponderExcluir
    Respostas
    1. Oi Luana :) Li no site deles que pode demorar algumas horas até o gadget começar a funcionar. O meu no início até mostrava umas propagandas em vez de posts do meu blog, mas depois normalizou. Estou fazendo um teste em outro blog pra ver se vai aparecer, mas faz o teste também e espera um pouco pra ver!

      Excluir
    2. Obrigada por tudo! Segui seus concelhos, mais já estou esperando ha 2 dias e nada. Fiz tudo certinho e ainda não apareceu. Acho que vou desistir :(

      Excluir
    3. De nada, mas que pena que não deu certo :/ Se eu achar algum tutorial parecido por aí te mando!

      Excluir
  4. Deu muito certo.Adorei,ajudou muito.Beijos :3

    http://everything2k.blogspot.com.br/

    ResponderExcluir
  5. Obrigadaaa!Me ajudou demais!

    http://enkontrocomk.blogspot.com
    ~le eu fazendo template novo~

    ResponderExcluir
    Respostas
    1. Oba, novo layout! Adoro hehe <3 E de nadaa! Fico feliz que tenha ajudado.

      Excluir
  6. O que eu faço? O LinkWithin não tá funcionando nem sem personalização.

    ResponderExcluir
    Respostas
    1. Aline, tu chegou a esperar algum tempo pra ver se o gadget funcionava? Às vezes pode demorar um pouco. Se tu fez isso e mesmo assim não funcionou, infelizmente não sei como te ajudar... Já vi várias pessoas reclamando que não conseguem colocá-lo de jeito nenhum no blog, mas realmente não sei qual pode ser o problema :((

      Excluir
    2. Por acaso eu tava vendo esse post de novo. E passei para responder que consegui colocar. Já tava com outro, mas tive que voltar com o linkwithin, mas não personaliza :(

      Excluir
  7. Obrigada!! vou espera para ver se da certo 😍😍

    ResponderExcluir
  8. O meu não deu certo :/ Vou esperar uns dias. Mesmo assim, muito obrigada

    ResponderExcluir
    Respostas
    1. Ai, que pena :( Já pesquisei muito e ainda não descobri o que é, porque pra muita gente dá errado :/ De nada!

      Excluir
  9. . Ótimo tutorial, perfeito mesmo ..
    . Mas meu blog ta com um probleminha de não aparecer as miniaturas das postagens relacionadas, só aparece o link assim

    FICA MAIS UM POUQUINHO! VEJA TAMBÉM:
    - COMO MUDAR A COR DO TEXTO SELECIONADO PELO MOUSE
    - SÉRIES QUE AMO: TEEN WOLF

    . Já tenti de tudo, e nada pra essas miniaturas aparecerem .. Consegue me ajudar ? Pfv <3

    ResponderExcluir
    Respostas
    1. Ah, que pena :(( Mais pessoas já me falaram que não estava funcionando, mas infelizmente não sei o que pode ser. Já testei e não consegui achar nada de errado :// Desculpa!

      Excluir
  10. O LinkWithin costuma por como relacionado posts que são só rascunho no blog... Isso é um problema que com o tempo se corrige ou ele vai ficar para sempre apresentando os rascunhos?

    ResponderExcluir
    Respostas
    1. Moça, nunca tive esse problema, então não sei te responder ): Ele não deveria mostrar os rascunhos, afinal, eles nem foram publicados!

      Excluir
  11. Amei essa dica,deu super certo no meu!
    Se quiser da uma passadinha lá no meu blog http://umjeitooproprio.blogspot.com.br

    ResponderExcluir
  12. Muito obrigado!
    Ficou ótimo!

    ResponderExcluir
  13. Nossa estou rodando aqui e não consigo um tutorial que dê certo, nem mudando o html. Eu quero que apareça o leia também no post e não na pagina inicial, com o linkwithin aparece na pagina inicial e no post não aparece nada. Se puder me dar uma luz te agradeço.

    ResponderExcluir
  14. Mari, será que dá o mesmo efeito no wordpress?

    ResponderExcluir

Postagens Populares

Facebook

Inscreva-se