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.