Tutorial: Posts relacionados personalizados


Desde o começo da semana passada, quando eu dei uma mudada em alguns detalhes do blog como os posts relacionados e a paginação, algumas pessoas me pediram ajuda pra fazer igual, e como é super facinho, resolvi fazer um tutorial.
 O código eu encontrei no blog Jackie Dream, e como ele está com algumas falhas, resolvi fazer algumas alterações, então o código que eu irei postar já está pronto pra ser usado no seu blog, só precisará trocar as cores.
Antes de começar, faça um backup do seu theme e salve.

O primeiro passo é adicionar o widget do Linkwithin, vou fazer um passo a passo, mas acredito que a maioria de vocês já o utilizam.

Acesse o site do Linkwithin clicando aqui e preencha as opções:



Você será redimensionado para esta página, onde você encontra um tutorial de como instalar o widget.

Escolha seu blog, não altere o título e clique em adicionar wigdet. Depois em layout posicione o widget em baixo da área do post e salve.
Feito isso é hora da parte mais legal, colocar o código HTML :)

Agora em vá em modelo e depois editar html, para facilitar a busca aperte ctrl+f e procure por esse trecho ]]></b:skin>
Agora que você encontrou o código, ANTES ou ACIMA dele, cole esse código:

/* LINKWITHIN PERSONALIZADO editado por
Jess Vieira - www.omundodejess.com
----------------------------------------------- */
.linkwithin_div {
background: #F6F1D4; /* COR DE FUNDO */
padding: 0 10px;
}
.linkwithin_text {
font-size:14px; /* TAMANHO DO TITULO DO GADET */
color:#CDA59B; /* COR DO TITULO DO GADET */
font-family: 'Arial', cursive; !important;
}
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; /* CCOM ISTO ELIMINAMOS O LINK */
}
.linkwithin_posts {
width: 560px !important; /* TAMANHO DO GADET */
}
.linkwithin_posts a {
border: 0 !important;
padding-right:10px !important;
}
.linkwithin_posts a:hover {
background: #D8C1B9 !important; /* COR DO FUNDO AO PASSAR O MOUSE */
-webkit-border-radius: 10px !important; /*BORDAS REDONDAS*/
-moz-border-radius: 10px;
border-radius: 10px;
}
.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 REDONDAS */
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px;
border-radius: 10px;
border-style: dashed !important;
}
.linkwithin_title {
color: #494347 !important; /* COR DOS TITULOS DAS POSTAGENS */
font-family: 'Arial', cursive; !important; /* TIPO DE FONTE DOS TITULOS DAS POSTAGENS */
font-size: 12px !important; /* TAMANHO DOS TITULOS DAS POSTAGENS */
line-height: 15px !important;
text-align:center;
text-decoration: none;
}
.linkwithin_title:hover {
color: #F6F1D4 !important; /* COR DOS TITULOS AO PASSAR O MOUSE */
font-weight: bold !important;
}

Altere apenas a área que estiver com a escrita indicando, que são cores, fontes e tamanho. Para as cores, eu uso esse site aqui.
Com esse código seus posts relacionados ficarão assim:















Agora se você quer que eles fiquem redondinhos iguais ao do meu blog, é só mudar a área marcada como /* BORDAS REDONDAS */ de 20px para 50px. Visualize, se estiver tudo ok, salve e voilá.

*Atualização: Pessoal, visitando alguns blogs de quem utilizou a personalização, eu encontrei um errinho de margem, mas acabei de editar a postagem e agora o código está corrigido.

Bem facinho né pessoal? Espero que tenham compreendido e que eu tenha tirado as dúvidas de vocês.
Quem usar o código, comenta aqui pra eu ver como ficou, que tal?
xoxo



43 comentários:

  1. Ah, eu queria fazer isso! Obrigada pelo tutorial, Jess, ficou bem explicadinho e é fácil de fazer *-*

    Beijão, Unsaid Things

    ResponderExcluir
  2. adorei o tutorial, mas tenho medo de tentar e virar uma completa zona.
    http://blogradioactive.blogspot.com.br/

    ResponderExcluir
  3. Adorei, preciso de tempo para fazer isso.

    ResponderExcluir
  4. De repente dezoito4 de março de 2013 17:24

    Consegui colocar no meu, ficou fofinho! Obrigada!

    ResponderExcluir
  5. Adorei o tutorial! Até me arrisquei e fiz!! O que achou??

    http://morethanalovelylife.blogspot.com.br/

    ResponderExcluir
  6. Fica muito bacana, estou usando *o*

    ResponderExcluir
  7. Oba ♥ Manda o link do seu blog pra eu ver :p

    ResponderExcluir
  8. Adorei as cores, ficou lindo <3

    ResponderExcluir
  9. <3 Depois manda o link do seu blog pra eu ver :)

    ResponderExcluir
  10. Adorei Jess, vou colocar no meu blog e vai ficar muito bom!
    Obrigada mesmo pela sua ajuda, beijinhos flor....


    s2

    ResponderExcluir
  11. Já coloquei no meu blog, Jess.


    Dá uma olhadinha?


    JULIANAYRA.BLOGSPOT.COM


    Beijinhos e você me ajudou muito !

    ResponderExcluir
  12. Sua lindaaaaa.. Obrigada por compartilhar! Estava mesmo procurando como deixar as imagens redondinhas, acho lindo! Mudei lá no blog, obrigada mesmo! *---*

    Beijinhos <3

    ResponderExcluir
  13. Suelen Costa Lima6 de março de 2013 11:39

    Arrazou muito Jess! <3 Sempre quis ter esse widget mas nunca vi um que fique já prontamente tão lindo ahehaehaeh vou usar futuramente, porque né

    <3
    http://rostodeneve.blogspot.com

    ResponderExcluir
  14. haha não fica não, ele é fácil e o código ta detalhado caso precise excluir haha

    ResponderExcluir
  15. Ficou fofo, como tudo no seu blog <3

    ResponderExcluir
  16. '- Strawberry Piink7 de março de 2013 16:48

    Usei e adorei, Jess!
    Há muito estava querendo colocar no meu blog, mas nunca achava um tutorial que explicasse direitinho *-*

    Obrigada!

    ResponderExcluir
  17. Estou usando... muito obrigada! Sempre procurei aprender mas não conseguia encontrar um tutorial tão simples e bem detalhadinho ♥


    blog: www.alemdemim.com

    ResponderExcluir
  18. Muito obrigada pela dica, vou testar *-*

    Beijos ♥

    Louca Indecisão

    ResponderExcluir
  19. Oi Jess! Sou leitora nova aqui e já queria dizer que estou amando o blog! :D eu já tinha o Linkwithin mas não sabia que ele poderia ser personalizado! Adorei! Só estou com uma dúvida: no meu blog, ele sempre relaciona com post's beeem antigos (há mais de um ano!) isso acontece com o seu também? Achei que mudando agora, ele também mudaria as "relações", mas não, continua a mesma coisa. :/

    ResponderExcluir
  20. Sim, por exemplo nessa postagem, ele está mostrando como post relacionado o primeiro que foi publicado no blog :\
    Esse problema é do próprio gadet Linwithin, aqui as vezes ele mostra certo e as vezes não.
    Tem um outro que se chama 2seep (http://get.2leep.com/dashboard/) tenta usar ele, aqui no meu blog devido aos códigos de html não rodou, mas já usei em blog teste e fica bem bonito.

    beijo

    ResponderExcluir
  21. Francieli Bittencourt12 de abril de 2013 15:49

    Guria, era exatamente isso que eu tava procurando! Nem acreditei quando ficou tudo lindinho, muito obrigada por compartilhar, viu?

    Uma dúvida: como mudar aquele título do widget "you might also like:" ?

    Beijinho!

    ResponderExcluir
  22. Francieli Bittencourt14 de junho de 2013 15:19

    Jess, deixa eu te fazer uma pergunta!

    Tu saberia como colocar nessa personalização o efeito hover, aquele que só aparece a cor quando passa o mouse?

    Beijinhos e obrigada!!

    ResponderExcluir
  23. Sei qual o código, mas nunca usei nos posts relacionados. Posso fazer um teste e se der certo eu posto aqui :)

    ResponderExcluir
  24. Ei, não tinha visto essa mensagem :\
    Para mudar procure por e cole abaixo esse código: linkwithin_text='escreva aqui seu texto:' visualize e salve :)

    ResponderExcluir
  25. Francieli Bittencourt14 de junho de 2013 15:35

    Eu to tentando acrescentar umas coisas e editar o código que tu nos ofereceu no teu post, mas todas as minhas tentativas estão fracassando! hahahahah

    Muito obrigada pela tua atenção, viu?

    ResponderExcluir
  26. Francieli Bittencourt14 de junho de 2013 15:51

    Brigadada Jess!!
    Esse eu acabei conseguindo, heehe

    ResponderExcluir
  27. Vicktoria Monteese25 de junho de 2013 04:29

    Jess, tentei de todas as formas procurar o código no meu template, com ctrl+f, mas não encontra de jeito nenhum. Nem colocando o código e nem colocando "skin". Me ajuda?

    ResponderExcluir
  28. Todo e qualquer theme tem que ter esse código. Dá uma olhada se no seu ele está acima de , ele é ó código que fecha: <![CDATA[/*

    ResponderExcluir
  29. Super funcionou, até indiquei esse tutorial como links da semana

    http://eunaonascinosanos80.blogspot.com.br/

    ResponderExcluir
  30. Eba! Fico feliz em saber :)
    Obrigada pela indicação :*

    ResponderExcluir
  31. Não consegui :/

    ResponderExcluir
  32. Você pode ter apagado ou esquecido de algo. Testei aqui e está tudo ok :(

    ResponderExcluir
  33. Oii então eu posso mudar o titulo do gadget?

    ResponderExcluir
  34. não consigo instalar. tentei de todas as meneiras mas não aparece nada ! ;(

    ResponderExcluir
  35. Então, eu coloquei o código, mas não aparece as fotos do post

    ResponderExcluir
  36. Oii eu queria saber como eu faço para retirar esse espaço aqui entre o circulo e a imagem, eu queria que a imagem ficasse redonda, mas sem o circulo e o espaço, tem como?

    ResponderExcluir
  37. Ei, Jess! Obrigada por compartilhar isso, eu não achava de jeito nenhum. hahah
    Você sabe me dizer como eu faço pra colocar tudo centralizado? Se puder eu agradeceria muito!
    Obrigada e fico aguardando sua resposta.
    Um beijo!
    www.escritoradosdezesseis.com

    ResponderExcluir
  38. Oii, eu sei que você já fez esse post a muito tempo mais eu tenho uma pergunta:
    Como faz para aparecer as imagens das postagens relacionadas?

    ResponderExcluir
  39. o que me incomoda nesse linkwithin é que ele sempre fica em cima dos comentários e botoes de compaetilhamente... tem como ele parecer embaixo???

    ResponderExcluir
  40. Ficou bem legal, eu deixei a imagem redonda, era o que eu queria mas não estava encontrado como personalizar, eu tinha encontrado um outro tutorial, mas não tinha funcionado. Adorei!

    ResponderExcluir

Fique a vontade para comentar e deixar sua opinião, mas sempre mantendo o respeito.
Comentários apenas para divulgação não serão aceitos, obrigada.

Related Posts Plugin for WordPress, Blogger...