Como colocar o botão Imprimir em postagens do blog?

em 21 de janeiro de 2014


De vez em quando eu publico aqui no blog receitas culinárias.
Veja:
Receitas

E nessas postagens é bem útil um botão que possibilite imprimir a receita, caso o leitor deseje.
Também é possível ter o mesmo botão já instalado em seu blog, e assim todas as suas postagens terão a opção de serem impressas.
Vou ensinar hoje ambas as formas de ter o botão de imprimir ou salvar a postagem em pdf.
É bem simples, basta um pouquinho de atenção e todo mundo vai conseguir!

Botão Imprimir a postagem apenas nas postagens que você desejar

Para fazer como eu faço aqui no blog e disponibilizar a opção de imprimir apenas nas postagens que eu escolher faça assim:

Depois de escrever a postagem que deseja disponibilizar para impressão clique em HTML, no alto do seu editor de texto.
Essa ação reverte o editor de texto para o modo HTML.
Assim que fizer isso copie este código:

Copiar o código


E cole-o ao final de sua postagem.
Veja aqui como fica:
http://www.elainegaspareto.com/2013/06/pudim-de-doce-de-leite-simples-e-delicioso.html

O botão dá a opção de imprimir, salvar em pdf ou enviar por email.
É maravilhoso, faça o teste!

Caso você prefira ter o botão instalado automáticamente ao final de suas postagens siga o tutorial abaixo:

Instalar o botão Imprimir abaixo de todas as postagens

Acesse o painel de seu blog e clique na aba Modelo.
A seguir clique em Editar HTML e localize este trecho dentro do código-fonte:

<div class='post-footer-line post-footer-line-2'>

Você encontrará (provavelmente) 2 ocorrências deste trecho. Estamos procurando a segunda ocorrência, tá?
Acima do trecho localizado cole este código:

Copiar o código

Visualize e se estiver ok salve o modelo.

Veja como fica:
http://blogdetestesdaelaine.blogspot.com.br/


Dicas importantes:
O código alinha o botão à direita.
Se quiser alinhar à esquerda troque right por center. Tentei centralizar mas não dá certo. Se colocar o comando center ele vai alinhar à esquerda sem erros mas se tentar alinhar usando o comando left ele fica desalinhado.
Então, reforçando:
Alinhar à direita como está no meu teste: right;
Alinhar à esquerda: center;
Não use left.
Não sei o motivo, mas centralizar não consegui.
Faça testes em seu template até conseguir deixar como deseja.
Caso queira trocar a imagem do botão basta trocar o endereço da imagem pelo endereço daquela que deseja usar.
Dentro do código este é o endereço da imagem:
 http://cdn.printfriendly.com/button-print-grnw20.png

Abaixo selecionei algumas imagens que você pode salvar, hospedar e usar caso queira.

Como hospedar imagens usando o 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.















Releia tudo até se certificar de haver entendido.
Se tiver dúvidas diga nos comentários e na medida do possível eu tentarei ajudar.


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.

32 comentários , comente também!

  1. Olá Elaine

    Achei a dica super útil.

    AMIGA DA MODA by Kinha

    ResponderExcluir
  2. Muito interessante Elaine. E útil para certas postagens. Para mim não tem interesse, já que escrevo contos e ainda não perdi a esperança de um dia publicar em livro. Não tenho interesse em que possam levar e quem sabe publicar por mim.
    Um abraço e tudo de bom para si.

    ResponderExcluir
  3. Adorei e fiz no meu, ficou ótimo! Muita facilidade! Obrigada, Elaine!

    ResponderExcluir
  4. Já coloquei lá no Blog .......haha estou aprendendo rsrsrsr
    Só vou colocar nas receitas.
    Obrigada pela dica.
    Beijos.

    ResponderExcluir
  5. A dica é maravilhosa só temos que agradecer.

    Mas tbm hoje estou aqui para te convidar para a festa da ilha cujo link é
    http://anos-da-ilha.blogspot.com.br/
    Estou participando do top blogueiro mas vc tbm pode participar. Posso contar com vc?

    Bjssss

    ResponderExcluir
  6. Olá Elaine,
    que dica pra lá de especial! Depois vou colocar em posts de receitas, quando fizer ;) Obrigada por compartilhar tanta dica bacana.
    Ah! Já vou imprimir aquela receita do bolo de banana.
    Beijocas, Jana =)

    ResponderExcluir
  7. Oi querida,

    Faz algum tempo q tenho procurado essa funcionalidade mais sempre esbarro nas complexidades dos processos rs rs rs e fico com " preguicinha " rs mais resolvi procurar no seu blog e " eureka " perfeito, mto fácil seu método , mais que aprovado, muitíssimo obrigada amiga por compartilhar todo seu conhecimento conosco !

    Tenha excelente domingo !

    Grande beijo

    ResponderExcluir
  8. olá olha acho que não da certo tento copiar e não da opção de copiar oi sera que to fazendo errado mas acho que não to seguindo doreitinho que você postou

    ResponderExcluir
    Respostas
    1. Scorpiana, pare o mouse sobre o código.
      Vai aparecer, no alto, à direita, 4 ícones.
      Clique no primeiro e abrirá uma janela para copiar o código.
      A página precisa estar completamente carregada para que o código exiba os ícones, ok?

      Excluir
  9. não da para copiar esse codigo seguindo seu post direitinho mas não tem opção copiar

    ResponderExcluir
    Respostas
    1. Para mim não funcionou pelos seguintes motivos:
      1) Há anos uso o blogger e até hoje não achei a opção "EXPANDIR MODELOS DE WIDGET" (acho a opção "Modelo" e "Editar HTML", mas "EXPANDIR MODELOS DE WIDGET" não! Alguém pode me ajudar? Por favor; envie resposta para cesarborges2010@yahoo.com.br; ficarei eternamente grato!)
      2) Ao copiar e colar o código acima descrito; diretamente na página (uma das abas do blog) escolhida (HTML da página e não do modelo do blog, que fique claro isso!) realmente a figura da impressão aparece. Entretanto ao clicar a figura; a impressão é direcionada PARA TODA A PÁGINA E NÃO SOMENTE PARA O TEXTO ESCOLHIDO!
      3) Não tem como copiar o código postado em seu blog

      Excluir
    2. Cesar, pare o mouse sobre o código.
      Vai aparecer, no alto, à direita, 4 ícones.
      Clique no primeiro e abrirá uma janela para copiar o código.

      A página precisa estar completamente carregada para que o código exiba os ícones, ok?

      Em nenhum momento é pedido neste tutorial para expandir modelos de widget. Essa opção não existe mais no Blogger e se encontrar tutoriais que peçam isso é porque estão antigos.
      Para localizar os trechos tem que clicar Ctrl+F dentro da caixa de código e digitar na barra de busca o que deseja achar.

      Quando a página de impressão abrir basta excluir o que não quer imprimir.

      Excluir
  10. Que legal Elaine!
    Acabei de colocar na minha postagem de receita.
    Depois vem ver! Beijinhos e Sucesso!
    http://dulcineiadesa.blogspot.com/2014/03/maminha-recheada-com-queijo-e-presunto.html?utm_source=bp_recent&utm-medium=gadget&utm_campaign=bp_recent

    ResponderExcluir
  11. Olá Elaine
    Adorei as dicas, algumas já coloquei outras a tentar. Adoro a maneira como explicam as coisas, entendesse muito bem.
    Vou colocar o vosso símbolo no meu blog, quando tiver um tempinho passe por lá.

    http://acozinhadaxenia.blogspot.com

    Xénia

    ResponderExcluir
  12. Você tem alguma dica para ajudar a localizar o código-fonte citado?

    ResponderExcluir
    Respostas
    1. Larissa, leia o link do post Como usar os tutoriais deste blog.
      As dicas que posso dar estão lá.
      bjssss

      Excluir
  13. Olá, Elaine,

    Eu também divulgo as minhas receitinhas e estava procurando essa dica a muito tempo. Finalmente encontrei e agora só tenho a agradecer!!

    Muito obrigada, mesmo!!

    ResponderExcluir
  14. Olá Elaine
    No meu caso, para funcionar, fui obrigada a colocar seu código em outro lugar
    (queria enviar o código como eu coloquei mas não aceitou) mas o blog é

    http://dona-sinha-internacional.blogspot.com.br/

    e o seu código está acima de view commens

    Por causa do template (tentativas)
    mas deixo a dica e Muuuuuuuuuuuuuiiiiiiiiiiiiiiiiittttttttttoooooooooo obrigada.
    Um ótimo 2015 e continue nos ajudando.
    Mil beijinhos
    Ig.

    ResponderExcluir
  15. Oi, Elaine. Tudo bem?
    Acabo de colocar este script em meu blog de testes e amei o resultado.
    Você disse em certo ponto, que não conseguiu centralizar.
    Eu consegui e deixo aqui a minha dica.

    Logo no começo do código, onde está escrito: 'float: center; margin-top: -17px; margin-left: 5px', em margin-left, troque o valor 5 por um valor bem mais alto. No meu blog eu coloquei 215 e a imagem ficou centralizada.
    Este valor se refere à distância do botão em relação à borda da área de postagem. Quanto maior o número, maior a distância.
    Espero que esta dica ajude a outros.
    E valeu pelo tutorial.
    Estou reenviando o comentário porque fiquei na dúvida se foi enviado, já que na hora eu estava fazendo o logout da minha conta Google.
    Obrigada e beijos.
    Gisa Vasfi, Receitas de todos nós.

    ResponderExcluir
  16. Elaine,eu estava procurando este tutorial faz tempo.
    Vou colocar no meu blog.
    Obrigada,valeu!!!
    Beijos

    ResponderExcluir
  17. Como faço para excluir o botão imprimir do blogger?

    ResponderExcluir
  18. Como faço para excluir o botão imprimir do blogger?

    ResponderExcluir
  19. Elaine, por favor: no modelo básico posso instalar o botão imprimir? Fiz o que vc ensinou mas só achei (acho que é isso) o footer 1.
    Vc me responde? Vc já me ajudou muito com suas orientações, mas gostaria de facilitar aos meus amigos a imprimir minhas receitas.
    Com carinho
    Vera Quinteiro (veracozinhando.blogspot.com)

    ResponderExcluir
    Respostas
    1. Maria, pode instalar em qualquer modelo sim.
      beijosss

      Excluir
  20. Elaine, acho que ontem quando tentei colocar esse botão fiz alguma besteira. Meu blog foi removido, vc sabe me dizer como tenho de proceder? Estou muito triste e chateada. Lembro que desisti de colocar quando veio uma mensagem dizendo que a URL não era a minha ou algo parecido.
    veracozinhando@blogspot.com
    Vc tem como me ajudar?

    ResponderExcluir
    Respostas
    1. Maria, se o blog foi removido deve ter um botão, do lado esquerdo do painel, Blogs Excluídos.
      Daí é só restaurar.
      Se foi excluído pelo Blogger é mais complicado, mas se foi por você, por engano, é só restaurar...

      Excluir
  21. Descobri que consigo entrar pelo atalho pelos meus favoritos, consigo postar. Mas quando vc pesquisa no google o nome veracozinhando ele aparece que foi removido. Não sei se me fiz entender.....me orienta? Bjocas

    ResponderExcluir
  22. oi bom dia nenhum dos codigos aceitou no meu blog uando colo <div ate aí certo quando vou colocar class não permite e dá erro obrigada

    ResponderExcluir

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…