Este truco les servirá para redactar un post o entrada a dos columnas, manera clásica de presentación de contenidos en periódicos y revistas.

Para ponerlo en práctica sólo deberás escribir tu post en "Edición de HTML" en vez del convencional "Redactar". Allí copiarás este código y completarás las dos secciones con tu texto. La sección TEXTO 1 quedará a la izquierda, mientras que TEXTO 2 se leerá a la derecha, como verás en el ejemplo que colocaré más adelante. Puedes manipular el ancho de las columnas cambiando los parámetros numéricos del código.

He aquí el código (cópialo a un documento de texto, preferiblemente de texto plano -txt o bloc de notas-; luego pégalo en tu post, que deberás escribir en "Edición HTML" no en "Redactar"; ve probando cómo queda y si quieres hacerle cambios en "Vista previa")




<table><tbody><tr><td style="PADDING-RIGHT: 15px; MARGIN-TOP: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; WIDTH: 40%; PADDING-TOP: 15px"><p style="TEXT-ALIGN: justify"> TEXTO 1 ...........



</p><td style="PADDING-RIGHT: 15px; MARGIN-TOP: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; WIDTH: 40%; PADDING-TOP: 15px"><p style="TEXT-ALIGN: justify"> TEXTO 2 ..........</p></td></tr></tbody></table>





Acá te dejo un ejemplo de cómo queda. Fíjate que puedes incorporar imágenes, links y cualquier otro recurso que quieras acompañe tu texto en las columnas.

La taza de café Internet está lleno de sitios que se dedican a generar información "de ayuda" para personas que administren webs o blogs sin poseer los conocimientos requeridos. Un blog o bitácora es un sitio web que se actualiza periódicamente, brindando las herramientas básicas de administración web gratuitamente a los usuarios mediante una interfaz sencilla que no demanda conocimientos especializados en diseño o administración web. Mediante estas plataformas, cualquier persona con acceso a Internet puede montar un sitio web propio en tan sólo un par de segundos y comenzar a publicar inmediatamente su contenido en el mismo.

La taza de café es un proyecto de ayuda para incentivar la creación y sostenimiento de bitácoras cubanas. Ponemos nuestros conocimientos al alcance del ciudadano interesado en crear su bitácora, y buscamos soluciones y vías para contrarrestar nuestras desventajas tecnológicas y el hecho de que el acceso a Internet en el país sea prácticamente inexistente.  La taza de café genera material basado en conexiones lentas y en la explotación del correo electrónico (Intranet) como vía para acceder a Internet. Contamos con un Grupo en Grupos Google, desde el que circularemos además programas, tutoriales, plantillas de diseño, entre otros archivos de interés.

Suerte.

Image via Wikipedia

Siguiendo nuestra máxima de "Aprenderás leguaje XHTML o aprenderás lenguaje XHTML" traigo hoy todo lo referente a los atributos xhtml de una imagen. Así, si queremos colocar una imagen como link en nuestro blog o página web (lo cual es muy recomendable si queremos que nuestro sitio sea ligero y no pesado y lento a la hora de abrir) estos son los valores que debemos añadirle para optimizarla a la vista y para que sea interpretada (esto es indexada) correctamente por los navegadores.

Un código XHTML de imagen luce así:




<img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" />


Escribiendo el código anterior, cuya dirección de imagen es la del icono La taza de café, la imagen aparecerá en pantalla tal y como aparece aquí:

Sustituyendo la dirección de mi icono de taza de café por la dirección de alguna imagen subida por ti a un servicio de alojamiento de imágenes (como Flickr o Image Schack) podrás incorporarla a cualquier post de tu blog o en el sidebar (en el post, trabajando en la vista de "Edición HTML" en vez de en la convencional "Redactar", y en caso del sidebar, agregando el elemento de página "HTML/Javascript" con el cuál podrás introducir cualquier código a tu blog en un lugar diferente del que corresponde a las entradas o posts).

Ahora bien, ¿qué atributos debemos o podemos agregar en lenguaje XHTML al código de nuestra imagen? Acá sigue la lista explicada de los atributos de imagen:

Los atributos de la etiqueta IMG (imagen) son: title, alt, width, height, align, hspace y vspace.

• title: se usa para colocar un título a la imagen (es estándar en XHTML). Al poner el mouse sobre la imagen, el texto del title aparece en pantalla, en forma de un pequeño letrero.
• alt: es lo mismo que title, pero siguiendo el estándard de Microsoft (un estándar propio y caprichoso, diferente del universal que es usado por otros navegadores). El término proviene de "texto alternativo". Es necesario poner este atributo independientemente del de title para que Internet Explorer y versiones viejas de otros navegadores lean el título de la imagen. La frase o palabra que pongamos en alt será la que veremos mientras la imagen en cuestión se carga dentro de la página.
• width: es el ancho en píxeles de la imagen. Si nuestra imagen es mayor o menor de lo que pensábamos o quedaría mejor con otras proporciones en nuestra página, podemos manipular sus dimensiones desde este atributo y el siguiente (ancho y alto) y viendo la Vista Previa hasta que quedemos conformes.
• height: la altura de la imagen.
• align: se usa para alinear la foto a la derecha o la izquierda del texto que la acompaña (escribiemos "right" si la queremos a la derecha y left si a la izquierda; si la queremos en el centro escribimos "center")
• hspace: para marcar el espacio horizontal que dejamos entre el texto y el borde de la imagen.
• vspace: para marcar el espacio vertical que dejamos entre el texto y el borde de la imagen.

Veamos ahora todo esto dentro del código de la imagen. Pongo una vez más el ejemplo del icono de La taza:


<img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" title="icono del blog La taza de cafe" alt="icono del blog La taza de cafe" width="80" height="15" align="center" hspace="2" vspace="2"/>



Una nota útil: si queremos colocar una imagen que sea en sí misma un link (al pinchar la imagen se abre una nueva página) sólo debemos agregar el código de un enlace a nuestro código de imagen. El código de un enlace es


<a href="http://ayudacubablogs.blogspot.com">La taza de café</a>




La dirección http://... es la dirección de la web a que queremos se vaya al pinchar la imagen (he puesto la dirección de La taza de café).
Donde pongo La taza de café puede ir un texto o una imagen, lo que se quiera que aparezca como link.

Así, si agrego un link a La taza de café a la imagen de mi icono el código será el siguiente:


<a href="http://ayudacubablogs.blogspot.com" target="_blank" ><img src="http://img188.imageshack.us/img188/8810/latazadecaf.png" title="icono del blog La taza de cafe" alt="icono del blog La taza de cafe" width="80" height="15" align="center" hspace="2" vspace="2"/></a>






Bueno, creo que haz aprendido bastante XHTML por hoy. Espero que lo apliques en tu página. Suerte con ello.

Image via Wikipedia

Por lo general cuando se cambia la plantilla de diseño en Blogger se pierden muchas de cosas que habíamos agregado al sidebar (imágenes, widgets, utilidades de blogger...). Sin embargo, hay una forma de cambiar nuestra plantilla tantas veces querramos sin que se mueva una sola de nuestras atracciones del sidebar.

He aquí lo que debemos hacer:

1) Vamos a “DISEÑO” en nuestro Escritorio de Blogger, allí pinchamos la pestaña “EDICIÓN DE HTML“.
2) Seleccionamos “Expandir plantillas de artilugios” y buscamos en el código la siguiente linea (ayudándonos con el comando Ctrl+F): b:section class=’sidebar‘ id=’sidebar‘ preferred=’yes’>

3) Debajo de esta línea encontraremos el código que controla nuestros widgets. Veremos algo parecido a esto (ten en cuenta que he puesto los artilugios Archivo del blog y Datos personales como ejemplo, pero probablemente tengas más que esos; debes asegurarte de que estás seleccionándolos a todos para que ninguno se pierda):




<b:widget id="’BlogArchive1‘" locked="’false’" title="’Archivo" del="" blog‘="" type="’BlogArchive‘/">

<b:widget id="’Profile1‘" locked="’false’" title="’Datos" personales‘="" type="’Profile‘/">

</b:widget></b:widget>


4) Copia ese trozo de código: con ello habrás guardado tus widgets y habrás dejado tu sidebar a salvo de cualquier cambio de plantilla. Guarda el código copiado en un documento de texto, preferiblemente en uno de texto plano, como txt.
5) Una vez que hayas decidido cuál será tu nueva plantilla no te preocupes si sale el aviso de que tus widgets se perderán; acepta todo y guarda tu nueva plantilla.
6 y último) Ya instalada tu nueva plantilla colocaremos nuevamente nuestro sidebar pegando el código guardado detrás de la siguiente línea: b:section class=’sidebar‘ id=’sidebar‘ preferred=’yes’>

Debe quedar de esta forma:


<b:section class="’sidebar’" id="’sidebar‘" preferred="’yes’">

AQUI DEBE IR TU CODIGO

</b:section>




Y eso debe ser todo. Si tienes algún problema no dejes de escribirme. Ahora puedes cambiar la plantilla de diseño de tu blog o sencillamente probar cómo se vería bajo otro diseño del que aún no estás seguro o segura sin perder los cambios de tu página.
Suerte con todo. Y si tienes algún problema no dejes de escribirme.

Image via Wikipedia

Hace poco dediqué un post de La taza de café al cómo hacer para que los nevagantes impriman y guarden los posts de nuestro weblog en pdf. En ese post expliqué varias maneras de implementar esta funcionalidad en el blog.
Ahora les dejo otra que hace poco hallé en la red y que tiene la particularidad de ser un botón que funciona para ambas cosas, tanto para imprimir como para guardar nuestras entradas en pdf.

Les dejo varios diseños de este botón que al pincharse lleva a la página del servicio Print Friendly, que permite escoger entre las dos opciones (imprimir o guardar el blog en pdf) e incluso hacer las dos cosas si queremos.

Cada uno de estos botones puede colocarse en la barra lateral o justo antes de las entradas, para que salga siempre a loa cabecera de nuestra última publicación. Para colocarlo en uno de estos dos lugares sólo se tiene que llevar el código a un nuevo elemento de página (Diseño, luego "Elementos de la página", luego "Agregar nuevo elemento"; escoger "HTML/Javascrpt") y una vez agregado a los elementos de nuestro blog colocarlo en el lugar donde querramos aparezca.

Si por el contrario se desea que el código salga al final de cada entrada debe pincharse la pestaña de Diseño "Edición de HTML", y allí buscar dentro de nuestra plantilla (ayudándonos con Ctrl+F) la frase post-footer-line-3'> ; justo después de la comilla que cierra debe colocarse el código de nuestro botón.

Estos son los diferentes íconos de Print friendly de los que pueden escoger el que más les convenga:


Botón pequeño, "print / pdf":


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page or generate PDF" style="text-decoration: none;"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-print-icon.gif" alt="Print"/><span style="font-size: 12px; color: #55750c;">Print <img id="printfriendly" src="http://cdn.printfriendly.com/pf-pdf-icon.gif" alt="Get a PDF version of this webpage" style="border:none; padding: 0;" /> PDF</span></a></div>


Botón mediano "Print friendly"


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-button-big.gif" alt="Print"/></a></div>



Botón más pequeño "print / pdf"


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-button-both.gif" alt="Print"/></a></div>



Otro donde se lee "Print friendly", más el icono convencional de imprimir:


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page" style="text-decoration: none;"><img id="printfriendly" style="border:none; padding:0;" src="http://cdn.printfriendly.com/pf-icon.gif" alt="Print"/><span style="font-size: 15px; color: rgb(85, 117, 12);">Print Friendly</span></a></div>





Última opción, por si se desea sólo colocar un texto como link o si se quiere usar una imagen de botón propio (en el caso de sólo texto como link usar este código cambiando la frase que coloco en mayúsculas para que sea más visible al final del código: Print Friendly, por otra que querramos usar/ en el caso de querer colocar una imagen propia a modo de botón esta debe subirse a un servicio de alojamiento de imágenes como Image Shack, y colocarse la dirección dentro del siguiente código, sustutuyendo la que aquí aparece ; después debe colocarse el código anterior completo luego de frase "text-decoration: none;"> del código que sigue):


<div id="pfButton"><link rel="stylesheet" href="http://cdn.printfriendly.com/printfriendly.css" type="text/css" /><script src="http://cdn.printfriendly.com/printfriendly.js" type="text/javascript"></script><a href="http://www.printfriendly.com" id="pfLink" onclick="window.print(); return false;" title="Print an optimized version of this web page" style="text-decoration: none;"><span style="color: rgb(85, 117, 12);">PRINT FRIENDLY</span></a></div>