Com este código irá permitir aos seus visitantes, imprimir os artigos individuais do seu blogue. - Claro que é sempre possível a um leitor escolher a opção "impressão", a partir da sua janela do navegador, mas isso fará a impressão do cabeçalho, barras laterais e outras secções irrelevantes do blogue, desperdiçando tempo papel e tinta.
Mas utilizando esta combinação de CSS e JavaScript simples mas eficaz poderá apenas imprimir a postagem e os comentários de cada página do blog.
Vou explicar como fazê-lo embora o seu original deva ser atribuído a Amanda in blogger Buster.
Existem apenas duas etapas para adicionar esta funcionalidade ao seu próprio modelo do Blogger:
1. Adicione algumas linhas de código CSS para que as páginas impressas apareçam da forma desejada.
2. Adicione uma linha de JavaScript abaixo dos seus posts (que cria uma ligação para os leitores imprimirem a postagem).
Adicionando o CSS:
No painel de controlo do blogger click em ESQUEMA/LAYOUT > EDITAR HTML, após o carregamento da página localize no seu template o encerramento da tag: </head>.
Logo antes desta linha, adicione as seguintes linhas de código (copiar e colar directamente para o seu modelo do Blogger):
<style media='print' type='text/css'>#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}#main-wrapper {width: 95%}</style>Salve o seu modelo.
Adicionando o Link Print this Post:
Para notificar os seus leitores de que suas postagens podem ser impressas de forma eficaz, adicione um link "Imprimir" abaixo cada uma de suas postagens do Blogger.
Para adicionar o link "Imprimir" vá para a secção "Editar HTML" novamente, e desta vez marque na caixa correspondente a opção "EXPANDIR MODELOS DE WIDGETS" .
Agora procure esta linha de código:
<p > <data:post.body/> </ p>
Imediatamente após essa linha, cole o seguinte código:
<b:if cond='data:blog.pageType == "item"'><span style='background: url(http://bloggerbuster.com/images/print.gif) left no-repeat; padding-left: 20px;'> <a href='javascript:window.print()'>Print this post</a></span></b:if>Salve o seu modelo.
Esse link só será visível nas páginas de postagem (para permitir aos visitantes imprimir o post completo e todos os comentários que aparecem abaixo da postagem).
Se tudo correu bem deverá ver nas páginas individuais do blogue o link,
Print this post.Obs. Os comentários podem acrescentar muita coisa de valor dos post, e podem conter informações para o leitor que não estão incluídas no corpo do próprio post.
Muito obrigado pelo post, me foi de grande utilidade, álias seu blog é muito bom, bom mesmo!
ResponderEliminarBom, cheguei até este blog e gostei. Busca ajuda para o botão da impressora. Mas, tentei por 2x e nada.
ResponderEliminarAqui fiz tudo nos conformes, seguindo tb o blog da colega. Só que no meu aparece data:post.body (sem os 2 p). Vão aqui sem html. E aí? Fiz, refiz e o botão, nada. ;(
Interessante essa barra no rodapé do blog!
Como Portal 80 no meu blog tive a mesma dificuldade. Somente encontrei data:post.body/
ResponderEliminare não p data:post.body/ / p.
Que pena que não deu certo.
Olá? fazendo uma visita ao seu blog me deparei com algo que eu quero a muito tempo e estava quase desistindo, de proucurar.
ResponderEliminarQuando por acidente achei aqui no seu blog. No final das suas postagens há reações etc e tags...
Embora eu quero para postagem será que você tem tem os codigos do efeito postado no seu blog ou poderia postar caso não tenha deste já obrigada...