Nesse tutorial de hoje vou mostrar para vocês como colocar em seu site ou blog um botão com a função de imprimir a página caso o seu leitor queira e necessite é claro! Para fazer isso será preciso apenas coloca o código que irei mostrar na página que você quer que tenha essa função ou no HTML do seu site ou blog se quiser que apareça em todas as páginas.
Pode parecer algo muito sem utilidade para alguns, mas em alguns nichos de blog como por exemplo os que ensinam receitas é sem dúvida algo que não pode faltar, já que os leitores desse tipo de blog normalmente gosta de imprimir suas receitas para testar na cozinha!
– Veja também:
- Como colocar estrelas de avaliação no Blogger
- Como deixar o título do Blogger deslizando
- Como usar botões coloridos no Blogger
Mas você mais do que ninguém saberá se essa função será útil ao seu blog e aos seus leitores ou não, portanto usei como exemplo os blogs sobre receitas mas essa função pode ser usada em outros tipos de blogs também.
Colocando em alguns Posts
1º Passo: Se você quer colocar essa função em apenas alguns postagens e não em todas, você pode fazer isso entrando na postagem em que você quer colocar essa função e clicando em “HTML“:
2º Passo: Agora basta você copiar o código abaixo e colar no local em que você quer o botão “Imprimir” apareça!
No caso você pode colocar acima do texto da sua postagem para aparecer no começo, ou no final da postagem para aparecer no final.
Código:
<center> <script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Imprimir"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png" alt="Imprimir"/></a> </center>
Veja no exemplo colocando no final da postagem:
Feito isso basta clicar em “Atualizar” e ver como ficou! Repita esse processo em outros posts que você quer essa função disponível!
Agora, se você quer mesmo é colocar essa função em todos os post,s você não precisa fazer isso em cada postagem, basta colocar o código no HTML do seu tema para que essa função apareça em todas postagens. Veja como logo abaixo!
Colocando em todos os Posts
1º Passo: Entre no painel de controle do seu Blogger e do lado esquerdo clique em “Modelo” e depois em “Editar HTML“:
2º Passo: Agora clique levemente sobre o código e aperte as teclas CTRL + F e pesquise pelo código abaixo e aperte “ENTER“:
<div class='post-footer-line post-footer-line-2'>
Detalhe: Terá dois códigos, então quando encontrar o primeiro aperte ENTER novamente para ir ao segundo que é o que queremos!
3º Passo: E logo ACIMA desse segundo código que encontramos, coloque o seguinte código:
<center> <script>var pfHeaderImgUrl = '';var pfHeaderTagline = '';var pfdisableClickToDel = 0;var pfHideImages = 0;var pfImageDisplayStyle = 'block';var pfDisablePDF = 0;var pfDisableEmail = 0;var pfDisablePrint = 0;var pfCustomCSS = '';var pfBtVersion='1';(function(){var js, pf;pf = document.createElement('script');pf.type = 'text/javascript';if('https:' == document.location.protocol){js='https://pf-cdn.printfriendly.com/ssl/main.js'}else{js='http://cdn.printfriendly.com/printfriendly.js'}pf.src=js;document.getElementsByTagName('head')[0].appendChild(pf)})();</script><a href="http://www.printfriendly.com" style="color:#6D9F00;text-decoration:none;" class="printfriendly" onclick="window.print();return false;" title="Imprimir"><img style="border:none;-webkit-box-shadow:none;box-shadow:none;" src="https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png" alt="Imprimir"/></a> </center>
Deve ficar mais ou menos como na imagem abaixo:
Feito isso clique em “Salvar modelo” e pronto! Agora é só entrar nas postagens para verificar se tudo funcionou!
Personalizando o botão
Você pode mudar o botão “Imprimir” por outros botões diferentes e para fazer isso basta você apagar no código o seguinte item como marquei na imagem abaixo e substituir por outro mostrados mais abaixo:
Botão 1 (Padrão)
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/01.png
Botão 2
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/02.png
Botão 3
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/03.png
Botão 4
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/04.png
Botão 5
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/05.png
Botão 6
https://dl.dropboxusercontent.com/u/2218469/espacoblog.com/img/06.png