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:
- 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...
- 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:
</body>
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ê!
Acima dela cole isso:
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á.
Adorei demais essa dica !
ResponderExcluirMais 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
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
ExcluirAdorei, 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.
ResponderExcluirBeijinhos e obrigada.
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.
ResponderExcluirDeus te abençoe grandemente.
Beijos
Obrigada pela dica!
ResponderExcluirBjoks
Olá querida,
ResponderExcluirMuito obrigada por compartilhar :)
Acabei de colocar no meu bloguinho:)
Fica com Deus,xerOoo
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.
ResponderExcluirBeijos.Vi
Adorei, até criei uma conta lá, devagar vou aprendendo , mas acho que esse ja tenho em meu blog, quando você fez colocou..
ResponderExcluirBeijos obrigada por nos ajudar sempre....
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...
ResponderExcluirBeijos.Fátima
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!
ResponderExcluirObrigada 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.
troquei meu template e perdi o código. Levei um botão fofo e instalei novamente. Obrigada! - ,bjus!
ResponderExcluirobrigado pelas dicas, eu ainda não tenho, mas quero fazer um .
ResponderExcluirbom fim de semana
baci
Otima dica ! Muito obrigada.
ResponderExcluirxoxo
http://bonitiful.com
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
ResponderExcluirEu 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!!!
Eliane, que lindo, amei! Consegui instalar o botão.
ResponderExcluirMuito obrigada por partilhar teus conhecimento.
Bjs. Frida Lucia
Amei, amei...
ResponderExcluirDeu 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!
Ah.. deu certo... kkkkkkkk
ResponderExcluirli 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!
Olá!
ResponderExcluirSempre 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.
Oiiiiiii!
ResponderExcluirEntã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.
Hum, não sei o que pode ter havido...
ExcluirTem 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
Obrigada, minha querida!
ExcluirTentei 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.
Obrigada pela dica! Adorei!
ResponderExcluirElaine, tudo bem?
ResponderExcluirEstava 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/
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?
ResponderExcluirTo amando seu blog!
Bjss
http://todomundogostadebrincar.blogspot.com.br
Consegui, muito obrigada! Bjs
ResponderExcluirVocê é fantástica! mil vezes Obrigada :)
ResponderExcluirDeu certinho no blog!
ResponderExcluirMuito obrigada!
beijos!
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,
ResponderExcluirBeijão
Blog da Gullo
Foi ótima esta dica. Deu certinho no blog. Muito obrigada
ResponderExcluirZélia Dantas
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
ResponderExcluirOlá 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
ResponderExcluirAdriana, não há como o botão ficar fixo na imagem. Aliás isso deixaria a imagem estranha, eu acho...
Excluirbjssss
Adorei o tutorial e já conclui a inclusão no meu blog. Recomendei no Google+
ResponderExcluirbjs
Oi! a minha imagem do pin aparece quebrada. como eu coloco um daqueles botões fofos no lugar?
ResponderExcluirAdorei esta dica Elaine, top top como sempre.
ResponderExcluirObrigada
Oi Elaine! Que demais! Adorei e já apliquei no meu blog.
ResponderExcluirEm nenhum outro tinha conseguido, mas vc ensinou tão direitinho que deu super certo.
Obrigadíssima.
Maria Carolina.
pequemimos.blogspot.com.br
Tentei e recebo essa mensagem quando vou tentar salvar" div should not appear inside of head poderia me dizer onde estou errando ?
ResponderExcluirVoltei 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
ResponderExcluirOi Elaine, td bom?
ResponderExcluirTe 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
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.
ExcluirO 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
Obrigada pela dica, resultou e gostei muito :)
ResponderExcluirhttp://cantinhodesouvenirs.blogspot.pt/
bjs
Fiz e deu certo!Obrigada, Elaine!!!!
ResponderExcluirDá uma olhadinha, quando puder: http://promeuaconchego.blogspot.com.br/ e http://brechozindanil.blogspot.com.br
Beijosssss
Olá Elaine.
ResponderExcluirAcabei de fazer no meu blog e adorei. Muito obrigado pela explicação.
beijinhos grandes.
Olá!
ResponderExcluirFoi muito útil essas suas informações.
Obrigada.
Ok ok, valeu deu certinho obrigada estou amando....
ResponderExcluirMuito Obrigada!
ResponderExcluirDeu certo!!!
Beijus
Lari
http://coisasdacasaedavida.blogspot.com.br/
Olá flor...
ResponderExcluiramei a dica.. já estou usando... e ficou lindo!!!!
obrigado!!!
beijos beijos
Adorei e usei! :*
ResponderExcluirhttp://modinhamodao.blogspot.com.br/
Oi Elaine, muito obrigado por essa dica, fiz e deu certinho. www.casacomamorearte.blogspot.com
ResponderExcluirÓtima dica!!
ResponderExcluirSuper certo.
www.miinteressa.com
Olá, Eliane!
ResponderExcluirExiste algum código para o ícone não aparecer em algumas imagens específicas do blog como a foto do autor?
Abraços
Desculpa Elaine, mas eu não sei oq eu fiz de errado, não deu pra fazer no meu de jeito nenhum :(
ResponderExcluirFica de dizendo no html "div não deve aparecer dentro da cabeça Ocultar notificação", eu não entende T-T
Me ajuda!
No meu também :(
ExcluirNo meu também
ExcluirOLá; 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.
ResponderExcluirDaniela, Lúcia e Jullie:
ExcluirVocê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 >
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.
ResponderExcluirOlá, 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!
ResponderExcluirInfelizmente não tem jeito, até onde testei.
ExcluirUma vez aplicado o botão ele aparecerá em toda imagem da área do post...
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 ?
ResponderExcluirSera que vc pode me ajudar?
Gratidão desde ja
Não consigo encontrar a tag "head"
ResponderExcluirNão foi possível carregar a visualização do modelo: div should not appear inside of head
ResponderExcluirNo 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.:)
ResponderExcluirEllie, não tenho pois cada template varia em relação aos códigos, especialmente os baixados da net.
ExcluirMas em geral esse código é colocado antes de
Experimente procurar, deve se assemelhar ao código que mostrei acima...
Oi Eliane,
ResponderExcluirBaixei um template onde o botão do pinterest não funciona (a letra "p" aparece na imagem, mas não direciona para o pinterest). Como faço para remover?
Infelizmente não sei dizer pois templates baixados da internet em geral possuem código-fonte muito peculiar e modificado...
ExcluirEliane esse link do codigo, é o link da imagem ou o link do meu Pinterest?
ResponderExcluirDenise, é o link da imagem do botão que você escolher usar :)
ExcluirNo meu não deu certo :(
ResponderExcluirNão aparece o botão mesmo hospedando a imagem no blog.
ResponderExcluirDeu tudo blz, mas não aparece o "pinar" para todas as imagens somente as dos posts... É isso msm ou ainda posso colocar para todas as imagens do blogger
ResponderExcluirEduardo, só funciona sobre as imagens dos post e assinatura quando houver e estiver inserida acima da data: body
ExcluirElaine eu não consegui implementar esse botões nas fotos preciso muito pode me ajudar ?
ResponderExcluirO meu não deu certo. O código é acima ou abaixo do ? Queria tanto o botão do Pin...
ResponderExcluirVidas em Preto e Branco
E acima. Tem certeza que não esqueceu nada? e o mesmo script que eu uso :)
ExcluirOi Elaine!
ResponderExcluirEm primeiro lugar, muito obrigada pela dica! Eu tentei colocar o botao no meu blog e funcionou perfeitamente para as fotos dos posts, porem, minha home ficou comprometida e tive que tirar o codigo. Minha home possui minuaturas que guiam os usuarios para os respectivos posts, mas o botao de pint it nao deveria ficar sobre essas imagens, ainda mais que acabaram por cobrir todas as miniaturas... Existe alguma solucao para isso?
Obrigada desde ja pelo seu tempo!
ps: desculpe a falta de acentos
Marilia, o botão será aplicado a todas as imagens da área dos posts, sem distinção.
ExcluirInfelizmente não há como selecionar onde ele será ou não exibido...
Qual seu blog?
Ei Elaine, muito obrigada por esse tutorial! Eu coloquei em prática no meu blog e deu super certo! <3 Fiz até um post apresentando as mudanças no meu layout e cite o seu tutorial. (aqui o post: http://www.tamaravilhosamente.com/2017/11/mudancas-bem-vindas.html )
ResponderExcluirObrigada mesmo pela sua ajuda! Beijos!
Tamara
Elaine, no meu não deu certo, a imagem não apareceu. E eu hospedei a imagem como vc falou. Me ajude, por favor
ResponderExcluirLuana, não sei o motivo de não dar certo, é o mesmo tutorial que uso aqui no blog.
ExcluirTem certeza que não deixou escapar nada?
Repita, tente em um template não modificado, de testes...
Eu tenho dois blogs de teste. Testei nos dois e também não deu certo. Em um momento do tutorial você fala sobre o tamanho da imagem, eu não alterei o tamanho porque não entendi como fazer rsrs. Será que é por isso?
ExcluirNão, creio que não.
ExcluirPode haver algo em seus blogs causando conflito... algum script que use a biblioteca JQuery, por exemplo...
Testei de novo agora em um template Viagem nativo e deu tudo certo...
Criei outro blog para teste e tentei de novo, deu certo. Então é algo com meu blog mesmo :((
ExcluirImaginei...
ExcluirMas olha, em breve vou publicar uma série que ensina como personalizar um template do zero, e ao final da série vou disponibilizar uma base pra edição e talvez uns 2 modelos free.
E também tenho outra série quase pronta que vai ensinar como tornar responsivo um template nativo do Blogger.
Talvez aí vc troque de template e tudo se resolve...
Ah que legal! Vou aguardar pelas séries. Obrigada mais uma vez pela ajuda :)
ExcluirOi Elaine, obrigada pela dica.
ResponderExcluirMas eu não entendi direito a parte do (Aqui o endereço do seu ícone). Que ícone é esse? É o Pinterest? No caso eu tenho que colocar o endereço do Pinterest?
Scarlet, não, me refiro ao endereço do ícone que for usar, um dos que disponibilizei, por exemplo...
ExcluirOi Elaine, deu tudo certinho. Fiz antes no blog de testes, mas tenho uma dúvida: não lembro, faz tempo não sei se quando criei um perfil ou se usei o Desenvolvedor, mas o meu botão aparece no lado superior esquerdo. É pequeno e por isso queria tirar. Agora ficaram 2 botões. Grata se puder dar uma ajuda. Devo ir ao Desenvolvedor?
ResponderExcluirOi Elaine, antes eu usava o seu modelo Allegra que o botão aparece certinho, tudo ok. Fui no HTML tentar copiar e vi que é uma escrita diferente desta que ensina. Consegui identificar pequenas partes semelhantes, mas como você conhece HTML, pode ir criando novos modo de chegar ao mesmo resultado. Bem, não consegui fazer como este tutorial acima pede. Sigo tentando. Obrigada se puder ajudar.
ResponderExcluirOla Elaine não precisa colocar esse código todo é só usar esse código acima do /body
ResponderExcluirscript async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" src="//assets.pinterest.com/js/pinit.js" /script
Pode conferir em meu blog: https://yogacorpomeditacao.blogspot.com/2020/06/beneficios-para-comecar-praticar-yoga.html