Botão de “pin it” nas suas imagens

Loma Sernaiotto

skincare
follow me

Publicitária santista especialista em Estética e Cosmética. Atuo no Global Marketing de uma marca de kbeauty em Seoul. Curiosa, virginiana e muito feliz em ter você aqui.

Receitas
Blogosfera
Wellness
Viagens
O que você procura?

loma sernaiotto

🇧🇷 🇮🇹 🇰🇷

Muitas pessoas me perguntaram como eu fiz para adicionar o botão de “pin it” aqui nas imagens do blog. Se você reparar, esse botão aparece cada vez que você passar o mouse pela imagem – permitindo pinar as imagens que você quiser de cada post.Acontece que é muito mais fácil do que você imagina e eu preparei um mini tutorial para deixar mais fácil ainda:

  1. Instale o plugin JQuery Pin it Button for Images;
  2. Ative o plugin;
  3. No seu painel do wordpress, vá em Configurações >> Jquery Pin it Button for Images;
  4. Você vai ver a seguinte tela:

sernaiotto-pinitbuttons

  • Se você não sabe mexer com css ou códigos, deixe o image selector como está. Mais abaixo, você pode selecionar em quais páginas o botão deve aparecer;
  • Você também deve escolher uma resolução mínima para as imagens que devem exibir o botão. Isso é preciso para determinar que imagens pequenas – como seus botões de redes sociais ou o logo do seu blog – não fiquem com o botão de pin it em cima. Eu insiro a largura de 600, pois é a largura mínima que eu uso nas imagens dos posts.

sernaiotto-pinitbuttons2

  • Na aba visuals você consegue editar a descrição das images que vai para o Pinterest – eu deixo como o título da página ou post;
  • Sempre marco a caixinha do “always link do individual post page” pois assim a imagem vai linkar para os posts e não para a página inicial do blog;
  • No custom pin it button, eu habilito a caixinha de usar imagem customizada e faço o upload de uma imagem criada por mim. A que eu uso tem 85px de largura e de altura.
  • Você consegue personalizar a posição do botão, no meu caso é no topo direito;
  • As margens são o espaço entre o botão e o fim da imagem, sempre uso 20px ou 30px – assim ela não fica grudada nas bordas;
  • Salve as alterações.

Pronto! Esse é o básico sobre o plugin que eu uso. Não esqueça de pinar esse post e seguir meu painel cheio de dicas para blogs lá no Pinterest!Nessa semana eu postei uma calculadora para banners, já viu? Beijas!

julho 31, 2015

comente aqui!

  1. Aline disse:

    Me conta como eu ativo o plugin?Estou amando seu blog <3

  2. Clara Rocha disse:

    Loma, você sempre ajudando a gente! Muito obrigada. Só tenho uma dúvida, segui todo o tutorial e aparentemente está tudo certo na página do Jquery, mas ainda assim não aparece o botão, será que é algum problema do meu layout ?

  3. Patty disse:

    Obrigada pelo tutorial maravilhoso lominha, já incorporei ao meu blog e foi mega fácil <333Beijocas

  4. Gi Santos disse:

    Lominha, não sei o que seria da gente se não fosse você. Sinceramente! Amei seu post e estava mesmo precisando colocar este item no meu bloguinho. Beijos, Gi.

  5. Luana Martins disse:

    Gostaria de aprender, uma pena o tuto ser para wordpress, eu uso o blogger :/

  6. Lominha, retomei meu blog agora, e suas dicas estão me ajudando muito. Obrigada sempre por tudo <3

  7. Cris disse:

    Esse post foi muito útil Loma! 🙂 Posso sugerir um post? rs Você podia fazer um post com lista de todos os plugins possíveis e úteis para blogueiros. Ficaria mais fácil achar todos os principais e bons em um lugar só… Sei que tem alguns em uns posts seus, mas seria legal todos no mesmo posts sabe? Em fim, só uma ideia 🙂 Obrigada por compartilhar esse plugin :DBeijos! =**

  8. Tava louco atrás disso, mas ainda não achei pra blogger. 😳

  9. Karolina disse:

    Lominha, rainha dos mares, e para blogger? ahahahha to caçando isso a meses e vc poderia ajudar né?! <3beeeeeijos

  10. Wanila disse:

    Muito simples e muito útil. Você é uma linda mesmo.

  11. Ana Rodarte disse:

    Lominha, muito, muito obrigada, de verdade! Já instalei por aqui! Ainda não tenho botão customizado, mas já é um passo e tanto!

Deixe seu comentário

vem com

a Lominha:

13 anos de arquivos

blog

sua consultoria de skincare

agende

compartilho meu lifestyle com (cons)ciência na internet mais perto de você ;)

assine a newsletter

emails?