Opcion de imprimir solo la entrada

|

PrinterAnteriormente expliqué cómo tener la opción de imprimir la página del blog. Pero el inconveniente de ese truco es que imprime toda la página, incluyendo la cabecera y los comentarios. Así que ahora lo que haremos será poner la opción de imprimir sólo el post y excluir todo lo demás.

Primero ve a Diseño > Edición de HTML y marca la casilla Expandir artilugios y pega antes de </head> el siguiente código:
<style media='print' type='text/css'>#header-wrapper,
#header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,
#footer, .date-header, #comments, .post-meta-data, .comment-link,
.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,
.subscribe_notice, .noprint {display: none;}#main-wrapper {width:
95%; overflow: visible !important;}</style>

Si tu plantilla tuviera dos sidebars agrega esto al código:
#newsidebar-wrapper

Si huebiera algún gadget arriba o abajo del post busca su id y agrégalo, por ejemplo:
#HTML2

Todos los elementos que agregues debes separarlos con una coma.
Ahora busca esta etiqueta <p><data:post.body/></p> y pega debajo de ella lo siguiente:
<b:if cond='data:blog.pageType ==
&quot;item&quot;'>
<span style='background:
url(http://www.iconosgratis.us/coleccion-iconos-16x16/archivos/printer.png) left no-repeat; padding-left:
30px;'><a href='javascript:window.print()'>Imprimir artículo</a></span>
</b:if>

Ahora abajo de tus entradas aparecerá la opción de imprimir y sólo se imprimirá el post. El texto de "Imprimir artículo" sólo aparecerá cuando el lector esté en la página del post.
Imprimir artículo
Pueden ver el ejemplo funcionando haciendo click aquí.

76 comentarios:

cyberbloggero dijo...

Interesante bro, no sabía que se podia imprimir sólo el post. Yo tenia uno en mi blog, pero lo saqué porque imprimía todo.


Sos un maestro!!!!


Dentro de unos meses ningún servicio va a querer contabilizar las estadísticas de este blog porque les va a saturar los servidores. jajajaja. Te lo mereces bro!


Un abrazo!

El Potro™ dijo...

jajaja mira qué exagerado, jajaja.
Gracias por tus comentarios y por estar siempre bro.
Un abrazo.

El Autor Material dijo...

Interesante mi querido Watson :P

jaja, muy buen post.

Con respecto a la publicidad, ya está puesto tu banner, date una vuelta para ver como quedó..


Saludos !

Dr. Victor Guillermo Pagé Hernandez dijo...

Hola amigo hoy tengo las entendederas mal tampoco se lo pude colocar Saludos Dr Page

El Potro™ dijo...

Hola Dr. Víctor,
Copia y pega el código tal como está, no agregues ninguna línea hasta ver que el código principal ya se ha guardado bien.
Si sigues teniendo más problemas dime qué error te marca.
Saludos.

Dr. Victor Guillermo Pagé Hernandez dijo...

Hola amigo gracias por responder, lo volvi hacer tal como lo indicas pero no sale nada, no se ve, ni idea de que esta pasando.

El Potro™ dijo...

Hola Dr. Víctor,
Está funcionando perfecto, acabo de verlo en tu blog. Lo que sucede es que sólo se ve cuando haces click en el título de una entrada. Haz click en cualquiera de ellas y verás que al final del post aparece sin problemas la opción de imprimir.
Saludos.

Dr. Victor Guillermo Pagé Hernandez dijo...

Amigo tienes razon disculpa mi ignorancia gracias por tu apoyo. Saludos Dr Page

Alberto Mario Raso dijo...

Hola, disculpa pero sigo tus pasos pero no sale nada en el post que puede ser? gracias

El Potro™ dijo...

Hola Alberto Mario,

He entrado a tu blog y funciona perfecto. Recuerda que la opción de imprimir no se verá en la página principal, entra a cualquier entrada y verás abajo del post la opción de imprimir.

Saludos.

MªJosé dijo...

Hola que tal??
Estoy intentando poner la opción imprimir pero no encuentro: data:post.body, supongo que no estará.
que puedo hacer?
Gracias de antemano.
un saludo

El Potro™ dijo...

Hola MªJosé,

En tu plantilla está como:
<P>
<data:post.body/>
</P>

Recuerda que debes marcar la casilla Expandir artilugios para que puedas encontrarlo.

Saludos.

MªJosé dijo...

Hola me aparece data:post.body pero las p, no las tiene.
Gracias

El Potro™ dijo...

Hola MªJosé,

Entonces pégalo después de eso, también funciona de ese modo.

Saludos.

MªJosé dijo...

GRACIAS POR AYUDARME A RESOLVER EL PROBLEMILLA.
UN SALUDO

El Potro™ dijo...

Gracias a ti por visitar este blog y por compartir la receta de la pizza de atún =)
Saludos.

Sonia dijo...

Hola

He conseguido que me imprima la entrada, pero queria saber si es posible que sea mas ancho, ahora solo imprime 2/3 partes de la hoja (sale todo, pero un formato feo)

El Potro dijo...

Hola Sonia,

El ancho y alto así como los márgenes los determinas tú al momento de imprimir, es decir, depende de la configuración que tengas en tu impresora.

Saludos.

Sonia dijo...

Gracias por tu respuesta, pero creo que tiene algo que ver con las fotos q inserto. Me explico: ahora tengo las fotos de las recetas (es un blog de cocina) a la derecha (con el texto al lado de la foto) y la impresion sale mal. He probado de poner la foto en el centro, entonces el texto queda debajo de la foto y la impresion sale perfecta. Te dejo mi blog por si te pudieras pasar a verlo (es q no se si me explico bien).

http://nl-bcn.blogspot.com/

Muchas gracias

El Potro dijo...

Hola Sonia,

Es verdad, he impreso una receta y la foto sale arriba del texto. No sé a qué se pueda deber, es probable que sea un error de cómo el navegador interpreta la orden de impresión.
Si te da mucho problema, puedes usar otra opción como PrintFriendly. Igual hay que pegar el código que te dan en el mismo lugar que menciono en este post.

Te dejo el enlace:
http://www.printfriendly.com/button

Saludos.

Sonia dijo...

Hola de nuevo!

No tengo palabras...de agradecimiento! ha salido todo PERFECTO, muchisimas gracias.

Un saludo,

El Potro dijo...

Por nada Sonia, me da gusto que te haya resultado.
Saludos!

FJZN dijo...

buenas antes de todo felicidades por el blog que esta muy bien sobretodo para principiantes como yo. Estoy teniendo problemas para imprimir, no se que pasa que me sale la página en blanco. Estoy haciendo pruebas en este blog :

http://unratitoparareir.blogspot.com/2010/02/teg4t5gf.html

¿podrias echarme un cable porfa? me estoy volviendo loca.

Gracias

El Potro dijo...

Hola FJZN,

Revisa la configuración de tu impresora, yo acabo de imprimir la entrada que pusiste de ejemplo y se imprimió sin ningún problema.

Saludos.

FJZN dijo...

Buenas de nuevo , por fin he conseguido imprimir un post normal , hasta ahora estaba intentado imprimir de manera economica y no me deja, no entiendo poque no me deja imprimir de manera economica.

Gracias.

El Potro dijo...

Qué bueno que ya has podido imprimir la entrada :)

Nuria i Sergi dijo...

Hola ! estoy aprendiendo mucho contigo, muchas gracias ! estoy intentando cosas en un blog de prueva porque yo de ordenadores ni idea.
He colocado todo lo que comentas para imprimir pero me continua apareciendo el Menu de paginas (por cierto lo rectifique como tu explicas en otro post y queda estupendo). Dices que hay que añadir el id pero he provado varias y no doy con ella, que debo añadir ?? muchas gracias ! y enhorabuena por tu trabajo

El Potro dijo...

Hola Nuria i Sergi,

Prueba poniendo esta ID para excluir tu menú de páginas:
#PageList1, #PageList2

Seguro que con eso ya queda.
Gracias por tus comentarios y tu visita.
Saludos!

Nuria i Sergi dijo...

muchas gracias, ahora ya no aparece !! solucionado. Gracias de nuevo

INSTITUTO LA PAZ AC dijo...

hola:

No consigo hecharla a jalar, me aparece imprimir pero no imprime nada, la he borrado para hecerlo de nuevo, lo que no entendì fuè lo de seprarlo con comillas. podrìas especificarlo?

de antemano gracias

El Potro dijo...

Hola INSTITUTO LA PAZ AC,

No veo el código en tu blog, necesitaría verlo funcionando para verificar que no se trata de un problema con tu impresora.

Saludos.

Amanda dijo...

Hola, he copiado como dices el texto antes de head y el otro debajo de post body y no me sale nada de imprimir.
¿Que hice mal?
Gracias.

El Potro dijo...

Hola Amanda,

Debe ser debajo de <p><data:post.body/></p> no de .post-body p {

Saludos.

Hector dijo...

lo he puesto en mi blog www.apuntesth.blogspot.com y www.tutoshector.blogspot.com y queda superbien

Katsuro - producciones dijo...

Amigo Potro aqui nuevamente preguntando, he hecho lo que dijiste y probe imprimiendo haber que tal salia y pues me imprimio toda la web a excepcion del head. Lo he puesto en mi blog de pruebas y asi me quedo, lo que stoy seguro he hecho mal es la parte de los didebar y lso gadget no se cuales son los ids, arriba de las entradas del blog tengo mi menu lava lamp que lo saque del amio Eduardo Sanguino de ciudadblogger, no se si pudiera enviarte por correo mi plantilla para que me ayudes mejor. saludos

El Potro dijo...

Eso es porque los elementos de tu plantilla tienen un nombre distinto a los comunes, sólo sería cuestión de que agregaras al primer código estas partes:

#wrapper, #bottom_frame, #top_frame, #header, #footer, #searchform, #welcome, #rss, #sidebar_left, #sidebar_right, #respond

Katsuro - producciones dijo...

Hola, gracias por la respuesta tan pronto, pero ya agregue lo que dices y pues imprime igual todo menos la cabecera , no se si te podria enviar el codigo html para que me puedas orientar mejor, a algun correo en particular, de antemano gracias

El Potro dijo...

Estás poniendo el nombre de los elementos fuera del código, debe quedar así:
<style media='print' type='text/css'>#wrapper, #bottom_frame, #top_frame, #header, #footer, #searchform, #welcome, #rss, #sidebar_left, #sidebar_right, #respond, #header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, .post-footer, #footer-wrapper,
#footer, .date-header, #comments, .post-meta-data, .comment-link,
.comment-footer, #backlinks-container, #blog-pager,#navbar-section, .navbar,
.subscribe_notice, .noprint {display: none;}#main-wrapper {width:
95%; overflow: visible !important;}</style>

Saludos.

Katsuro - producciones dijo...

Gracias por la pronta respuesta, hice el cambio como me indicaste y lo bueno es q ya no imprime ni una de las sidebar pero tampoco imprime el post, la hoja sale en blanco, creo que vamos por buen camino, gracias por la respuesta ahora si ya jalo a estudiar que toy con la hora. Saludos desde Perú

El Potro dijo...

Entonces elimina #wrapper de la lista, quizá ese es el que muestra las entradas, sino se arregla elimina uno a uno hasta que des con el que debe ser.

Saludos.

Katsuro - producciones dijo...

Por fin lo logre, lo consegui como me indicaste me puse a probar uno a uno, pero no obtuve resultados,entonces opte por lo contrario añadir uno por uno y pues la solucion fue añadir la #sidebar_left, #sidebar_right, muchas gracias buenisimo este truco que aportas a la comunidad amio potro
saludos y muchisimas gracias por el tiempo prestado

El Potro dijo...

Qué bueno que lo has podido solucionar y que ya está funcionando :)

Katsuro - producciones dijo...

Gracias amio potro seguire leyendo la info y los trucos que tiene spara mejorar mi blog, Saludos

Grupo Katsuro dijo...

Holas nuevamente, disculpas porlas preguntas, pero todo estaba tan bien, pero me acaba de sucederel siguiente problema no se si me podrias decir de que se trta o como solucionarlo, cuando imprimo, me imprime solola entrada pero no lo imprime centrado sino alineado a la derecha y o se lee toda la entrada se come la letra a la derecha, te dejo una imagen paraque pueda ver mejor.

http://lh4.ggpht.com/_Sy_tjsYPJlg/S6-NskQi58I/AAAAAAAAAWo/xU4Oq2SYXpw/s512/error%20impresion.jpg

Ojla y sepas aq ue se deb een todo caso igual gracias por la leida

El Potro dijo...

Eso ya puede deberse a la configuración de tu impresora, revisa los márgenes establecidos.

Mucho Emprendimiento dijo...

Hola todo lo que he intentado de tu blog me ha funcionado (aunque algunas no las he dejado porque solo las experimentaba) pero este de imprimir no me funciona, incluso he intentado los consejos de los otros mentarios y nada, por favor, dale una observada a mi blog y ayudame, me serviría mucho porque es un blog para estudiantes: http://profejuanc.blogspot.com/

Mucho Emprendimiento dijo...

Pd:intenté el de printfriendly.com pero no quisiera ese, quiero tu código. (en la medida que sea posible), gracias.

El Potro dijo...

¿Qué no funciona? ¿no imprime? ¿imprime todo? ¿no aparece el enlace?

Administrador dijo...

Hola amigo puedes revisar el codigo fuente de mi blog hice lo que me dijiste en un principio parecia la solucion pero me sale impresa la mitad de mi entrada no se que esta mal
mi direccion de correo es administrador@saborcotidiano.com y mi blog es http://www.saborcotidiano.com/
Te AGRADEZCO MUCHO

El Potro dijo...

Quizá estás intentando imprimir desde la portada del blog, ahí no se imprimirá todo pues tienes el Leer más, tiene que ser directo en la entrada completa.

Igual veo que tienes dos enlaces para imprimir, no sé si intentaste poner otro método o lo repetiste.

Saludos.

Administrador dijo...

Hola gracias por tu respuesta veo que viste mi blog bueno el tema es que ahora saque el otro codigo que habia para imprimir (si estaba probando dos)
Ahora dejo solo el tuyo, perfecto cuando alguien quiere imprimir un post mio se va a "leer mas" y al final sale imprimir articulo
El tema es que no solo impirime el post tambien la propaganda de arriba la lista de categorias(es un gadget HTML) tambien los libros de abajo (es un gadget HTML)y tambien el video que pongo al pie (es un gadget HTML)
Te recuerdo la direccion de mi blog es : http://www.saborcotidiano.com

El Potro dijo...

Hola Administrador,

Tal como he mencionado en la entrada y en los comentarios, hay que localizar las ID de esos gadgets y agregarlos al primer código para que los omita al momento de imprimir.
Por ejemplo, tu menú de arriba es HTML4
Las categorías de abajo es Label3
La publicidad de libros es HTML16
El video de abajo es HTML5

Esas ID agrégalas en el código como se explica.
Saludos.

Sonia - L'Exquisit dijo...

Buenos dias,

Te escribí en su momento (comentario 20) para incluir esta opcion en mi blog, no salió y puse el PrintFriendly, q ahora no me funciona. He vuelto a probar de poner la opcion de imprimir de este post y me funciona bien, solo un pequeño detalle:

El icono y el texto de imprimir me salen pegados a la ultima linea de la entrada y no sé como separarlo...me ayudas?

Muchas gracias

(nl-bcn.blogspot.com)

El Potro dijo...

Buenos días,

Busca el el código que has pegado donde dice background, y antes de él agrega esto: margin-left:10px;

Saludos.

Mayte dijo...

Hola me encanta tu blog y es de los más útiles que conozco. Éste código es de los más sencillos para imprimir, me sale perfecto, solo que a mi me gustaría y no sé si es posible que solo se imprimiera el texto sin las imagenes que tengo en el blog, no sé si sería posible o existe algo así, ojala puedas ayudarme.

Gracias!! ;)

El Potro dijo...

Hola Mayte,

Intenta agregando en el primer código antes de #header-wrapper esto:
.post img,

Quizá eso ayude a que no se impriman las imágenes.
Saludos.

Mayte dijo...

Gracias por responder tan pronto!!
probaré en un rato y te digo...como salio.

Mayte dijo...

Pues muchas gracias!!! lo he hecho todo cual lo has indicado, incluido lo de las imagenes para que no aparezcan y así es, al saltar la impresora, solo imprime el texto. Muchas gracias de verdad por dedicar parte de tu tiempo a ayudar a los demás...Saludos y buen fin de semana! ;)

El Potro dijo...

Qué bueno que te ha funcionado :)
Buen fin de semana igualmente.

Llorenç dijo...

Buenas!!! muchas gracias!! solo me queda una duda y no se como solucionarla!!! me guastaria que alguna de las fotos, la primera...la última...saliese más grande!! es posible??? graciaas!!

El Potro dijo...

No, la impresora imprimirá el mismo tamaño de la imagen que haya en la página.
Saludos.

CHiCken dijo...

Hay alguna forma en ves de poner lo que no queremos imprimir en el style, poner mejor lo que nomas queremos imprimir

juankp74 dijo...

hola amigo quiero preguntarte deseo organizar una serie de imagenes,en un solo post; pero darle la opciòn a las personas de imprimir las que ellos quieran individualmente... ¿es posible, como la organizo?.. gracias. si me puedes responder.. juankp74..

El Potro dijo...

Desconozco si pueda hacer con algún script distinto, al menos con este código no se puede :s

BonavistaCuicaClub dijo...

Hola:
He insertado la función de imprimir entrada, pero no puedo eliminar la impresión del gadget imagen y el de las páginas. Llevo horas intentándolo.
Como id de gadget imagen he introducido image1.
Muchísimas gracias
www.bonavistacuinaclub.com

El Potro dijo...

Sólo agrega antes de #header-wrapper esto:
#Image1,

Con eso deberá de desaparecer de la impresión.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo