Botões para IMPRIMIR e GERAR PDF no Blogger

Com este código você permitirá ao visitante IMPRIMIR ou BAIXAR a postagem no formato PDF cada postagem individualmente. Claro que é possível para um leitor escolher a opção "imprimir" da janela do seu navegador, mas isso teria impresso o cabeçalho, as barras laterais e outras seções irrelevantes da página html, desperdiçando papel, tinta e tempo.

Usando uma combinação de CSS e JavaScript, desenvolvi um método simples, mas eficaz, de imprimir apenas a postagem (e comentários) de cada página do blog.

Neste post, explicarei como você também pode adicionar funcionalidades eficazes de impressão às suas postagens do Blogger em apenas duas etapas simples.

Sem mais delongas, vamos aos códigos:

Adicione o código de estilo CSS ao seu modelo do Blogger

Para adicionar o código de estilo de impressão ao seu modelo do Blogger, basta acessar Layout> Editar HTML no painel do Blogger e pesquisar a </head> tag de fechamento .
Imediatamente antes dessa linha, adicione as seguintes linhas de código (copie e cole isso diretamente no 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>

Se você gosta, você pode visualizar o seu blog antes de salvar. Nesta página de visualização, você poderá ver que a visualização da impressão exibe apenas as postagens do seu blog (não a barra lateral ou outras áreas indesejadas).

Finalmente, salve seu modelo.

Adicionar um link "Imprimir este post"

Para notificar seus leitores de que suas postagens podem ser impressas de maneira eficaz, é provável que você queira adicionar um link "Imprimir" abaixo de cada uma das postagens do Blogger.
Criei três estilos diferentes para o link de impressão, para que você possa escolher a opção que funciona melhor para o design geral.
Para adicionar o link de impressão, acesse a página "Editar HTML" novamente e, dessa vez, verifique se você marcou a caixa "expandir modelos de widget".
Agora pesquise por esta linha:
<p><data: post.body/></ p>
Imediatamente após essa linha, cole uma dessas três seções de código:
Para um link de texto simples:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>
Para um link de botão
Parte superior do formulário
Parte inferior do formulário
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<form> <input type="button" value="Print This Page" onClick="window.print()" /> </form>
</b:if>
Para um link elegante com o ícone da impressora
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
Depois de adicionar esse código, salve seu modelo. Esses links só estarão visíveis nas páginas de postagem (para permitir que os visitantes imprimam a postagem completa e quaisquer comentários que apareçam abaixo da postagem), então visite uma das suas páginas de postagem para ver o link em ação.
Você pode ver um exemplo do link de impressão perto da parte inferior desta postagem. Se você clicar neste link, você será solicitado a imprimir este post inteiro (e comentários) usando sua impressora padrão.

Nenhum comentário:

Postar um comentário