Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

03/02/2012

NOVO: Personalizar o LinkWithin (texto e posição)

Hoje eu ia começar a fazer a série de posts sobre o Facebook, mas decidi deixar para semana que vem pois ontem tive uma verdadeira peregrinação para corrigir uma coisa no meu template... Então, como percebi que pela net não tem nenhum artigo em português sobre o assunto (se tem está muito escondido), resolvi compartilhar com vocês como resolver esse problema.

Quando se trata da organização do meu template, eu tenho que admitir que eu sou chata e muito persistente. Se tem alguma coisa que eu não gosto, que está fora do lugar, que eu queira muito mudar; não descanso até encontrar a solução (sou uma legítima brasileira, não desisto nunca!)
Tudo começou com a Homenagem de "Quinta" de ontem. Vocês devem ter visto que eu pûs um jump break (também conhecido como "leia mais" ou "jump-link") para que os vídeos não ficassem pesando na página inicial. O fato de que o widget "LinkWithin" ficou em cima do "Leia Mais" me irritou profundamente. Sabe, na minha opinião, fica bem mais bonito se ele ficar embaixo do "Leia Mais", se possível eu queria que ele ficasse depois do link de comentários (mas se não desse, tudo bem...)
Eu logo pensei: "Deve ter um tutorial para isso em algum blog famoso..." e fui procurar. Procurei, procurei, procurei... Mas cadê esse bendito código??? Eu só achava como colocar ele nas páginas da postagem, sem ser na página inicial... Ninguém falava sobre como colocá-lo depois do post-footer (ou pelo menos eu não encontrei).
Eu estava quase desistindo, mas quando mudei as palavras-chave no Google, achei finalmente uma página em inglês no Blogger Sentral que resolveu todos os meus problemas (#ALELUIA) e ainda me ajudou com mais um: como mudar as palavras que ficam em cima do LinkWithin, que geralmente é "Poderá também gostar de:", que eu também não gostava, mas que me incomodava bem menos.
Como nem todo mundo entenderia o texto em inglês, vou dar uma de Google Tradutor hoje (eu já dou uma de Wikipedia da blogosfera mesmo, e acabei de receber o título de DSMpedia pela minha amiga Juliana) e fazer mais um tutorial bem explicadinho, desses que vocês gostam tanto...

Mudando o texto que fica em cima do LinkWithin:

Para quem já tem um widget do LinkWithin no seu blog, não precisa retirá-lo (eu não retirei!) Quem não tem, vai colocar agora, só que de outro jeito diferente do usual.
Um aviso: como teremos que mexer no HTML do blog, recomendo que você salve antes uma cópia do seu template ou faça um backup ou treine antes num blog de testes (eu como sou abelhuda, fiz direto, mas não recomendo pois sei que um dia posso me lascar por fazer assim).

1. Entre no site LinkWithin;
2. Coloque seu e-mail e o endereço do blog na caixinha que está à direita do site. Em "Platform", em vez de marcar "Blogger" (que seria o certo para nós) marque "Other". Escolha quantos quadradinhos você quer em "Width" e clique em "Get Widget" (se seu blog for de fundo escuro com letra branca, marque a caixinha "My blog has light text on a dark background", se não for, não marque);

3. Vai aparecer uma página parecida com a que está abaixo. O número que eu estou indicando com uma seta é o ID do seu blog (fica depois de var linkwithin_site_id = , não copie o "ponto e vírgula"!!!) Reserve ele (nossa, agora pareceu receita de bolo), ou seja, copie e cole em algum lugar, pode ser no bloco de notas, por exemplo (ou copie num papel... tanto faz!).


4. Agora entre no Blogger e vá em Modelo > HTML (caixinha branca abaixo da miniatura do seu template);

5. Copie o seguinte código: </body>
6. Clique em qualquer parte do código e aperte Ctrl+F;
7. Na caixinha que abriu (Search), cole o código que você acabou de copiar e aperte "Enter";
8. Copie o código a seguir e cole antes do </body> (que ficou em destaque):

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script> var linkwithin_site_id=SEU_ID; linkwithin_text='SUA_FRASE'; </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="Posts Relacionados"/></a></b:if>

9. Onde está escrito SEU_ID troque pelo número que nós copiamos lá em cima;
10. Onde está escrito SUA_FRASE troque pela frase que você quer que apareça em cima do Widget. Aqui no DSM eu pûs: Gostou do Post? Veja também:, mas você pode colocar o que quiser!
11. Clique em visualizar e veja se a frase está do jeito que você escreveu;
12. Se tudo estiver OK, clique em " Salvar modelo ".

Prontinho, você já mudou a frase do seu Widget!!! Não precisa apagar o que você já colocou em Layout (eu não apaguei).

Colocando o LinkWithin depois do Post Footer:

Agora, se você, como eu, está infeliz com a posição do seu Widget e quer colocá-lo depois do rodapé da postagem (depois do link do leia mais, dos comentários, marcadores, escrito por:, etc.) siga com muita atenção os passos a seguir (você pode seguí-los mesmo se não tiver feito o tutorial acima).
Novamente, um aviso: como teremos que mexer no HTML do blog, recomendo que você salve uma cópia do seu template ou faça um backup ou treine antes num blog de testes.

1.  Entre no Blogger e vá em Modelo > HTML (caixinha branca abaixo da miniatura do seu template);

2.  Copie o seguinte código:  <b:include data='post' name='post'/>
3.  Clique em qualquer parte do HTML e aperte Ctrl+F no seu teclado;
4.  Na caixinha que abriu, cole o código que você acabou de copiar e aperte a tecla "Enter";
5.  Cole o código <div class="linkwithin_div"></div> depois do <b:include data='post' name='post'/>
Vai ficar assim:

<b:include data='post' name='post'/>
 <div class="linkwithin_div"></div>

6. Visualize e veja se a posição do widget mudou;
7. Se tudo estiver OK, clique em " Salvar modelo ".

É só tudo isso!!! Viu como é fácil???
Se algo deu errado, ou você não entendeu algo no tuto, pode deixar um comentário que eu conserto aqui.

Para mudar as cores do LinkWithin, clique aqui.

Mil Sweetkisses,
59 Comentários
Comentários

59 comentários:

  1. AAAH, ameeeei o seu blog tambéeem ! õ/
    PSKAPSKAPSA, obrigada pelo selo ! E já estou te seguindo! Siga-me também !
    http://www.siteshoow.com/
    :) Obrigada por comentar:
    Sobre o post, que legal o tutorial sobre LinkWithin.. PAKSAPSKAP..
    Beijos
    http://www.siteshoow.com/

    ResponderExcluir
  2. Muito obg pelos elogios ni meu blog!
    E tbem pelo selinho! Não sei como te agradecer!
    Beijokas

    >>http://docinho-azul.blogspot.com

    ResponderExcluir
  3. Oi liinda!! Agradeço pelo seu carinho no meu blog, amei o selinho, sabia que vocÊ vai ficar marcada pelo 1° selinho do blog? *u*
    Seu cantinho é lindo tmb, vou seguir viu?
    Se puder, segue de volta :D garotadoolharsincero.blogspot.com
    Bjux

    ResponderExcluir
  4. Sheila, seus tutoriais são ótimos, mas como não sei lidar muito bem com HTML, eu salvo e peço pro meu namorado fazer >.< rs

    Beijos,
    Caroline, do http://criticandoporai.blogspot.com (tem postagem nova, viu?! rs)

    ResponderExcluir
    Respostas
    1. É bem fácil, depois de um tempo você entenderá.
      Márcio Guilherme: http://marciomeucanto.blogspot.com

      Excluir
  5. Super Sheila, essa postagem ficou muito legal principalmente pelo fato q vc sabe né minha preguiça consegue ser maior do que a vontade de ''calibrar o blog'' rsrs suas explicações são tão simples. DSMpédia mais um serviço prestado.

    ResponderExcluir
  6. Oii querida. Muito obrigada pela visita, e pelo selinho. Fiquei muito feliz em te receber no meu blog, então volte sempre.

    Beijos, Mallü.
    http://thelovekingdom.blogspot.com

    ResponderExcluir
  7. Nossa amiga, vc explicando parece fácil!bjns
    http://cadernocolorido.blogspot.com

    ResponderExcluir
  8. Nossa, que honra !
    Adorei o selinho e mais ainda o seu blog.
    Também é muito lindo e agradeço pela preferencia :D
    bjinhos & volte sempre ^.^

    senhoritasx.blogspot.com

    ResponderExcluir
  9. Depois de usar muito, eu dei um tempinho, como pretendo mudar as coisas no meu Blog, quem sabe volte a usar ele... nossa eu estou tão enrolada que chega a me dar um nó na cabeça!! Rsrsrsrs... Beijinhoooos
    http://www.artesdosanjos.com.br/

    ResponderExcluir
  10. Nossaaa... amei o blog meeesmo *-* O design é muito divo *O*' Obrigada pelo selinho linda *-*
    bjos, seguindo..

    cherry-miint.blogspot.com

    ResponderExcluir
  11. oi linda tambem amei seu blog,obrigada pelo selinho sua linda design lindo e oconteudo tb bjokas linda.

    ResponderExcluir
  12. KKKK, pelo jeito você TAMBÉM n gosta que escrevam o nome errado ne? eu odeio quando escrevem meu nome assim: Natalia e.e' haha, bjs

    cherry-miint.blogspot.com

    ResponderExcluir
  13. Liinda, aqui tem um selinho pra vc, simples mais fiz com carinho, bjux garota do olhar sincero
    http://www.loonapix.com/img/tmp/13283089531790444087.jpg

    ResponderExcluir
  14. Lindoo demais .. muitoo fooofof divo
    obg pelo selo minha flor : )
    Já sigo..
    http://ofthecupcake.blogspot.com/

    ResponderExcluir
  15. obriga pelo selinho fofa como disse em ou tro comentario o desing é muito lindo e conteudo tambem.

    os posts interesantes e fofos beijos

    ah ta rolando concurso la no blog e sou sua seguidora seiscentos rsrsrs!

    aperece la de novo vai ser uma honrra !

    www.blogdaguriale.blogspot.com

    ResponderExcluir
  16. Bom fim de semana flor..
    Beeijoos

    Ah post novo -> http://up-grils.blogspot.com/2012/02/mulher-v.html

    ResponderExcluir
  17. Heey, adorei o seu blog! Estou seguindo, segue o meu também?
    http://estanteseletiva.blogspot.com/

    Beijos,
    Wanessa Guimarães
    www.estanteseletiva.blogspot.com

    ResponderExcluir
  18. Olá!
    estava a procura de algumas coisinhas para colocar no meu blog novo e acabei achando voce e utilizando suas dicas e códigos !
    Adorei viu?!....Está arrazando rs
    Beijos querida, fique com Deus.

    Ju.

    ResponderExcluir
  19. Muito legal o seu blog. Eu e a minha esposa sempre passamos poraqui!Deus te abençoe.

    www.drcarlosandrade.blogspot.com
    www.prcarlosandrade.blogspot.com
    www.cidasculinarts.blogspot.com

    ResponderExcluir
  20. Olá Adorei o seu Blog e suas dicas...
    Mais eu nao tinha o LinkWithin e fiz os códigos mais continua sem e não estou conseguindo instalar ele... Como eu faço???

    Bjs Obrigada desde já...

    ResponderExcluir
  21. Olá Professora.
    Como te falei sobre o meu novo espaço, ele já está no ar.Rs...
    Passei uma semana tentando colocar este widget, e não conseguia. E o detalhe era bem simples bastava eu trocar no por yes, em mostrar elementos. Agora que está tudo ok, gostaria de saber como faço para mudar a cor e o tipo da fonte do título "Leia também" por exemplo? O resto tá tudo certinho. Também como errar com suas explicações.
    Bjs. Fica com Deus.
    PS: Quero um selinho seu para colocar no blog. Já estou seguindo vc. Gostaria de tê-la como seguidora do meu blog também. Será uma honra.

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

    ResponderExcluir
  23. Mesmo eu seguindo o Tuto não deu certo, o nome não muda e o meu não aparece assim bonitinhu com a imagem um do lado do outro, só aparece o título de um unico post e sem imagem...
    Mais to tentando dar um jeito...

    Bjuss...

    http://mimiycosmeticos.blogspot.com.br/

    ResponderExcluir
  24. no meu não deu certo em umas postagens aparece as imagens e em outras uma lista com os links mas creio que seja pelo fato de ja ter feito várias modificações no html

    Blog da Pepi

    ResponderExcluir
  25. Oie Sheila!! Já consegui colocar o Link Within, no lugar certo, depois do rodapé do post, mas ele aparece só quando vai comentar... O que aconteceu??

    ResponderExcluir
  26. Muito obrigada pelas orientações.Perfeito!!!
    Eu estava procurando uma forma do LinkWithin aparecer após o post e consegui com suas explicações!!!
    Excelente Blog!!!

    ResponderExcluir
    Respostas
    1. OI!
      Para quem tem plataforma word press como fazer p/ eliminar um post antigo sem que saia novamente no LinkWithin ?
      é que eu decidi apagar o post anterior e coloquei outro,mas no LinkWithin saiu novamente o título do post antigo,como eliminar isto para que saia com o novo tema?

      Excluir
  27. Você salvou a minha vida!!!
    Só uma coisinha que eu queria te perguntar... Tava há um tempão tentando colocar o linkwithin depois na minha assinatura... Só uma perguntinha... Não existe uma forma de ele ficar depois da assinatura, mas ANTES do link dos comentários? Eu preferia dessa forma, mas assim como ficou certamente está melhor que antes! Muito obrigada, viu?

    ResponderExcluir
  28. ai, eu disse que sou da época da pedra, tentei duas vezes e não consegui, mas valeu a dica, vou tentar daqui uns dias de novo, obrigada

    ResponderExcluir
  29. Deu super certo...agradeço muito!
    Beijos!

    ResponderExcluir
  30. Olá, Sheila!

    Seu tutorial ficou bem completo! Eu já havia escrito também sobre o LinkWithin, mas você acrescentou alguns detalhes interessantes em seu artigo, como o posicionamento do gadget.

    Parabéns!

    ResponderExcluir
  31. Olá. Primeiramente parabéns pelo trabalho de fazer esse tutorial e de traduzir do inglês. Está muito bem explicado que eu que não manjo nada fiz tudo certinho. Pelo menos eu acho.
    Quando visualizei meu blog,o LinkWithin não apareceu em lugar nenhum,nem embaixo das posts,nem dos lados,nem no layout,mas houve qualquer alteração pq como fiz beckup,salvei as modificações do HTML e a miniatura foi atualizada,mas não apareceu o LinkWithin.
    Se vc souber o que pode ter havido e puder me dizer,ficarei grata.
    De qualquer modo,agradeço a boa vontade de compartilhar sua sabedoria.
    Bjs.

    ResponderExcluir
  32. Oie Sheila... Eu tinha editado o meu blog e apagou o LinkWithin. Eu fiz ele de novo, mas ficou o mesmo problema: só aparece em cima dos comentários... Tentei fazer de novo mas ficou do mesmo jeito. Como faz para deixá-lo no lugar certo??
    mmencantado.blogspot.com

    ResponderExcluir
  33. Sheila muito obrigada mesmo! Eu sempre quis trocar o texto e agora finalmente consegui ;)

    ResponderExcluir
  34. No meu tbm deu certo...obrigada Joycinha Lioness, pela indicação.

    ResponderExcluir
  35. sua linda, isso foi super util! obrigadissima!

    ResponderExcluir
  36. Sheila depois desse post eu praticamente te amo :)

    Eu estava muito infeliz também com o 'Continue lendo...' aparecendo lá embaixo, depois do LinkWithin, que por sinal é ótimo, mas não tem sentido o leia mais aparecer longe do post... dependendo de como vc corta o mesmo, tem gente que nem vai perceber que ele tinha continuação rs

    E eu também procurei por aí, achei uns códigos complicados ...mas cadê de funcionar? E já, por aqui, bastou um linha e ficou 10!

    Valeu mesmo por compartilhar a informação

    Abraço

    ResponderExcluir
  37. Não sei porque não consigo, só aparece o frase PODERÁ GOSTAR TAMBÉM, quando vo la no site do linkwithin e gero codigo com meu blog não consigo e quando pego de outro blog consigo.. será que é porque tenho poucas postagens?
    Blog>http://rbpesquisafashion.blogspot.com.br/

    ResponderExcluir
  38. isso funciona qundo esta usando um template???é pq tentei fazer isso no meu template e não funcionou Y-Y não mudou nadica de nada,nem o testo nem a posição
    vc pode me ajudar???
    se possivel mande no meu email edusmiguelAP@gmail.com

    ResponderExcluir
  39. Funcionou!! Perfeito
    Muito obrigada!!!

    ResponderExcluir
  40. Olha, muito bom!
    Entrei nesse blog e +3 pra fazer isso.. comecei a ler este primeiro.. antes de tentar já tinha fechado os outros 2 !
    Obrigado ae, parabéns.

    Acho que fiz direito, acredito que o pessoal da turma irá curtir.

    http://portalfisionutri.blogspot.com.br/

    ResponderExcluir
  41. Muito bom. Essa dica ajudou no meu blog e deve ter ajudado muita gente. Parabéns aliás pelo layout do blog que é muito bonito.

    ResponderExcluir
  42. Meu amor, vc me salvou!!! Estou super feliz por finalmente conseguir mudar de lugar o Linkwithin!
    Mas tem como colocá-lo antes do rodapé (palavras chaves, comentários, etc)?
    Obrigada!
    http://bebelvirtuosa.blogspot.com.br/

    ResponderExcluir
  43. Graças a esse post conseguir arrumar o llinkwithin. Ele ficava entrando em atrito com o hack leia mais.

    Muito obrigado .)

    http://maio97.blogspot.com.br

    ResponderExcluir
  44. Muito obrigado pelas dicas. Eu estava tentando colocar isso no meu blog há dias, mas não conseguia de jeito nenhum e a sua ajuda foi fundamental...pegou de primeira ;)

    ResponderExcluir
  45. Muito perigoso. É um widget que carrega propaganda em profusão e trava a página de acesso para nova publicação.

    ResponderExcluir
  46. Me salvou...muito obrigada.
    Já havia procurado que nem louca e só consegui resolver com as suas dicas.

    ResponderExcluir
  47. Muitoooooo obrigada!!! Também estava procurando e não achava em nenhum lugar!

    ResponderExcluir
  48. Otimo, tuto direto e objetivo... Obrigado!!

    http://golbolinhaecia.blogspot.com.br

    ResponderExcluir
  49. Otimo, tuto direto e objetivo... Obrigado!!

    http://golbolinhaecia.blogspot.com.br

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados