10

Tutorial - Colocando Botão Pinterest nas imagens de seu Blog


Eu já expliquei nesta postagem o que é Pinterest e todas as vantagens que a plataforma oferece para quem quer divulgar seu blog e suas imagens legais.

Pois bem, agora a gente precisa aprender como podemos colocar o recurso no blog.
O botão que chamamos de Pin, aparecerá para o usuário sempre que ele passar o mouse por cima da imagem. Ou seja, ele fica invisível até que se passe o mouse. O blogger disponibiliza um botão de Pin nos botões padrões de compartilhamento, mas esse botão que iremos fazer fica bem mais legal. Confira passando o mouse na imagem para ver o resultado.



Pra colocar é muitíssimo simples. Siga o caminho da roça, entrando Designer, Modelos e Editar HTML. Logo procure por:



</body>

Assim que localizar, cole ACIMA dele esse código:

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png";
var bs_pinButtonPos = "center";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'/>
<!-- please do not alter or remove the following code -->
<div id='bs_pinOnHover'><a href="http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html">Pin It button on image hover</a></div>


Não vai ser possível conferir se deu certo em "Visualizar", pois a ferramenta só aparece depois que salvamos as modificações em HTML. No entanto, você não precisa se preocupar. Salve as modificações e em uma janela a parte, abra seu blog. Se a ferramenta já estiver aparecendo nas imagens do seu blog, você pode fechar  a janela onde você modificou o HTML. Se der algum erro, basta voltar na janela e aplicar um CTRL Z e tudo volta ao normal !! O segredo é não fechar a janela onde você muda o HTML enquanto não tiver certeza que está tudo certinho, ok? Espero que tenham gostado e que o Pinterest traga muita coisa boa pra vocês e bastante visitas para seus blogs! Um beijo de queijo!




Obs: Os créditos desse Tutorial vai para o Blog Jonas Firmino.


10 comentários:

  1. Ola! não localizo o body no meu HTML, ele poderia ter outro nome?

    http://blogdopargan.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Amigo, tente colar acima do <body. Provavelmente irá dar certo.

      Excluir
    2. Isso mesmo. No HTML do meu template também só localizei <body, Inseri o código e deu certinho. Aproveitei e mudei a parte do código onde se lê "center" para "topright" de modo que o botão de pin it ficasse no canto superior direito da foto. Também alterei o modelo de botão, informando outra URL na parte do código "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.png". Ao invés de usar essa URL fornecida pelo tutorial aqui eu usei a URL de uma imagem de um botão que tenho no meu álbum no Picasaweb.

      Excluir
  2. Olá,

    Muito obrigada pelas instruções. Eu a segui e consegui instalar o botão!


    Um abraço e tudo de bom pra você

    ResponderExcluir
    Respostas
    1. Marly!! Que bom que deu certo e que o blog te ajudou! Volte sempre!

      Excluir
  3. Valeu pela dica! A única que deu certo depois de tentativas em outros blogs... Abraço!

    ResponderExcluir
  4. Adoreiii! super fácil de fazer!
    Olhei milhões de tutoriais pra consegui colocar :D
    Obrigada!
    http://coracaodealfinetes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Ai que bom que gostou!! Obrigada por visitar o blog e por comentar, Jac! <3

      Excluir
  5. Oi Sabrina! Jurava que tinha um botão desse no meu blog, não aparece de jeito nenhum, fui pesquisar no google e imagina minha surpresa quando vi um tutorial seu? Ainda não testei não, mas como não vi esse botão em blog nenhum, tô começando a achar que o problema é com o navegador. Devo ser a única pessoa no universo que usa o Ópera, então ninguém liga pra ele hahaha

    Beijos!

    ResponderExcluir

Atenção: Caso tenha blog, deixe o endereço do link sempre que comentar. Assim, todos os outros leitores curiosos podem visitar sua página.

------------------------------------------------------------------------------------------------------------
Quando você comenta, me deixa muito feliz! Sua opinião é muito importante.
Tanto que vou até cantar uma canção: Você é lindo (a), mais que demais, você é lindo (a) sim, onda do mar.... (lá, lá, lá, láaaaaaa)

Pin It button on image hover