Linkwithin - posts relacionados com imagens

Linkwithin - posts relacionados com imagens

6 10 99
Linkwithin - posts relacionados com imagens 10 6 99
No ano passado, escrevi um post ensinando a usar um hack que mostrava os “posts relacionados” com pequenas imagens, também chamadas de thumbnails :
O problema deste hack é que ele só funciona com script – o que pode ser complicado para iniciantes ou para quem não tem um serviço de hospedagem.
Navegando por outros blogs, conheci um serviço chamado LinkWithin, que gera um widget para ser colocado em blogs, de forma muito simples e rápida.

Vejam como ficou no meu outro blog, o  Dicas de Informática:

Existem duas formas de instalar o widget do Linkwithin no Blogger – diretamente, pelos elementos de página ou dentro do HTML do template.
Na primeira opção, os thumbnails aparecerão em todos os artigos, inclusive na página inicial. Já na segunda, podemos exibir o gadget apenas nas páginas individuais.
Como colocar o widget nos elementos de página
Entre no site Linkwithin. À direita, preencha os campos solicitados:
  • Email: coloque seu email;
  • Blog Link: endereço do seu blog (sem o http);
  • Plataform: Blogger;
  • Width: escolha quantas imagens deseja mostrar;
Se o fundo (background) do seu blog for da cor preta com letras (fontes) claras, marque a caixa My blog has light text on a dark background.

Clique no botão Get Widget. Na página seguinte, clique em Install Widget. Selecione o blog onde você vai instalar o widget e clique em adicionar widget.

Por padrão, o código será instalado no topo do blog. Mova o gadget e coloque-o embaixo da área de postagens. Visualize e clique no botão salvar.

Desta forma, os posts relacionados do Linkwithin aparecerão em todos os seus artigos, inclusive na página inicial (home). Mas isso é possível de mudar ;)
Como colocar o widget somente nas páginas individuais
Siga os procedimentos descritos acima, para gerar o código do widget. Depois que ele estiver instalado em seu blog, clique em editar e copie o código todo.

Vá para a aba editar HTML. Marque a caixa expandir modelos de widgets. Dê um Crtl+F com teclado e procure pelo seguinte trecho (ou algo parecido):
<p class='post-footer-line post-footer-line-3'/>
Cole o seguinte código, logo abaixo deste trecho:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
CÓDIGO DO LINKWITHIN
</b:if>
Substitua CÓDIGO DO LINKWITHIN pelo código gerado anteriormente.
Clique no botão visualizar e se tudo estiver ok, salve.
IMPORTANTE – Se você já tinha aquele hack mais antigo, onde só aparecem os links (como é aqui no DB), você deve procurar pelo seguinte trecho:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <b>Posts Relacionados</b></b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
Substitua tudo por:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
CÓDIGO DO LINKWITHIN
</b:if>
Como mudar a frase do gadget
Para personalizar a frase-padrão do gadget, procure por:
< div class='post-footer'>
E cole logo abaixo:
<script>linkwithin_text='SEU TEXTO PERSONALIZADO:'</script>
**Super dica da querida leitora Lucy, do blog ♥ Amor e Paz Sem Fronteiras ♥

É altamente recomendável que tudo isso seja feito antes em um blog de testes.
37 Comments
Comments
  1. É sim um bom hack! Fácil de usar e muito útil! Já usei em um blog meu e super recomendo, é melhor usar o hack nas páginas individuais do blog, fica melhor, na minha opinião, parabéns pelo artigo!

    Abraços, Brian coimbra! :)

    ResponderExcluir
  2. Olá Juliana,

    Eu uso o Linkwithin há bastante tempo e adoro!
    Ficou muito legal este post tb.
    Queria publicar uma dica aqui para personalizá-lo mas não dá para ser nos comentários pq não aceita códigos.
    Então te enviei por email tá?!

    Um abração a ti ;)

    ResponderExcluir
  3. Oi Juliana,

    estou te enviando de novo agora, é pq o outro eu errei e mandei por aquele email que recebo o teu feed;)

    ResponderExcluir
  4. Ola Juliana
    Confesso que anteriormente utilizada o LinkWithin em meu blog, mas com outro template.
    Hoje estou utilizando outro template do próprio blogger, e infelizmente mesmo seguinte seu tutorial as imagens dos links aparecenm somente no final de cada pagina individual, ou seja no rodapé da pagina e não do post.
    Gostaria de poder contar com sua ajuda se possível, se puder me auxiliar ficarei muito grato.
    Solicitei inclusive a ajuda on line do Linkwithin, mas não obtive resposta.
    Conto com sua compreensão.
    Um forte abraço
    Mad

    ResponderExcluir
  5. Muito obrigada Juliana!!!

    Fico contente que possa ser útil a outras pessoas tb.

    Abração a ti ;)

    ResponderExcluir
  6. Mad, vou ficar te devendo, pois ainda tenho pouquíssimo conhecimento sobre os novo templates do Blogger

    ResponderExcluir
  7. Mad, não sei se te ajudará, mas na época em que instalei o meu tive um problema parecido: eu colei o código num novo elemento de página, aí ficou fora do lugar. Mas postando diretamente do site e apenas arrastando-o para a área das postagens, aí ele fica certinho.

    Oi, Juliana, continuo por aqui, não sumi não rss Só fazia tempo que não deixava um comentário. Um beijo.

    Um beijo

    ResponderExcluir
  8. Juliana,eu já vinha usando o Linkwithin, mas gostei da idéia de ocultá-lo na página principal. Ficou bem mais clean. Tks

    ResponderExcluir
  9. Comigo dá este erro.

    Proxy Error

    The proxy server received an invalid response from an upstream server.
    The proxy server could not handle the request POST /learn.

    Reason: Error reading from remote server

    ResponderExcluir
  10. Tambem estou tendo o mesmo erro do Johnny. Nao consigo instalar o Linkwithin...

    ResponderExcluir
  11. Acho o Linkwithin uma ideia genial porque ele não deixa os posts mais antigos perdidos pelo blog.

    Gostei muito da sua dica de ocultá-lo da home, até porque se tiverem muitos posts pode ocorrer da widget repetir as sugestões, principalmente para quem utiliza as 5 janelas (como eu).

    Gosto muito do seu blog. Dicas sempre 10! Abs.

    ResponderExcluir
  12. Afinal qual o melhor? O hack utilizando um java script ou este? O LinkWithin alem de relacionar mostra em algun outro lugar os posts relacionados aos seus com de outro blog?

    ResponderExcluir
  13. caramba, ainda não acredito que consegui; vc é d+! Abraço!!!

    ResponderExcluir
  14. No meu caso, o blog tem o hack mais antigo (que só aparecem os links). Mas eu estou fazendo tudo direitinho e na hora de visuaizar aparece:

    "Mensagem de erro em XML: The element type "div" must be terminated by the matching end-tag "

    Me ajudem! Sou novata e leiga! kkkkkkkkk

    ResponderExcluir
  15. Ahhh!! Conseguii! Foi só falta de atenção! Apaguei todo o código do antigo e coloquei o novo e deu certinho!

    ResponderExcluir
  16. Não sei pq mas em meu blog aparece somente as imagens... se puderes me ajudar?
    Grato.

    ResponderExcluir
  17. Preciso de uma orientação sua, em meu blog acontece o mesmo do Tiburcius ai em cima, só aparece as imagens, sem texto, como devo proceder???

    Parabens pelo site, otimas dicas!!!

    ResponderExcluir
  18. Muito obrigado, era realmente o que eu estava procurando. Continue assim, suas dicas são ótimas!

    ResponderExcluir
  19. Estou aqui para agradecer a sua explicação, pois consegui colocar a frase em português, ao invés do inglês, não estava encontrando uma explicação que me ajudasse como a sua. Bjkas mil no seu coração. http://crochedamarta.blogspot.com/

    ResponderExcluir
  20. Juliana,
    muito obrigada pela dica! Adorei!
    O meu blog esta ficando lindo, do jeitinho que eu queria e muito graças as suas dicas!
    muito obrigada
    bjs
    thaissa
    http://thacomtudo.blogspot.com/

    ResponderExcluir
  21. Nem acredito, entendi tudinho (a clareza de vocês é incrível!), fiz tudo certinho, a coisa funcionou às maravilhas, mas... ficou um espaço em branco de 3 cm entre o gadget e o pé do post. E o script não dá margem de se mexer nisso...

    ResponderExcluir
  22. Olá !!

    Coloquei o código, mas nada mudou, continua aparecendo na página principal... snif....
    Já fiz mil vezes, mas a encrenca tá lá...afff
    Acho que é algum problema no meu blog, pois não é o primeiro método que uso pra isso e não funciona...
    Um abraço :)

    ResponderExcluir
  23. Muito bom! Funcionou direitinho, mas eu levei alguns minutos pra entender que precisava excluir o widget pra ele parar de aparecer na página inicial do blog haha... Seria bom colocar um aviso "Depois disso tudo, não esqueça de excluir o widget no pé das postagens, em elementos do blog..."

    ResponderExcluir
  24. Obrigada!
    Me escabelei tanto para colocar isso no meu blog....fantástico! O serviço que vc presta a blogueiros é demais!
    PARABÉNS E MUITO SUCESSO PRA VCS!

    ResponderExcluir
  25. ótimo tutorial! Por coincidência eu estava colocando ele antes de ver aqui e quando abri logo vi. Só tenho uma dúvida: Existe uma maneira de remover o link para o linkwithin abaixo da postagem? Analisei o widget.js, porém não encontrei a parte certa! Poderia me ajudar?

    ResponderExcluir
  26. Té que fim eu conseguiiiiiiiiiiiiiiii,muitissimoooooOOO obrigada vc não sabe como estopuo feliz!!!!!

    ResponderExcluir
  27. Oi Juliana,

    A coisa já é antiga, me perdoa um "pitaco" no teu procedimento que, para o leigo, talvez complique, e não ache o código no copiando e colando com o "ctrl+f" no modelo.

    "... Como mudar a frase do gadget
    Para personalizar a frase-padrão do gadget, procure por:
    < div class='post-footer'> ..."

    Veja que tem um espaço depois do sinal "menor que" e depois vem o "div".
    Se a pessoa não se toca de imediato desse detalhe (removendo o espaço), aí vai dizer que não tem o código, hehehe...

    Desculpa se fui chato! E, se não deu problema ainda, depois de tanto tempo, é porque o pessoal todo aqui é bastante esperto e eu é que sou um cri-cri, né? :)

    Parabéns pelo teu trabalho e pelo Facebook do Dicas!!! :))

    Uno

    ResponderExcluir
  28. finalmente o unico blog que deu a informação 100% correta! Valeu! (postagem antigassa mas ainda ajudando)

    ResponderExcluir
  29. Olá excelente postagem!
    Gostaria de saber como colocar estilo; por exemplo alterar o tamanho da imagem, cor de fundo e etc.

    Um abraço.

    ResponderExcluir
  30. Querida, muito obrigada pela ajuda.

    bjos!

    ResponderExcluir
  31. Bom dia!!
    Obrigado pela dica. Ficou ótimo, porém ainda está aparecendo na home do meu blog, poderia auxiliar-me na resolução disso?
    Desde já agradeço

    ResponderExcluir
 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top