Colocar una notita o un post-it en la columna lateral del blog

Ya son varios los que me han preguntado cómo poner una notita en el blog, como la que tengo añadida en mi columna lateral, al principio, así que hoy te diré cómo hacerlo.



Usaremos una imagen pequeña  de un post-it, pero igualmente puedes usar otra imagen que servirá para escribir ahí una notita sobre algún evento nuevo del blog, una noticia importante etc.



Empezaremos por la forma más sencilla, y aunque deben tomarse en cuenta algunas cosas que abajo explicaré, es muy rápido y fácil de lograrlo, excepto por algunas diseños de plantillas, que necesitarán, crear una nueva sección.



El truco consiste en poner la nota como fondo al widget que usamos, y luego crear una clase, para ajustar el texto de la nota.



Primero, tienes que tener lista la imagen del post-it o la que vayas a usar como fondo...

Puedes usar esta imagen (copiar la URL), pero de preferencia alójala tu mismo en Blogger. También puedes buscar otra con diferentes colores, formas etc, en esta entrada.



Ahora, veamos como ponerla en nuestro blog ;)

Instrucciones paso a paso

Paso 1. Ve a Diseño ► Elementos de la página, y agrega un gadget con la opción HTML/Javascript, en la columna lateral de tu blog y ponlo en primera posición, escribe el texto que quieras, ponle un título, sólo para identificar el Id del widget.

Paso 2. Ve a edición de HTML de tu plantilla y con ayuda de Ctrl F busca el nombre del título que le pusiste al widget, vamos a suponer que le pusiste Nota, entonces buscarás Nota y estará en esta linea de código:



<b:widget id='HTML1' locked='false' title='Nota' type='HTML'>



En este ejemplo, el id es HTML1, y con él vamos a trabajar.

Nota: si nunca has agregado un widget HTML/JavaScript, el Id del Widget, será HTML1, quise explicar cómo obtener el Id para evitar confusiones.

Paso 3. Vamos a Diseño ► Diseñador de plantillas ► Avanzado► Añadir CSS, y agregamos en el campo correspondiente el siguiente código CSS, asegurándote de dar enter después de una llave de cierre, "}", por ejemplo, para que este sea interpretado. Si lo prefieres, lo pegas en la edición de HTML de la plantilla antes de ]]></b:skin>.

/* Notita o post-it*/

#HTML1 {

background: transparent url(url_de_la _imagen) no-repeat left top;

width: 320px; /*el ancho del widget*/

height: 279px; /*el alto importante para que se vea la imagen completa*/

margin: 0;

padding:0;

}

#HTML1 h2{

display: none; /*aquí eliminamos el título*/

}

.nota{

margin: 0;

padding: 45px 32px 0 24px; /*padding para ajustar el texto*/

font-size: 14px; /*el tamaño del texto*/

color: #2b1f19; /*el color del texto*/

line-height: 140%; 

}

Con el código anterior, estamos identificando a nuestro widget, que es HTML1,  le pusimos la imagen de la nota, y eliminamos el título para que no ocupe espacio y no tenga los estilos de la columna en la que se encuentre, también creamos la clase nota, que nos servirá para mover hacia adrentro el texto que colocaremos, por medio del padding,  para que quede dentro de la notita.



IMPORTANTE: Recuerda editar en el código anterior, el Id si este fuera diferente a HTML1, tal vez sea HTML2, o HTML3 etc....



Paso 4. Guardamos los cambios en APLICAR AL BLOG, o en Guardar Plantilla.



Paso 5. Ahora necesitamos ajustar el texto, para ello, vamos a Diseño ► Elementos de la página, y luego, editamos el widget, agregando la clase que creamos que es nota, entonces el contenido se verá así:

<div class="nota">

aquí todo mi contenido...</div>

Paso 6. Guarda los cambios y listo! ya tiene una nota en tu columna lateral y puedes editar el contenido cada vez que lo necesites =).



Funciona en todos los navegadores, incluyendo IE6 (Internet Explorer 6) salvo por el problema de usar una imagen con fondo transparente.



Puntos importantes

• Si la nota no está en primera posición de la columna, es necesario que el ancho sea igual al ancho de la columna lateral, si es que tenemos fondo o background en el widget de la columna, que es cuando tenemos los widgets separados como en el caso de mi blog, de otro modo el fondo del widget de arriba se irá hacia abajo por un extremo, considerando el ancho de la imagen que utilices en IE7, lo mismo pasará si usas una imagen (la nota) con fondo transparente.


• Si usas una imagen con fondo transparente, IE6 mostrará la transparencia de color gris.

Luego explicaré cómo hacerlo creando una nueva sección.



Tips: Puedes poner varias notas, identificando el widget, para agregarlo en el código y usar la misma clase las veces que quieras.

Hasta la próxima =)