Botão do Pinterest sobre as imagens do blog

em 25 de abril de 2013

Hoje a dica é simples, rápida e muito útil para quem ama usar o Pinterest.
Se você ainda não conhece ou não sabe usar recomendo que leia:
Você vai se divertir!

Mas mesmo que você ainda não tenha um Pinterest pra chamar de seu alguns de seus leitores podem ter e esse recurso que vou ensinar pode ajudar na divulgação de seu blog pois ao pinar uma imagem sua o leitor envia junto com a imagem o link exato de seu post, e com isso você tem 2 ganhos principais:
  1. Um link externo: isso é mega importante pois quanto mais links externos seu blog tiver mais chances de ser melhor indexado pelos mecanismos de pesquisa (Google em especial) ele tem. E blog bem indexado é o que todo blogueiro sonha...
  2. Mais um canal de divulgação fácil de usar e simples de oferecer aos seus visitantes. Lembre sempre: quanto mais amigável seu blog for mais agradável será acessá-lo. Botões que podem ser usados em 1 clique ajudam muito!

Agora que já falei sobre o botão vamos implementa-lo em seu blog.
Acesse o painel do blog e clique na aba Modelo. A seguir selecione Editar HTML.
Localize esta tag de fechamento:

</head>

Você localiza a tag em questão assim: pare o mouse dentro da caixa de código. Teche Ctrl+F e na caixa de busca que abrir digite o termo procurado. Dê Enter. Prontinho, a pesquisa interna localiza a tag pra você!

Abaixo dela cole isso:


Copiar o código


No local indicado (AQUI O ENDEREÇO DE SEU ÍCONE) coloque o endereço do ícone que deseja usar. Ao final do artigo há imagens para você escolher.

Onde está escrito "topright' define a posição do ícone sobre a imagem.
No código o ícone do Pinterest está alinhado à direita, lado superior da imagem. Você pode mudar a posição dele trocando "topright" por:
"topleft" - Lado esquerdo na parte superior da imagem;
"bottomleft" - Lado esquerdo na parte inferior da imagem;
"bottomright" - Lado direito na parte inferior da imagem;
"center" - ícone no centro da imagem;

Não altere mais nada, não esqueça nem apague as aspas.
Salve as modificações.

Agora faça o teste: pare o mouse sobre qualquer imagem de seu blog e veja se o ícone aparece certinho.
Caso não goste ou tenha dado errado basta voltar ao código fonte de seu blog, localizar o código do botão e apaga-lo.

Abaixo deixo de presente algumas imagens com o ícone do Pinterest pra você. Clique sobre a que desejar salvar e ela abrirá em nova página; daí então salve-as em seu computador e use aquela que desejar para personalizar ainda mais o botão que inseriu.









*Como hospedar uma imagem usando o próprio Blogger?

Faça assim:
Crie uma postagem 'falsa', que nunca será publicada, ficando sempre no rascunho.
Insira nela a imagem que deseja hospedar. Depois de concluir o upload da imagem clique sobre ela e com o botão direito do mouse copie o endereço, url ou link da imagem (o nome dependerá de qual navegador esteja usando); este é o endereço web de sua imagem.
Para saber o tamanho exato da imagem  abra a pasta onde a salvou, pare o mouse sobre ela e o tamanho aparecerá.

Alguém que escreve. Especialista em si mesma. Leitora que lê muito menos do que gostaria. Blogueira por paixão e profissão. Propriedade da Princesa e da Menininha, e de um cachorrinho muito levado chamado Bloguinho. Tentando viver. Sempre.

64 comentários , comente também!

  1. Adorei demais essa dica !
    Mais confesso, depois da mudança no html tô com uma medão, me dá uma coisa ruim quando vejo o editar html. Afê!
    isso é coisa pra profissional rsrs
    Nesse caso, you !

    Mais conta lá no face ... Como você está ? ainda dengosa ?
    Bjins

    ResponderExcluir
    Respostas
    1. Oi Lu, se não gostar gostar ou se der errado, é só ir de novo no html do blog e dar um Ctrl+z que volta ao normal, salva e pronto

      Excluir
  2. Adorei, estou amando tudo que tem colocado aqui, na verdade não entendo nada, mas vc ensina de uma forma tão natural que eu estou conseguindo fazer tudo sozinha... estou feliz...rs.

    Beijinhos e obrigada.

    ResponderExcluir
  3. Oi Elaine.devo te dizer muito obrigado gigante tuas dicas são de ouro.Agora quero mais tempo para poder fazer todo como você ensina.Eu vou tentando.
    Deus te abençoe grandemente.
    Beijos

    ResponderExcluir
  4. Olá querida,
    Muito obrigada por compartilhar :)
    Acabei de colocar no meu bloguinho:)
    Fica com Deus,xerOoo

    ResponderExcluir
  5. Oi Elaine, é a Vi, aqui quem tem pinterest é Pepa, mas gosto das informações que você passa, sempre tem alguma coisa que interessa, tenho que ver o seu tutorial par instalar skype, assim fica mais fácil falar com as amigas, pois essas empresas de telefonia móvel fazem a gente de palhaço.
    Beijos.Vi

    ResponderExcluir
  6. Adorei, até criei uma conta lá, devagar vou aprendendo , mas acho que esse ja tenho em meu blog, quando você fez colocou..
    Beijos obrigada por nos ajudar sempre....

    ResponderExcluir
  7. Adorei, até criei uma conta lá, mas acho que esse botão já tenho em meu blog, quando você fez já colocou.Obrigada por compartilhar conosco suas dicas...
    Beijos.Fátima

    ResponderExcluir
  8. Já Pintei sua matéria de hoje, aliás te leio ha muito tempo e o meu Pinterest está cheinho de você. Criei minha conta lá por sua causa.Se não me engano vi no seu blog um passo a passo e deixei pra concluir depois, tarde de mais, a postagem, babau,sumiu,eu que sou uma velhinha esperta, fucei, fucei e fiz o meu!!!Virei dependente, A D O R O!
    Obrigada por seu blog,rio,choro, me emociono, mas nunca, nunca fico indiferente.Parabéns,vc é uma guerreira, torço demais por vocês
    Um abraço.

    ResponderExcluir
  9. troquei meu template e perdi o código. Levei um botão fofo e instalei novamente. Obrigada! - ,bjus!

    ResponderExcluir
  10. obrigado pelas dicas, eu ainda não tenho, mas quero fazer um .
    bom fim de semana

    baci

    ResponderExcluir
  11. Otima dica ! Muito obrigada.
    xoxo
    http://bonitiful.com

    ResponderExcluir
  12. Que ótima dica Elaine , esses dias minha cunhada mostrou o Pinterest dela e achei sensacional , com certeza vou fazer um tb e vou correr aki pra colocar o meu vinculado certinho ao meu blog , vc salva agente sabia ? :-D

    Eu abri meu blog , é sobre unhas , esmaltes , gostaria de convidá-la para visitar , tem pouca coisa ainda pois coloquei ele On apenas ontem e não quis começar com 20 posts de uma só vez , mas já tenho bastante coisa pronta e vou aos poucos postando. Adoraria receber sua visita.

    O endereço é www.unhasclassicasemodernas.blogspot.com.br

    Grande beijo!!!

    ResponderExcluir
  13. Eliane, que lindo, amei! Consegui instalar o botão.
    Muito obrigada por partilhar teus conhecimento.
    Bjs. Frida Lucia

    ResponderExcluir
  14. Amei, amei...
    Deu quase certo.. rsrsrs
    Não sei porque, mas o botão não aparece... fica aquela imagem quando não carrega sabe?
    Sei lá...
    Mas valeu pela dica!

    ResponderExcluir
  15. Ah.. deu certo... kkkkkkkk
    li o artigo de novo e vi suas recomendações para de como hospedar um imagem no blog...
    E deu certo!!! Eba
    Valeu gatinha! e Sucesso!

    ResponderExcluir
  16. Olá!
    Sempre que tenho dúvidas venho consultar seu blog.
    Não conseguia de forma alguma colocar o botão PIN e com sua ajuda, consegui!
    Muuuuuuuuuuuuuuuuuuuuuito obrigada pelo tutorial.
    Abração esmagador e lindo dia.

    ResponderExcluir
  17. Oiiiiiii!
    Então... o botão aparece lindo e maravilhoso em todas as imagens, mas não redireciona pra página do pinterest.
    Quando clico nele, vai pra uma outra página do blog e diz que não existe.

    O botão aparece, mas redireciona errado.
    Posso fazer algo pra consertar?

    Abração.

    ResponderExcluir
    Respostas
    1. Hum, não sei o que pode ter havido...
      Tem certeza que seguiu todos os passos?
      Também pode ser que esteja havendo algum conflito com algum script já instalado em seu blog.
      Faça o teste em um blog de testes "virgem" assim saberá se é erro na instalação ou conflito de scripts...
      beijos, bom dia

      Excluir
    2. Obrigada, minha querida!
      Tentei de outras formas também (tem alguns tutoriais que dizem pra colocar logo acima do BODY, mas tb não funciona). Dos 2 jeitos aparece o botão bonitinho, mas ao clicar, é redirecionado pra uma página do próprio blog, dizendo que não existe.
      Visitei algumas que comentaram aqui e o que pude perceber é que a maioria tem o blog com layout de apenas 1 lateral e o meu tem 2 laterais.
      Não costumo fazer alterações no html, só colocar gadgets mesmo...
      De qquer forma, muuuuuuuuuuuuuuuuuuuito obrigada por sua atenção.
      Abração esmagador e lindo dia.

      Excluir
  18. Elaine, tudo bem?

    Estava tudo certo, até aparecer essa mensagem aqui: "Mais do que um widget foi encontrado com id: HTML6. IDs widget deve ser único" - ai no socorro imediato para entender melhor esse código, FUI NO GOOGLE mas não consegui. ARRASADA MODE ON. =(

    Help?

    Obrigada e parabéns pelo blog! Vira e mexe estou aqui!

    http://thaiscavalcantemodaebeleza.blogspot.com.br/

    ResponderExcluir
  19. Oie! Tentei colocar o botão, mas não consegui... inseri o código, salvei, e nada! Aí, quando voltei no "editar HTML" não tinha mais o código! Não entendi nd rsrs Será q não salvou? Tem alguma outra forma de fazer isso?
    To amando seu blog!
    Bjss

    http://todomundogostadebrincar.blogspot.com.br

    ResponderExcluir
  20. Você é fantástica! mil vezes Obrigada :)

    ResponderExcluir
  21. Elaine, voce é show mesmo... nem sei porque gasto bites procurando o que preciso em outros lugares....ja tinha visto esse botão em outros blog e amei.... boba eu né. ainda fui pesquisar no google sobre isso.... é só vir aqui direto cabeção..,... kkkkkkkkkkkkkk brigada mais uma vez querida,

    Beijão

    Blog da Gullo

    ResponderExcluir
  22. Foi ótima esta dica. Deu certinho no blog. Muito obrigada
    Zélia Dantas

    ResponderExcluir
  23. Querida, muito obrigado viu! copiei uma das tuas imagens pins e hospedei no meu blog, é um problema pra vc?.. quero te agradecer muito vc é uma pessoa maravilhosa! bjs Gi

    ResponderExcluir
  24. Olá querida. Obrigada pela generosidade em partilhar o que sabe. O botão apareceu e redireciona pra página do pinterest, mas não fica fixo. Ele só aparece quando passo o mouse no canto das imagens. Tem possibilidade de ele ficar fixo na imagem? Bjs

    ResponderExcluir
    Respostas
    1. Adriana, não há como o botão ficar fixo na imagem. Aliás isso deixaria a imagem estranha, eu acho...
      bjssss

      Excluir
  25. Adorei o tutorial e já conclui a inclusão no meu blog. Recomendei no Google+
    bjs

    ResponderExcluir
  26. Oi! a minha imagem do pin aparece quebrada. como eu coloco um daqueles botões fofos no lugar?

    ResponderExcluir
  27. Adorei esta dica Elaine, top top como sempre.
    Obrigada

    ResponderExcluir
  28. Oi Elaine! Que demais! Adorei e já apliquei no meu blog.
    Em nenhum outro tinha conseguido, mas vc ensinou tão direitinho que deu super certo.
    Obrigadíssima.
    Maria Carolina.
    pequemimos.blogspot.com.br

    ResponderExcluir
  29. Tentei e recebo essa mensagem quando vou tentar salvar" div should not appear inside of head poderia me dizer onde estou errando ?

    ResponderExcluir
  30. Voltei pra dizer que consegui , já tem um bom tempo q estava querendo colocar o botão nas fts , recebo inúmeras visitas do pinterest , e isso facilita a pingem Grata pela dica

    ResponderExcluir
  31. Oi Elaine, td bom?
    Te achei no Google procurando exatamente este tutorial.
    Adorei o seu blog, tem ótimas dicas.
    Infelizmente não conseguir colocar o botão.
    Não sei se é porque meu blog foi personalizado ou se é porque uso Mac e não Windows.
    Vc tem alguma dica pra me ajudar? Ou poderia tentar colocar pra mim?
    Obrigada antecipadamente.
    Abraços
    Naiara

    ResponderExcluir
    Respostas
    1. Naiara, eu nunca tentei ver usando Mac, então não sei dizer. Se você vê em algum blog mesmo usando Mac então deveria aparecer no seu blog também.
      O fato do template ser personalizo em geral não influi, a menos que tenha algum script que cause conflito.
      Releia o tutorial, e veja se não esqueceu nada.
      Caso realmente não consiga escreva pra mim usando o formulário de contato do blog, a gente combina o pagamento e eu faço pra você.
      beijossss

      Excluir
  32. Obrigada pela dica, resultou e gostei muito :)

    http://cantinhodesouvenirs.blogspot.pt/
    bjs

    ResponderExcluir
  33. Fiz e deu certo!Obrigada, Elaine!!!!
    Dá uma olhadinha, quando puder: http://promeuaconchego.blogspot.com.br/ e http://brechozindanil.blogspot.com.br

    Beijosssss

    ResponderExcluir
  34. Olá Elaine.
    Acabei de fazer no meu blog e adorei. Muito obrigado pela explicação.
    beijinhos grandes.

    ResponderExcluir
  35. Olá!
    Foi muito útil essas suas informações.
    Obrigada.

    ResponderExcluir
  36. Ok ok, valeu deu certinho obrigada estou amando....

    ResponderExcluir
  37. Muito Obrigada!

    Deu certo!!!

    Beijus

    Lari
    http://coisasdacasaedavida.blogspot.com.br/

    ResponderExcluir
  38. Olá flor...
    amei a dica.. já estou usando... e ficou lindo!!!!
    obrigado!!!
    beijos beijos

    ResponderExcluir
  39. Adorei e usei! :*
    http://modinhamodao.blogspot.com.br/

    ResponderExcluir
  40. Oi Elaine, muito obrigado por essa dica, fiz e deu certinho. www.casacomamorearte.blogspot.com

    ResponderExcluir
  41. Ótima dica!!
    Super certo.

    www.miinteressa.com

    ResponderExcluir
  42. Olá, Eliane!
    Existe algum código para o ícone não aparecer em algumas imagens específicas do blog como a foto do autor?

    Abraços

    ResponderExcluir
  43. Desculpa Elaine, mas eu não sei oq eu fiz de errado, não deu pra fazer no meu de jeito nenhum :(
    Fica de dizendo no html "div não deve aparecer dentro da cabeça Ocultar notificação", eu não entende T-T
    Me ajuda!

    ResponderExcluir
  44. OLá; Fiz tudo certinho. Colei o codigo abaixo do head, mas o blogger da a mensagem que não dá para colocar no cabeçalho e não salva de jeito nenhum. Já fiz tudo certinho.

    ResponderExcluir
    Respostas
    1. Daniela, Lúcia e Jullie:
      Vocês estão colocando o código no lugar errado.
      Releia o tutorial, você verá que falta algo no head que você está procurando.
      Tem que ser o head de fechamento e não de abertura...
      Assim: < / head > e não < head >

      Excluir
  45. Gente! Não funciona no meu blog. Estou fazendo tudo certo, porém não acontece nada. Eu até hospedei no Tinypic o icon do "Pint it" e mesmo assim nada. O que será que eu fiz de errado? Tem que vincular o blog com o Pinterest? Não sei o que está acontecendo. Faz umas horas que estou fazendo e refazendo. Alguém pode ajudar? Obrigada, Barbara.

    ResponderExcluir
  46. Olá, Elaine. Minha dúvida é outra: Eu instalei o botão usando outro tutorial e ficou legal, porém, ele fica aparecendo em imagens onde eu gostaria de ocultá-lo, como por exemplo na imagem do link "Leia Mais", e fica muito estranho e inviabiliza o uso do link, pois o botão cobra praticamente toda a imagem. Minha pergunta: Há como ocultar o botão em determinadas imagens do blog? Muito obrigada!

    ResponderExcluir
    Respostas
    1. Infelizmente não tem jeito, até onde testei.
      Uma vez aplicado o botão ele aparecerá em toda imagem da área do post...

      Excluir
  47. Oi Eliane adorei sua dica e implantei em meu blog . Só que o simbolo do Pint entrou . Mas depois aparece a pagina que vc esta procurando não existe. Porque será eu tenho Pinterest ?
    Sera que vc pode me ajudar?
    Gratidão desde ja

    ResponderExcluir
  48. Não foi possível carregar a visualização do modelo: div should not appear inside of head

    ResponderExcluir
  49. No meu caso gostava de retirar o P dos pinterest sobre as imagens do meu blog (já vinha com o template), alguma sugestão como eliminar? Obrigada.:)

    ResponderExcluir
    Respostas
    1. Ellie, não tenho pois cada template varia em relação aos códigos, especialmente os baixados da net.
      Mas em geral esse código é colocado antes de
      Experimente procurar, deve se assemelhar ao código que mostrei acima...

      Excluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…