Tutorial: Como adicionar o Gadget "Poderá também gostar de" no seu blog.


Olá lindinhos, como vocês estão?
Voltei com mais um tutorial, bom pediram que eu ensinasse várias coisas pelo meu face e eu fiquei tão feliz em saber que de alguma forma estou podendo ajuda-los *-*
Mas, o tutorial de hoje é como adicionar um gadget bem prático, aos poucos vou ensinando várias coisas pra vocês. Ah, quem tiver curiosidade em ver todos os tutorias, pode clicar na barra de pesquisas e escrever "tutoriais" ou pode também clicar na aba aqui acima, lá vocês verão a lista com os que eu já fiz.

Vamos começar. Lembrando que você deve fazer um backup do seu template antes de começar a modificar o html, apenas por precaução.

Depois de salvar o seu template, entre nesse site http://www.linkwithin.com e preencha a caixa que aparece ao lado, com seu e-mail, endereço do seu blog, e na "Platform" clique em "others" caso contrário, não funcionará.

Na opção "Width" escolha quantas caixas você quer que apareça, com no máximo 5, por exemplo:


Se o seu blog tiver um fundo mais escuro, você precisa selecionar a caixa My blog has light text on a dark background. Agora basta clicar em Get Widget. Vai abrir uma nova página com um código. 
Após isso você vai precisar abrir o seu painel de controle do blog, e clicar em Modelo e depois em Editar HTML, depois marque a opção Expandir modelos de widget. Clique em Ctrl+F e procure por:
<div class=’post-footer’>
Antes desse código cole o código obtido no site Linkwithin. Visualize, se estiver tudo certo, salve.

E voilá, está feito!
Espero ter ajudado.



53 comentários:

  1. Muito obrigada! Deu super certo! Pode ensinar como pôr opções de compartilhamento nos posts, tipo: "Tweet" e "Curta", ocisas do tipo.
    MUITO OBRIGADA!
    maravilhosomundodetinta.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Claro flor, o próximo tutorial farei isso *-* Obrigada pela dica.
      Fico muito feliz que tenha dado certo.

      Beijocas!

      Excluir
  2. Adorei e apliquei no meu novo Bestinho... rsrsrs Adoro tutoriais para incrementar as informações! Adorei amiga!

    Beijos,

    Celle
    Best Therapy

    ResponderExcluir
    Respostas
    1. HAHAHA'
      Que bom que você gostou Celle *-*
      Quero só ver esse novo "Bestinho" hahaha

      Excluir
  3. Eba!!
    Adorei, sua linda!
    Obrigada!
    Beijão!

    ResponderExcluir
  4. É um gadget muito útil. Eu já usava no meu blog e fico feliz que você esteja ensinando os outros blogueiros a fazer isso, Kéziah!

    http://desbravandolivros.blogspot.com.br/

    ResponderExcluir
  5. Keeeeeeeh, amei amei amei, muito útil, muito bom, eu já tinha tentado colocar, mas não tinha conseguido!
    Adorei!
    Beijos : *

    Fraaaaan

    ResponderExcluir
  6. Que bom que você conseguiu Fran, linda *-*
    Beijocas!

    ResponderExcluir
  7. Este gadget me seria muito útil se eu estivesse com o antigo layout!! Mesmo assim, obrigado por nos ensinar... Futuramente eu posso colocar ele (gadget) no blog e uso o seu tutorial como Help.

    Beijinhos e Feliz 2013!

    ResponderExcluir
  8. Show de bola! Não imagina quanto tempo estou querendo adicionar isso no meu blog; mas, como sou nova nesse mundo, estava encontrando muita dificuldade. Muito obrigada por compartilhar seu conhecimento!
    Beijos.
    Patrícia Fagundes

    ResponderExcluir
    Respostas
    1. Aw querida, fico muito feliz que tenha sido útil de alguma forma pra você *-* obrigada pela visita, beijos!!

      Excluir
  9. Deu super certo!!!

    Muitissimo obrigada!!!

    ResponderExcluir
    Respostas
    1. Imagina, fico feliz que tenha dado certo *-*

      Excluir
  10. Como eu faço para esse gadget ficar abaixo da assinatura, como está no seu? Obrigada.

    ResponderExcluir
    Respostas
    1. Oi querida, ai provavelmente você precisa mexer na posição da sua assinatura, agora que mudei de Lay a assinatura foi pra baixo dele. Beijos!

      Excluir
  11. Larissa Borges08 março, 2013

    Ei, eu segui todos os passos indicados por você. Salvei e tudo mais. Mas, quando entro no meu blog, que clico em um nos quadradinhos do "Poderá também gostar de:", não vai.. Apenas carrega, e dá um código assim ''http://simplismeenteviver.blogspot.com.br/widget6.linkwithin.com/redirect?url=http%3A//blogdalarissab.blogspot.com/2012/09/blog-post_6464.html&vars=%5B%22http%3A//.br/%22%2C%201674585%2C%200%2C%20%22http%3A//simplismeenteviver.blogspot.com/2013/03/acaba-sempre-acaba.html%22%2C%20null%2C%200%2C%20291205957%5D&ts=1362785082122'' Não vai direto sabe? E depois aparece que o post não existe. Socorro! Me ajude.

    ResponderExcluir
    Respostas
    1. Pode ser algum problema no css do blog, ou no html java script ou alguma coisa assim

      Excluir
    2. Nossa, que estranho, tentou repetir o procedimento? Como o Animes e Tudo mais falou, pode ser algum problema co css ou o próprio html, procure quem fez seu lay, para que possa te dar uma forcinha. Beijos!

      Excluir
  12. Esses passos só servem para blogspot? Ou serve para wordpress tbm?

    ResponderExcluir
    Respostas
    1. Flor, no site indicado você pode escolher a plataforma, tanto blogspot ou wordpress: http://www.linkwithin.com/learn ;) os passos são os mesmos, só muda que eu não sei onde fica o "modelo" no wordpress hahaha beijos!

      Excluir
  13. Maaas muuuito obrigada \o/ Finalmente alguém que ensinou beem direitinho =D
    Veja como ficou > http://thaylorrany.blogspot.com.br/

    ResponderExcluir
  14. Nossa, muito obrigada, ficou demais... Você explica tudo tão direitinho
    Obrigada :D

    beijos
    http://geehzbookshelf.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Aw, obrigada querida... Fico feliz que tenha ajudado <3

      Excluir
  15. Adorei! Perfeito! Fácil e certeiro!
    Obrigado!!!
    Bjosss!!!!

    ResponderExcluir
  16. Amei deu munto certo você me ajudo munto obrigado pelo tutorial
    e é munto fácil

    ResponderExcluir
    Respostas
    1. Obrigada pelo comentário querida, fico feliz que tenha ajudado. Super fácil mesmo *-*

      Excluir
  17. Agradecido, ficou bom no meu blog, continue dando dicas tão boas quanto essa =D

    ResponderExcluir
  18. Como vc colocou esses coraçoes caindo do cursor do mouse tem como colocar por exemplo umas bolhas

    ResponderExcluir
    Respostas
    1. Oi Gabriel, existem códigos para bolhas, estrelas e corações. Acho que já criei um tutorial sobre. Beijos!

      Excluir
  19. muito boa a dica
    agnesvata.blogspot.com.br

    ResponderExcluir
  20. não consigo achar esse codigo div class=’post-footer’ no meu html, poderia me ajudar?????? http://sevirateen.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Você está procurando certinho da forma como coloquei? Sem tirar nada? Se sim e ainda não apareceu, procura a pessoa que criou teu lay, deve ser algum probleminha ou falta de algum código no html.

      Excluir
  21. muito, muito obrigada aqui de Portugal :)
    não imagina há quanto tempo queria ter isto no meu blog!!

    ResponderExcluir
    Respostas
    1. Poxa, que feliz saber que alguém de longe gostou <3 muitíssimo obrigada. Beijos!

      Excluir
  22. Você poderia nos ensinar como colocar na forma redonda? Acho a forma redonda mais lindinha...
    Desde já agradeço.
    http://mariaulhoa.blogspot.com.br/

    ResponderExcluir
  23. Ah muito obrigada!
    Eu tava tentando adicionar esse widget de novo no blog e não conseguia.
    Sua dica deu certo comigo.
    Grande Beijo

    ResponderExcluir
  24. Muito bacana seu post! Amei seu blog e suas dicas! Beijão linda!

    queridasenhorita.blogspot.com

    ResponderExcluir
  25. Respostas
    1. Pra ficar redondo coloque este código aqui:
      /* LinkWithin personalizado
      ----------------------------------------------- */
      .linkwithin_div {
      background: #5a6989; /* Cor de fundo */
      padding: 0 10px;
      }
      .linkwithin_text {
      font-size:18px; /* Tamanho do título do gadget */
      color:#e96978; /* Cor do título do gadget */
      font-family: 'Dosis', sans-serif;
      }
      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: 600px !important; /* Tamanho do gadget */
      }
      .linkwithin_posts a {
      border: 0!important;
      padding-right: 29px !important;
      }
      .linkwithin_posts a:hover {
      background: #e96978 !important; /* Cor de fundo ao passar o cursor */
      -webkit-border-radius: 50px !important;
      -moz-border-radius: 50px;
      border-radius: 50px;
      }
      .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 redondeadas */
      -webkit-border-radius: 50px !important;
      -moz-border-radius: 50px;
      border-radius: 50px;
      border-style: dashed !important;
      }
      .linkwithin_title {
      color: #5a6989 !important; /* Cor dos títulos das postagens */
      font-family: Unica One; !important; /* Tipo de fonte dos títulos das postagens */
      font-size: 11px !important; /* Tamanho dos títulos das postagens */
      line-height: 12px !important;
      text-align:center;
      text-decoration: none;
      }
      .linkwithin_title:hover {
      color: #5a6989 !important; /* Cor dos títulos ao passar o cursor */
      font-weight: bold !important;
      }
      Acima de ]]></b:skin

      Excluir
  26. Olá Kéziah, também gostaria de saber como colocar eles redondinhos.
    Beijoos.
    http://nailsfantastic.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Pra ficar redondo coloque este código aqui:
      /* LinkWithin personalizado
      ----------------------------------------------- */
      .linkwithin_div {
      background: #5a6989; /* Cor de fundo */
      padding: 0 10px;
      }
      .linkwithin_text {
      font-size:18px; /* Tamanho do título do gadget */
      color:#e96978; /* Cor do título do gadget */
      font-family: 'Dosis', sans-serif;
      }
      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: 600px !important; /* Tamanho do gadget */
      }
      .linkwithin_posts a {
      border: 0!important;
      padding-right: 29px !important;
      }
      .linkwithin_posts a:hover {
      background: #e96978 !important; /* Cor de fundo ao passar o cursor */
      -webkit-border-radius: 50px !important;
      -moz-border-radius: 50px;
      border-radius: 50px;
      }
      .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 redondeadas */
      -webkit-border-radius: 50px !important;
      -moz-border-radius: 50px;
      border-radius: 50px;
      border-style: dashed !important;
      }
      .linkwithin_title {
      color: #5a6989 !important; /* Cor dos títulos das postagens */
      font-family: Unica One; !important; /* Tipo de fonte dos títulos das postagens */
      font-size: 11px !important; /* Tamanho dos títulos das postagens */
      line-height: 12px !important;
      text-align:center;
      text-decoration: none;
      }
      .linkwithin_title:hover {
      color: #5a6989 !important; /* Cor dos títulos ao passar o cursor */
      font-weight: bold !important;
      }
      Acima de ]]></b:skin

      Excluir
  27. Não consigo acertar ...me ajude a colocar. bjs

    ResponderExcluir
  28. o meu só aparece You might also like: e nenhuma imagem ou post em miniatura

    ResponderExcluir

Sua opinião é de extrema importância.
Sinta-se a vontade para deixar sua sugestão, crítica, dúvida, opinião, etc.
Mas lembre-se, seja educado com seus comentários e dispense palavras de baixo calão, pornografias e qualquer outro tipo de preconceito.
Deixe o link do seu blog ou qualquer outro tipo de contato para que eu possa retribuir sua visita.

Obrigada pela visita, volte sempre que puder.
Beijos!

Fonte: http://princesa-descolada-myla.blogspot.com/2013/03/paginacao-numerada.html#ixzz2j39CpByO