La opción de imprimir el blog es algo que puede hacerse fácilmente desde una computadora bien configurada, pero siempre es una ventaja brindar al visitante de tu blog un botón bien visible que le permite y le invite a un tiempo a imprimir la página si esta es de su interés.

Coloco a continuación cinco maneras sencillas de colocar la opción Imprimir y/o Guardar la página como PDF en tu blog:



1) Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar
2) Agregar la opción como un botón con texto
3) Agregar la opción con una imagen de impresora u otra (aquí puedes escoger si colocas la imagen más el texto o sólo la imagen como un link)
4) Agregar la opción como un botón que permite guardar la página en PDF
5) Agregar cualquiera de las opciones anteriores pero al final de cada entrada o post

Aquí vamos:

1) Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca como link):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()">IMPRIMIR PAGINA</a>

2) Agregar la opción como un botón con texto

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca como link; puedes personalizar el tamaño del botón aumentando o disminuyendo el valor de la etiqueta "tabindex", que yo coloco en 6):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()"><button id="printbutton" disabled="disabled" tabindex="6">IMPRIMIR PAGINA</button></a>

3) Agregar la opción con una imagen de impresora u otra (aquí puedes escoger si colocas la imagen más el texto o sólo la imagen como un link)

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: ahora debemos decidir en qué lugar de la página vamos a colocar la opción. Debemos tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código (sustituye el texto en mayúsculas por el texto que deseas aparezca o elimínalo si sólo quieres la imagen como link; he puesto una imagen animada que me resultó atractiva, tú puedes probarla a ver si también te gusta o cambiarla por otra que encuentres en la web o que subas a un servicio de alojamiento de imágenes, como Flirck o Image Shack, una vez que tengas la dirección de tu propia imagen sustitúyela por la mía):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href='javascript:window.print()'><img border='0' src='http://img31.imageshack.us/img31/9265/impresora07.gif<br />'/><b>IMPRIMIR PAGINA</b></a>

4) Agregar la opción como un botón que permite guardar la página en PDF

ÚNICO PASO: Decide en qué lugar de la página vamos a colocar la opción. Debes tener en cuenta que mientras más visible sea más posibilidades tendrá de ser utilizado. Puedes colocarlo al inicio del sidebar o fijo al inicio del blog, justo antes de las entradas (recuerda que en Blogger sólo tienes que arrastrar el nuevo elemento agregado al lugar de la página que mejor te convenga).

A continuación el código que debes pegar en Diseño, pestaña "Elementos de página"; una vez allí pinchar el link "Agregar un nuevo elemento". Cuando se abra la ventana emergente seleccionar HTML/Javascprit, es aquí donde debes pegar este código:

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<!--Start: PDF On Line Script--><br /><br /><script type="text/javascript"><br /><br />var authorId="1213B011-D26C-425F-8B81-D6E798E05769";<br /><br />var pageOrientation="1";<br /><br />var topMargin="0.5";<br /><br />var bottomMargin="0.5";<br /><br />var leftMargin="0.5";<br /><br />var rightMargin="0.5";<br /><br /></script><br /><br /><script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js"><br /><br /></script><br /><br /><!--End: PDF On Line Script-->

5) Agregar cualquiera de las opciones anteriores pero al final de cada entrada o post

PRIMER PASO: agregamos JUSTO ANTES de la frase /head (ve a Diseño, luego a la pestaña Edición de html):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<style media='print' type='text/css'><br />#navbar-iframe {display: none; height: 0px; visibility: hidden;}<br />.noprint {display: none;}<br />body {background:#FFF; color:#000;}<br />a {text-decoration: underline; color:#00F;}<br />}<br /></style>

SEGUNDO PASO: Ve a Diseño, luego a la pestaña "Edición de HTML". Busca (ayúdate con el comando Ctrl+F) la siguiente línea dentro de tu plantilla:

'post-footer-line post-footer-line-3'

Cuando la encuentres coloca justo después de ella el código que prefieras de los siguientes:

PARA Agregar la opción como link, con el texto "Imprimir página", "Imprimir blog" o lo que quieras poner en su lugar (cambia el texto en mayúsculas por el texto que desees)

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()">IMPRIMIR PAGINA</a>

PARA Agregar la opción como un botón con texto (sustituye el texto en mayúsculas por el texto que deseas aparezca como link; puedes personalizar el tamaño del botón aumentando o disminuyendo el valor de la etiqueta "tabindex", que yo coloco en 6):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href="javascript:window.print()"><button id="printbutton" disabled="disabled" tabindex="6">IMPRIMIR PAGINA</button></a>

PARA Agregar la opción con una imagen de impresora u otra (sustituye el texto en mayúsculas por el texto que deseas aparezca o elimínalo si sólo quieres la imagen como link; he puesto una imagen animada que me resultó atractiva, tú puedes probarla a ver si también te gusta o cambiarla por otra que encuentres en la web o que subas a un servicio de alojamiento de imágenes, como Flirck o Image Shack, una vez que tengas la dirección de tu propia imagen sustitúyela por la mía):

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<a href='javascript:window.print()'><img border='0' src='http://img31.imageshack.us/img31/9265/impresora07.gif<br />'/><b>IMPRIMIR PAGINA</b></a>

PARA Agregar la opción como un botón que permite guardar la página en PDF:

(PARA COPIAR EL TEXTO HAZ CLICK DENTRO DEL CUADRO Y CON EL COMANDO Ctrl+A, SELECCIONA TODO EL CÓDIGO, LUEGO USA Ctrl+C PARA COPIAR)

<!--Start: PDF On Line Script--><br /><br /><script type="text/javascript"><br /><br />var authorId="1213B011-D26C-425F-8B81-D6E798E05769";<br /><br />var pageOrientation="1";<br /><br />var topMargin="0.5";<br /><br />var bottomMargin="0.5";<br /><br />var leftMargin="0.5";<br /><br />var rightMargin="0.5";<br /><br /></script><br /><br /><script type="text/javascript" src="http://web2.pdfonline.com/pdfonline/pdfonline.js"><br /><br /></script><br /><br /><!--End: PDF On Line Script-->

Image by ancawonka via Flickr

¿Qué es una nube de etiquetas móvil?
Es esa nube de palabras que puedes ver moverse en forma redondeada en el sidebar de La taza de café. No son más que las etiquetas de nuestro blog, girando en una imagen animada.

Es un recurso muy práctico que permite que el visitante se fije rápidamente en el contenido de nuestro blog. Al interactuar con las palabras que flotan en la nube de etiquetas se puede acceder, al igual que en una lista de etiquetas convencional, a todas las entradas del weblog relacionadas con la etiqueta seleccionada.

¿Qué debemos hacer?

Para colocar nuestra Nube de etiquetas vamos a "Diseño", pestaña "Edición de html" y buscamos la etiqueta . Esta etiqueta se busca con el comando de teclado Ctrl+F, lo que abrirá al pie de nuestra página una barrita horizontal con una caja de texto, alli debemos colocar el siguiente texto:

(Recuerda: para seleccionar el texto dentro del recuadro que sigue haz click dentro del mismo y con el comando Ctrl+A selecciona todo el texto del interior del cuadro. Luego, con Ctrl+C lo copiaras y debes pegarlo ahora en un txt o documento word)

><b:section class='sidebar' id='sidebar' preferred='yes'>

y mandar a buscarlo. Saldrá resaltado en la página. Justo debajo de él añadimos el siguiente código:

(Recuerda: para seleccionar el texto dentro del recuadro que sigue haz click dentro del mismo y con el comando Ctrl+A selecciona todo el texto del interior del cuadro. Luego, con Ctrl+C lo copiaras y debes pegarlo ahora en un txt o documento word)

<b:widget id='Label50' locked='false' title='Nube de etiquetas' type='Label'><br /> <b:includable id='main'><br /> <b:if cond='data:title'><br /> <h2><data:title/></h2><br /> </b:if><br /> <div class='widget-content'><br /> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/><br /> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div><br /> <script type='text/javascript'><br /> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");<br /> // uncomment next line to enable transparency<br /> //so.addParam("wmode", "transparent");<br /> so.addVariable("tcolor", "0x333333");<br /> so.addVariable("mode", "tags");<br /> so.addVariable("distr", "true");<br /> so.addVariable("tspeed", "100");<br /> so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");<br /> so.addParam("allowScriptAccess", "always");<br /> so.write("flashcontent");<br /> </script><br /> <b:include name='quickedit'/><br /> </div><br /> </b:includable><br /> </b:widget><br />

Damos guardar los cambios y ya podemos ir a ver nuestro blog con la nube de etiquetas móvil añadida.