10 de jan. de 2013

adicione um pin it button no final de TODAS as postagens




Todas nós sabemos como o Pinterest é interessante e pode atrair visitas para os nossos blogs. Lá espalhamos o que nos inspira de uma forma rápida e interessante, respeitando sempre os links originais.
Então, permita a cada post seu que suas leitoras também espalhem o seu trabalho pela web e adicione um botão Pin it do Pinterest no blog com esse passo a passo:


Escolha uma dessas imagens abaixo para adicionar ao final das suas postagens: Salve e carregue num site de hospedagem de imagens como o Photobucket ou Tinypic..






Todos eles já foram fornecidos pelo Pinterest para serem adicionados manualmente no corpo do post, nos levando a incluí-los a cada post, enquanto este tutorial incorpora o Pin it no final de cada postagem automaticamente, próximo aos comentários e botões de compartilhamento. O primeiro é o mais recente oferecido pelo Pinterest.

Importante: Todos eles têm fundo branco e caso a área do final das suas postagens esteja com outra cor de plano de fundo, o branco vai aparecer! Se o fundo branco for um problema, recorte o fundo branco em um editor de imagens ou você também pode personalizar o seu como esse que fiz no PicMonkey pra mim há algum tempo.




Vamos ao HTML!
Em primeiro lugar, salve o modelo do seu blog.
*Não salvou? Recomendo que você salve agora para evitar problemas.

No Painel do seu Blogger, selecione 'Modelo'.



Clique em Editar HTML.



Na janela que abrir, selecione 'Editar Modelo' e fazendo o atalho CTRL+F abrirá uma caixa de pesquisa no canto superior direito da página.



Copie e cole este código abaixo no campo de pesquisa aberto:


<div class='post-footer'>


Copie esse código abaixo e cole imediamente após o código acima encontrado.


<div style="float: right; margin: 4px;"><a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());"><img alt="Pin It" class="aligncenter" src="URL DA IMAGEM" /></a></div>


1. Substitua a mensagem em vermelho 'url da imagem' pelo url da imagem escolhida do seu Pin it Button. O url da imagem é o Direct Link oferecido pelo Photobucket ou TinyPic.



2. Note que com a palavra em azul right, o código ficará posicionado à direita no corpo de comentários e compartilhamento no final das suas postagens. Caso você queira em outra posição, substitua a palavra right por:

center, caso queira o botão centro ou;
left, caso o queira do lado esquerdo.


Não salve ainda a alteração feita no seu Modelo, clique em Visualizar e uma nova página será aberta. Certifique-se de que o Pin it button está lá e em ordem. Caso esteja satisfeita, clique em Salvar. Se não, você pode fechar sem salvar as alterações e o seu modelo permanecerá como estava e você pode recomeçar ou testar com uma outra imagem, por exemplo.


Caso tenha dúvidas, deixe seu comentário abaixo ou escreva para costuramor@gmail.com.
Tutorial original (em inglês): Julie Ann Art.





17 comentários :

  1. Belas informações!! Tenho uma dificuldade imensa de de mexer nesses programas e você foi bem didática nas explicações...Parabéns pelo blog, já estou te seguindo. Abraços. Sandra

    ResponderExcluir
  2. Oi Priscila!

    Ótima explicação e já quero também!
    Para fazer com calma, mexe em 'zona de perigo' para mim = html
    rs
    Eu nunca salvei o blog :(
    Já li sobre isso, e nunca fiz.
    Preciso ver correndo como é.
    Vou ver isso antes e depois ver o seu passo a passo show!
    O botão vermelhinho vai até combinar rs
    bjs

    Ah, o feltro eu vou continuar tentando.
    Eu chego lá.
    Tem o seu vídeo e o link que eu achei...agora é praticar!

    ResponderExcluir
  3. digo e repito - amo o blog lindo!
    beijo,

    ResponderExcluir
  4. eu acho tao lindinho essas coisas q vc ensina.. pena q nunca consegui me habituar ao blogspot.. :(((

    beeijos bonitona!!

    ResponderExcluir
  5. Olá Pri,Adoro suas dicas flor!Ah,vou adicionar no meu blog!!!
    Pri,o ateliê é para trabalhar fazendo os meus artesanatos como também estará aberto a visitações,pois nele vou expor peças também =)
    Estou super feliz pelo o seu cantinho,é muito bom!!!Ficamos mais inspiradas!!
    XerOOo flor

    ResponderExcluir
  6. Oi Priscila!
    Vim te avisar que amanhã você está na estreia no resumo da semana.
    No primeiro do ano!
    :)
    bjs

    ResponderExcluir
  7. Você é um gênio Pri, e tem um coração de ouro.

    Com o coração na mão eu segui o seu PAP, e funcionou!!!!!

    Agora o que eu faço com a cópia do meu blog q eu fiz e coloquei na desktop?!?!?

    ResponderExcluir
    Respostas
    1. Obrigada, Regina!
      Fico imensamente feliz por ter atendido ao seu pedido neste post e que ele tenha dado certo! Iuuupi!
      Quanto à cópia, era caso não tivesse dado certo.
      Se você gostou do button como ele está (eu vi, ficou bonitinho!), faça mais um download e mantenha ele guardado por segurança.
      Eu mantenho os meus no Cloud, no SkyDrive que é o Cloud que oferece mais espaço de graça na web: 25GB. Por uma conta do Hotmail.
      Já dei um Pin it no seu liiiiiindo post do brigadeiro!
      Beijos, Regina!

      Excluir
  8. Olá vi seu blog no M de Maria ...
    adorei seu cantinho e ja estou seguindoooo...
    te convido para conhecer o meu..
    boa semana
    bjaooo

    ResponderExcluir
  9. Passando para desejar uma semana de muitas criações flor!
    XerOOo

    ResponderExcluir
  10. Pri,
    além de super útil você é muito prestativa ao compartilhar essas super dicas!

    Que a sua semana seja bem feliz!

    Abraços,
    Carol
    www.umblogsimples.com

    ResponderExcluir

  11. Adorei essa dica.Obrigada por compartilar.Vou ver se consigo fazer no meu blog.
    Malú.

    ResponderExcluir
  12. Adorei, foi o único lugar onde eu consegui a informação certa, obg!

    ResponderExcluir
  13. Olá, cheguei aqui a propósito deste tema e acabei de colocar o meu botão pin. Obrigada, está muito bem explicado! Voltarei aqui mais vezes. Comecei a seguir através do bloglovin ;).
    Bjs

    ResponderExcluir
  14. Feito! Antes eu tinha este botão, mas com a atualização do blog, ele foi embora... Agora sim! Tá lá de novo.
    Beijão!

    ResponderExcluir
  15. Oiiiiiiiiiiii!
    Acabei de voar lá na Maria e caí aqui!
    Adorei a explicação. Tentarei aplicar à caverna.
    Abração e ótima semana.

    ResponderExcluir

Obrigada por costurar seu comentário aqui no bloguinho! ♥
Perguntas são respondidas no seu blog.