-->
Imprimir entradas en Blogger

Imprimir entradas en Blogger

Existen sencillas formas de incluir un botón para imprimir una página web, pero lamentablemente al incluir el botón también incluímos la página entera, es decir, cabecera, sidebar, u otro contenido irrelevante se imprime.

En el siguiente tutorial enseñaré a añadir un botón para imprimir sus entradas y a su vez que se imprima sólo el contenido de ésta.

El tutorial:

Paso 1: Añadiendo el botón para imprimir:

En "Diseño | Edición HTML" marcaremos la opción "Expandir plantillas de artilugios". Buscaremos el siguiente código:
<div class='post-footer-line post-footer-line-1'>

Debajo de este pegaremos el siguiente:

<a href='javascript:window.print()' id='imprimir' title='Imprimir Entrada'>Imprimir entrada</a>
Puedes usar una imagen como botón reemplazando "Imprimir entrada" por el siguiente código:

<img src='URL IMAGEN'/>
 Previsualiza los cambios y si son efectivos puedes guardar tu plantilla.

Paso 2: Editando el estilo al imprimir:

Haremos uso ahora de CSS para personalizar la hoja al imprimir mediante el siguiente código:
<style media='print' type='text/css'>
ATRIBUTOS
</style>
En él añadiremos todo lo que deseemos eliminar, para ello deberás establecer el valor "display:none". Veamos un ejemplo:
<style media='print' type='text/css'>
#header-wrapper {display:none;} /*Oculto la cabecera*/
#sidebar-wrapper {display:none;} /*Oculto la sidebar*/
#footer-wrapper {display:none;} /*Oculto el pié de página*/
.post {width:700px;} /*Aumento el ancho de la entrada*/
</style>

Este código deberás pegarlo antes de </head>.

Importante:
  • Para ocultar algún otro objeto tienes que conocer el ID o clase del objeto en cuestión.
  • Puedes ir previsualizando el resultado eliminando el código media='print', así podrás comprobar desde vista previa cómo se verá al imprimir pero no olvides volver a añadirlo ya que de lo contrario el blog se verá al igual que en la previsualización.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
SlickRSS: Pack de Iconos para RSS # - SlickRSS: Pack de Iconos para RSS
Crear más de 10 páginas estáticas en Blogger # - Crear más de 10 páginas estáticas en Blogger
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Enlaces para compartir tus posts en Blogger # - Enlaces para compartir tus posts en Blogger
Thumbs Up and Down en Comentarios de Blogger # - Thumbs Up and Down en Comentarios de Blogger