Meta microcosmos

Formulario de comentarios Blogger

2008-06-29T11:30:00.005+02:00

Por fin los chicos de Blogger han hecho caso a los millones de peticiones de tener un formulario de comentarios decente! Ya puedes tener tu formulario de comentarios, limpio y simple, debajo de las entradas en la página individual de cada una de las entradas. Como podeis comprobar, yo ya tengo el mío y gracias a las explicaciones de Rosa funciona de maravilla!

Todos los blogs de ayuda para Blogger se han lanzado como locos a experimentar con las posibilidades de la novedad; así que en vez de reescribir lo que ellos ya han explicado mucho mejor que yo, voy a hacer una pequeña guía para el nuevo formulario de Blogger y para personalizar los comentarios con los enlaces a todos los trucos que he implementado

- Si ya teníais el formulario de comentarios incrustado debajo de las entradas mediante un iframe, antes debeis quitarlo. Sólo hay que seguir en sentido inverso las instrucciones para implementarlo.

- Cómo implementar el nuevo formulario de comentarios debajo de las entradas.

- En inglés: How to add a comment form beneath your posts.

- Si algo del nuevo formulario no me gustaba era que cuando en la portada del blog clicabas sobre X Comentarios, te llevaba al formulario de comentarios y no al principio de los comentarios. Esto puede cambiarse para que el enlace te lleve a los comentarios y no al formulario (que estará al pie de estos).

- Ahora tiene mucho más sentido (es muy necesario, diría yo) darle estilo a los comentarios para que hagan juego con el estilo de tu blog.

- Incluso puedes destacar los comentarios del autor del blog para que se diferencien de los demás.

- Ya que estamos personalizando los comentarios, uns buena opción es eliminar los iconos de Blogger que preceden al nombre del comentarista y cambiarlos por otros.

- También se puede cambiar el "dijo..." que sigue el nombre del comentarista.

- Y añadir el avatar de cada comentarista (en inglés) al lado de su comentario. Gracias, fernandooo1!

- Siempre resulta útil numerar los comentarios, de manera que el número sea también un enlace a cada comentario concreto.

- Por último, podemos modificar el propio formulario de comentarios (aunque de manera limitada, ya que es un iframe que sólo controla Blogger).

Cris, espero que algo de esta recopilación te sirva para personalizar los comentarios!

Más plantillas para Blogger

2008-03-19T01:28:00.005+01:00

Aunque en la entrada sobre cambiar de plantilla hice un listado muy extenso de sitios donde encontrar plantillas para Blogger, hoy quiero daros a conocer uno muy especial. Se trata de BTemplates, un nuevo proyecto de Blog and Web que pretende reunir todas las plantillas que han creado (o modificado a partir de una de WordPress) para Blogger en un solo sitio. Tienen más de 200 diseños para descargar y prometen actualizarlo con más de forma constante.

Esta nueva página funciona como un showcase: se puede navegar por las plantillas de acuerdo a su temática (por ejemplo: deportes, películas, animales, chicas, etc) o por las propiedades del diseño (por ejemplo: número de columnas, colores dominantes, estilo general, adaptación o no de wordpress, etc). Cada plantilla puede descargarse de forma directa sin necesidad de registrarse e incluye, aparte de una demo en funcionamiento, otra información que podría ser útil, como el nombre y enlace del diseñador original y del autor de blogger para solicitar soporte si es necesario.

Seguro que encontrais alguna que os guste!!!

Ranking de mejores comentaristas para Blogger

2008-03-06T16:41:00.008+01:00

Te gustaría que en tu sidebar apareciera una lista de las personas que dejan más comentarios en tu blog? A mí me encantaría, ya que creo que es un reconocimiento para ellos y además anima a los demás a comentar. Pero buscando por Internet sólo he encontrado soluciones que no me convencían: o no eran exactamente lo que yo andaba buscando, o había que hacerlo a mano, o era demasiado complicado...

Pero en Blogger Buster por fin he encontrado un artilugio que me permite mostrar las 10 personas que más han comentado en el blog (con el número de comentarios que han hecho entre paréntesis), y muy fácilmente: gracias al instalador automático de artilugios de Amanda lo podrás hacer con sólo un click! Además, funciona en IE6+ y Firefox.

Aunque también tiene sus cosas malas: cada nombre de la lista es un link no a su blog, sino al último comentario que haya dejado en tu blog, y si, como es mi caso, respondes a todos los comentarios, no dudes que tu nombre será el primero del ranking! Pero aún así, creo que es el mejor que he encontrado, así que vamos a ver cómo se instala!

En este script, donde pone Widget Title escribe el título que deseas que tenga tu nuevo artilugio y donde pone Blog URL añade la dirección de tu blog (sin http://, eso ya lo añade el artilugio) y clica sobre el botón Customize. No pasará nada, sólo que ya estará disponible el botón de Add to blog>>. Clica sobre él y se te abrirá una nueva pestaña con la página de Blogger de Añadir elemento de página. Selecciona el blog en el que lo quieras poner, clica sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees de tu sidebar!

Si deseas variar el número de personas que salen en la lista también puedes hacerlo: en Diseño/Elementos de la página, clica sobre Editar este artilugio; verás un código como éste:
<script type="text/javascript"> function pipeCallback(obj) { document.write('<ol>'); var i; for (i = 0; i < obj.count ; i++) { var href = "'" + obj.value.items[i].link + "'"; var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>"; document.write(item); } document.write('</ol>'); } </script> <script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_ id=720a4578c7b83dfce64615cb0ad3c642&url=http%3A%2F%2F NOMBRE_DE_TU_BLOG.blogspot.com&num=10" type="text/javascript"></script>

Casi al final, después de NOMBRE_DE_TU_BLOG aparece &num=10" Sólo tienes que cambiar el número después del signo = por el que desees, guardar cambios y listo!

Este artilugio está basado en Yahoo Pipes; si deseas más información sobre ellas, quitar tu nombre del ranking de comentaristas o probar otra opción que contabiliza todos los comentarios, te remito a las estupendas explicaciones de ESTA ENTRADA de El Escaparate de Rosa.

Personaliza tu plantilla (9): dando un toque de color

2008-03-05T23:27:00.004+01:00

Si utilizando las herramientas de la entrada anterior habeis elegido ya vuestra paleta de colores, sólo falta aplicarla! En esta entrada vamos a ver cómo colorear cada parte del blog, con lo que se puede conseguir rápidamente unos resultados asombrosos; aquí va un ejemplo (algo chillón para que se diferencie bien cada parte):

Este paso además nos servirá para aprender a familiarizarnos con la localización de las diferentes partes del blog, lo que nos será muy útil para posteriores cambios.

Para esta parte, unos cuantos consejos: será fundamental que useis y abuseis de la vista previa, porque es muy difícil encontrar una buena combinación de colores. Deben contrastar entre ellos, pero no matarse. Y recordad que un blog es principalmente un lugar de lectura, así que sed misericordes con vuestros lectores y elegid colores que no hagan lagrimear los ojos.

Y ahora, dónde hay que hacer cada cambio? Nos situamos en Diseño/Edición de HTML y buscamos las siguientes líneas:

- El fondo del blog (en el ejemplo, en mostaza):
body { background:$bgcolor;
Sólo hay que sustituir $bgcolor por el código hexadecimal del color elegido para el fondo del blog, teniendo cuidado de anteponerle el símbolo #, así por ejemplo: background:#D8D8D8;

- El outer-wrapper: es el cuerpo del blog, envuelve las entradas y la sidebar, incluyendo también el header o cabecera y el footer o pie del blog (en el ejemplo, en azul)
#outer-wrapper {
Justo debajo de esta línea añade esta otra, con el código hexadecimal del color elegido en vez de códigohexadecimal, cuidando de no borrar el símbolo #:
background:#códigohexadecimal;
Por ejemplo background:#D8D8D8;

- El main-wrapper: el fondo de las entradas (en el ejemplo, en crema)
#main-wrapper {
Procedemos de la misma forma que en el outer-wrapper, añadiendo justo después la siguiente línea cambiando donde pone códigohexadecimal por el de nuestro color y manteniendo el símbolo #:
background:#códigohexadecimal;
Por ejemplo background:#D8D8D8;

- El sidebar-wrapper: el fondo de la sidebar o barra lateral (en el ejemplo, en verde)
#sidebar-wrapper {
Y hacemos exactamente igual que hemos hecho con el outer-wrapper y el main-wrapper.

Después de muchos cambios y probatinas usando la vista previa, cuando estemos satisfechos con la combinación de colores guardamos la plantilla y ya tenemos lleno de color el blog! Ahora podeis hacer otros cambios de colores, como el del título y la descripción del blog, los títulos de las entradas y de la sidebar, los enlaces... lo que se os ocurra!

Personaliza tu plantilla (8): con colores

2008-03-04T09:26:00.000+01:00

Para personalizar nuestro blog y hacerlo totalmente único a veces basta con cambiarle los colores. Es un cambio sencillo y que lleva pocos minutos, pero que puede conseguir resultados espectaculares. El secreto es dar con una buena combinación de colores, lo que puede resultar muchísimo más complicado que aplicarlos. Si, como yo, no teneis lo que llaman "sentido del color", aquí van una serie de ayudas para encontrar la paleta perfecta:

- ¿Por qué no seguir la moda? Pantone está considerado el referente mundial que dicta cada temporada las tendencias en color. En su comunidad online puedes encontrar inspiradoras combinaciones. Y ésta es su paleta para esta primavera 2008:
En Fashiontrendsetter también publican cada temporada sus tendencias en color, en varias combinaciones muy apetecibles:
- La herramienta imprescindible para todo aquel que trabaje con colores es ColourLovers. Aquí puedes encontrar las últimas tendencias de colores para diseño web y multitud de paletas. Puedes crear las tuyas propias, incluso desde una imagen; y lo mejor, proporcionan los códigos hexadecimales de cada color!

Personaliza tu plantilla (7): para no perder nada en el traslado

2008-03-03T15:28:00.002+01:00

Si quieres crear una plantilla partiendo de cero basta con crear un blog de pruebas y ya puedes comenzar a implementar los cambios. Pero si quieres modificar la plantilla que ya tienes y no perder los cambios que ya has hecho en ella (trucos, scrips...) ni los artilugios de la sidebar cuando hagas el "traslado", la solución es mucho más simple de lo que parece: trasladar la plantilla actual de tu blog al blog de pruebas. ¿Cómo lo hacemos?

Antes de nada, en el blog de pruebas, sitúate en Diseño/Elementos de la página y elimina todos los artilugios de la sidebar para no duplicarlos. Y ahora, traslademos la plantilla; tienes dos formas de hacerlo:

- EN TU BLOG "BUENO", sitúate en Diseño/Edición de HTML y clica sobre el enlace Descargar plantilla completa; descárgala a tu ordenador y cámbiale el nombre si es necesario para localizarla más fácilmente. Ahora ve a TU BLOG DE PRUEBAS y en Diseño/Edición de HTML donde pone Carga una plantilla desde un archivo de tu disco duro clica sobre Examinar; busca la plantilla que acabas de descargarte y clica sobre Subir (si te pide que confirmes la supresión de artilugios, acepta). Clica sobre Guardar plantilla.

- EN TU BLOG "BUENO", sitúate en Diseño/Edición de HTML y expande artilugios; selecciona todo el código de la plantilla y cópialo. Ahora ve a TU BLOG DE PRUEBAS y en Diseño/Edición de HTML expande artilugios, selecciona todo el código de la plantilla y bórralo, y ahora pega en la ventana en blanco el código de que has copiado; si te pide que confirmes la supresión de artilugios acepta y clica sobre Guardar plantilla.

Ahora ya tenemos en nuestro blog de pruebas la apariencia del blog que deseamos rediseñar, y ya puedes comenzar a aplicar los cambios. Cuando hagamos el traslado de plantilla después de realizar todas las modificaciones no habremos perdido los trucos y scripts que ya habíamos implementado.

Pero... qué pasa con los artilugios de la sidebar? Aparecen los de nuestra actual plantilla, pero vacíos; esto es porque su contenido se guarda en el blog original. Cuando hayas finalizado todos los cambios en el blog de pruebas y traslades la nueva plantilla al blog original, los identificadores de los artilugios serán los mismos y la plantilla llamarán a su contenido, que se mostrará normalmente en el blog.

Personaliza tu plantilla (6): en el blog de pruebas

2008-03-03T08:16:00.000+01:00

Tener un blog de pruebas siempre es útil para probar los cambios en la plantilla y otros trucos antes de implementarlos en el blog principal. Y si decides ponerte manos a la obra y personalizar tu plantilla, yo diría que es esencial que no vayamos haciendo los cambios sobre el propio blog que deseemos personalizar, sino sobre un blog de pruebas. ¿De verdad es necesario? Pues sí; este sistema de hacer las cosas tiene muchísimas ventajas:

- Nos permitirá seguir manteniendo nuestro blog en funcionamiento y accesible para los lectores, sin afectarlo de ninguna manera con cambios constantes o errores.

- No hay que preocuparse si "accidentalmente" nos cargamos la plantilla con nuestras probatinas; si cometemos un error sin solución o uno de los trucos que probamos estropea algo, simplemente podemos borrarla y crear otra.

- Nos da la tranquilidad de poder tomarnos el tiempo que nos haga falta y cambiar, mover y modificar cuanto queramos las veces que queramos hasta que todo esté a nuestro gusto.

- Podemos comprobar que nuestra nueva plantilla está totalmente libre de errores y todo funciona de forma correcta antes de "presentarla en sociedad"

- Cuando hayamos terminado la personalización, podremos trasladar nuestra nueva plantilla al blog principal en pocos minutos, y así tus visitas apenas se verán afectadas.

El sistema sólo tiene una pequeña desventaja: que al instalar una nueva plantilla en nuestro blog principal podemos perder los artilugios de la sidebar. Pero en una próxima entrada veremos la forma de no perder estos artilugios en el proceso de cambio de plantilla.

Y ahora que ya os he convencido totalmente de usar el blog de pruebas... cómo lo creamos? Por suerte, Blogger nos deja crear en nuestra cuenta gratuita tantos blogs como deseemos y de una forma muy sencilla. Sólo hay que dirigirse al panel de Blogger estando logueado y clicar sobre el enlace Crear un blog; elegimos un nombre y una URL e introducimos el código de verificación. Ahora hay que elegir la plantilla (aunque nos durará poco!) Elegimos la Minima porque es la más diáfana y en la que se localizan mejor los códigos... y ya tenemos nuestro blog de pruebas!

En la siguiente pantalla te invitan a redactar tu primera entrada; hazlo, ya que te será muy útil tener unas cuantas entradas en el blog para comprobar el efecto de los cambios. Para ello te recomiendo el generador de textos "Lorem Ipsum". Crea con él varias entradas, y también unos cuantos comentarios de prueba con los que probar los cambios en ellos.

Ahora vamos a configurar el blog:
- Ve a Configuración/Básico y busca ¿Deseas añadir tu blog a nuestras listas?, y elige "NO"; haz lo mismo en ¿Deseas permitir que los motores de búsqueda encuentren tu blog?: elige "NO" y guarda los cambios.
- Ve a Configuración/Permisos y elige quién quieres que pueda ver el blog: recomiendo o "Cualquiera" (aunque no será fácil encontrarlo si lo escondes en tu perfil" o "Únicamente autores del blog", con lo que sólo tú tendrás acceso.
- Si quieres que este blog de pruebas no aparezca en la lista de blogs de tu perfil, vuelve al panel de Blogger, clica sobre Editar perfil y busca el enlace Seleccione los blogs que desea mostrar; entonces verás la lista de todos tus blogs y podrás desmarcar los que no quieres que sean visualizados en tu perfil.

Ya tenemos nuestro blog de pruebas completamente configurado. Cuando termines de personalizar tu plantilla y la traslades a tu blog, puedes eliminarlo fácilmente situándote en Configuración/Básico y clicando sobre el enlace Suprimir este blog que está justo al final de la página. Una vez que cliques, el blog de pruebas se borrará para siempre y no podrás recuperarlo, por lo que asegúrate de haber trasladado todo antes de hacerlo!

Personaliza tu plantilla (5): recursos gráficos

2008-03-02T20:50:00.001+01:00

Imágenes, fondos, iconos... Si has decidido personalizar tu plantilla los necesitarás para decorar y darle un toque especial. Aunque en entradas posteriores iré dando enlaces para estos recursos, aquí os dejo unos cuantos que os pueden ser útiles para ir buscando. Úsalos de acuerdo con las condiciones de licencia de cada uno!

- Para fotografías y otras imágenes:
Stock Exchange: miles de fotografías gratis y libres de derechos; es necesario crear una cuenta para descargarse las imágenes, pero merece la pena.
DeviantART: aquí podrás encontrar de todo, sus archivos son tan extensos que a veces dificulta la navegación; pero merece la pena. te sugiero que hagas búsquedas concretas como "textures" o "backgrounds", por ejemplo.
StockPhoto: imágenes libres de derechos aunque de pago; pero en algunos casos puede merecer la pena gastarse 1€ en ésa que era justo lo que andábamos buscando.
Y por supuesto, el buscador de imágenes de Google puede sacarnos de más de un apuro.

- Para los fondos:
Nackvision
Squidfingers
Barracuda
RepeatXY: búsqueda por colores
Background Archives
Absolute Backgrounds

- Para los iconos:
Iconlet
Iconfinder
Smashing

- GIFs animados (usar con moderación):
Aardvark Animations
Glitter Graphics
Y si quieres editarlos tienes la utilidad online de GIFWorks

- Dividers
Gem@blog
Glitter Graphics

- Botones:
Dynamic Drive: tipo web 2.0
GRSites

- Headers o cabeceras:
Free web page headers
Blogger talk
100pixel
BGThemes
Free headers
O puedes probar a hacerte tu propio logo

- Fuentes (tipos de letra)
DaFont.com
Absolut Fonts
SimplyTheBest

Espero que encuentres material más que suficiente!

Personaliza tu plantilla (4): herramientas indispensables

2008-03-01T18:35:00.002+01:00

Antes de ponernos a personalizar nuestra plantilla de Blogger, es conveniente que nos aseguremos de tener a mano una serie de sencillos recursos y herramientas que nos serán muy útiles en el proceso:

- Un blog de pruebas: como ésta es a mi entender la principal herramienta, dedicaré una entrada completa a explicar por qué es tan necesario y cómo crearlo y configurarlo.

- Un editor de texto sin formato: básicamente para copiar y editar códigos de tu plantilla, guardar enlaces... Con el Bloc de notas de Windows o alguno similar hay más que suficiente; en Windows lo encontrareis en Inicio/Todos los programas/Accesorios. Tenedlo siempre a mano.

- Almacenamiento de archivos: ya que Blogger no permite alojar scripts o imágenes grandes a sus usuarios, tener una cuenta en algunas de las muchas páginas que permiten alojar archivos online es casi imprescindible. Puedes utilizar por ejemplo Googlepages, en el que puedes hacerte una cuenta con los mismos datos de acceso de tu cuenta de Blogger o Gmail; esto resulta muy recomendable sobre todo para los scripts. Pero ya que tiene el ancho de banda limitado, para las imágenes u otros archivos (música, favicon) te recomiendo que utilices cualquier otro servicio de almacenamiento online, del que puedes encontrar varios gratuitos en Internet con diferentes capacidades y características. Yo personalmente uso Fileden; hay que crearse una cuenta para alojar archivos, pero es gratuito, bastante fiable y ofrece 1Gb de espacio, más que suficiente para las imágenes y demás archivos de nuestra plantilla.

- Acceso a más de un navegador: es increíble lo que cambia el aspecto de un blog en diferentes navegadores (sobre todo en Firefox e IE6 y anteriores), por eso es muy recomendable comprobar el aspecto de tu blog en varios navegadores. Si tienes instalados varios te será muy útil ir visualizando cómo se ven los cambios en ellos; y si aún usas Internet Explorer, te recomiendo encarecidamente que descargues y uses Firefox, ya verás qué diferencia!
Pero si por alguna razón prefieres seguir usando un solo navegador, puedes utilizar la herramienta online BrowserShots, un servicio gratuito que te muestra capturas de pantalla en distintos navegadores simplemente introduciendo la URL.

- Un programa de edición de imágenes: aunque no es imprescindible, sí resulta muy recomendable editar algunas de las imágenes que usaremos en nuestra nueva plantilla. O incluso crear nuestro propio fondo, header o botones, eso sí que es personalización extrema! Para ello podemos usar programas como Photoshop, CorelDraw o alguno similar, en los que es fácil incluso sin conocimientos previos conseguir buenos resultados (y si tienes conocimientos, una imagen verdaderamente profesional); además, en Internet puedes encontrar multitud de manuales para su uso. Si no posees ningún programa de edición de imágenes, puedes descargarte alguno gratuito de código abierto como el GIMP. Y para ediciones sencillas de las imágenes de tus entradas, puedes utilizar alguna herramienta online como Free Online Image Editor o Pikifx.

Lo teneis ya todo a mano? Bien, el siguiente paso, si ya tienes claro la imagen futura que deseas que tenga tu blog, es buscar material; recursos para ello en la siguiente entrada!

Personaliza tu plantilla (3): la inspiración

2008-02-19T16:22:00.009+01:00

Antes de ponernos a personalizar nuestra plantilla, tenemos que tener claro qué aspecto queremos que tenga. Quizá luego a lo largo de proceso acabemos con un resultado totalmente diferente al que imaginamos al principio... pero necesitamos una idea para empezar a trabajar sobre ella.

En mi opinión, el diseño de un blog debe ir ligado a su contenido; me resultan muy atractivos los blogs en los que puedes averiguar de un vistazo su temática. Pero como cualquier decisión sobre el aspecto de tu blog, ésta es una elección muy personal.

Si estás falto de ideas o de imaginación y no sabes por dónde empezar, para inspirarte puedes echar un vistazo a estas páginas que recopilan los mejores diseños web; siempre puedes encontrar alguna idea interesante mientras te mueres de envidia...
·Web Designer Wall
Unmatched Style
·Best Web Gallery
·Web Design Gallery

Según Nick La de N.DesignStudio, las técnicas que actualmente marcan tendencia son:

Acuarelas, que dan un efecto sutilmente elegante y muy natural

Collage, sobre todo en blogs femeninos; superposición de varias imágenes

Colores brillantes y vibrantes, como el magenta, los naranjas...

Escritura a mano, aspecto de cuadernos, apuntes, libros de dibujos.

Importancia de la tipografía como una decoración más del blog

Espero que hayais encontrado alguna buena idea para empezar a trabajar!

Personaliza tu plantilla (2): Sin conocimientos previos

2008-02-18T12:10:00.005+01:00

Para personalizar nuestra plantilla partiendo de una preconfigurada de Blogger hasta que quede casi irreconocible, totalmente original, no se necesitan conocimientos previos de diseño web ni de HTML. Basta con seguir unas pequeñas reglas: guardar la plantilla antes de hacer ningún cambio, seguir cuidadosamente las instrucciones, usar la vista previa para comprobar el resultado de los cambios y guardarlos cuando estemos satisfechos con ellos. Sólo eso... y algo de paciencia; muchas veces los trucos no nos saldrán a la primera, tendremos que modificar una y otra vez ciertos aspectos. Pero atendiendo a estas reglas generales al final conseguiremos exactamente lo que deseábamos.

Pero el saber no ocupa lugar, y no está de más tener ciertos conocimientos de lo que nos traemos entre manos. O, al menos, saber dónde consultar nuestras dudas. Así que, aunque en absoluto es imprescindible, conviene tener a mano alguna ayuda técnica en forma de manuales:

"Guía de trucos para personalizar plantillas Blogger": un ebook de Amanda de Blogger Buster que he descubierto gracias a Blog and web en el que encontrareis las técnicas principales para diseñar vuestra propia plantilla; aunque está en inglés, incluye muchas imágenes y ejemplos, así que es fácil entenderlo. El ebook se puede descargar gratuitamente en PDF bajo una licencia CC by-nc-nd clicando sobre el siguiente enlace:
DESCARGAR EL EBOOK
Adicionalmente puede descargarse un paquete comprimido con Winzip con todas las plantillas e imágenes usadas en el manual:
DESCARGAR EL PAQUETE ADICIONAL

XHTML+CSS, de una vez!: Nooo, no salgais huyendo nada más leer el título. Este manual, que descubrí gracias a La Bloguería, está escrito por BenKo en clave de humor, con un lenguaje sencillo que os hará entender todo sin dificultades sin ninguna clase de conocimientos previos. Ya vereis que os será muy muy útil!
DESCARGAR EL MANUAL EN PDF
CONSULTARLO ONLINE

Espero que ahora ya no tengais excusa para no personalizar vuestra plantilla!

Personaliza tu plantilla (1): ¿Por qué?

2008-02-17T11:40:00.002+01:00

Aunque los blogs son principalmente espacios de lectura y el contenido es lo más importante, no hay que descuidar nunca su imagen. Existen millones de blogs en la blogesfera y es importante que nos distingamos del resto. La mayor parte de nuestras visitas llegan desde un buscador para informarse sobre un tema en concreto, y su diseño es una herramienta muy poderosa para que estas visitas ocasionales se conviertan en lectores asiduos. Un blog gana muchos enteros si posee una buena imagen, hace que sea atractivo visitarlo. Y no sólo cuenta la originalidad del diseño, también son muy importantes el orden y la facilidad de navegación por las distintas entradas.

Nuestro blog es un espacio muy personal, donde volcamos nuestras experiencias, recogemos lo que nos gusta y lo que no; por tanto, desde mi personalísimo punto de vista, cada blog debe tener un diseño personalizado, que se ajuste a su contenido, pero también que refleje los gustos del autor.

Es cierto que en Internet tenemos a nuestra disposición miles de plantillas para Blogger, entre la que es fácil encontrar una que nos guste; si te decantas por la opción de cambiar de plantilla en ESTA ENTRADA encontrarás instrucciones y una extensa lista de enlaces donde encontrar plantillas. Pero... ¿no es mucho más personal hacer una que sea sólo y exclusivamente nuestra? Por supuesto que sí; y además, mucho más divertido.

Por todo ello, con esta entrada voy a comenzar una serie dedicada a personalizar la plantilla del blog, sin necesidad de saber nada de diseño o HTML. En realidad, lo que haremos será partir de una plantilla de Blogger (en este caso de la Minima, ya que es la más diáfana, pero se puede personalizar cualquier plantilla) e ir añadiendo modificaciones hasta que quede... irreconocible! Totalmente personalizada y original.

¿Os apetece conseguir una imagen exclusiva para nuestro blog? Pues allá vamos.

Cambiar de plantilla

2008-02-16T00:46:00.000+01:00

Cambiar nuestra plantilla por otra de las miles que podemos encontrar para Blogger no es tan difícil si lo hacemos con cuidado y seguimos paso a paso las instrucciones. Así que vamos a ello:

Lo primero que hay que hacer es guardar nuestra plantilla actual por si algo no saliera bien o no nos gustase el cambio. Para ello nos situamos en Diseño/Edición de HTML y clicamos sobre Descargar plantilla completa. También tenemos que hacer una copia de todos los artilugios que hemos añadido en la sidebar, ya que desaparecen al instalar una nueva plantilla; para ello hay que abrirlos desde Diseño/Elementos de la página y copiar su contenido en el bloc de notas para poder volver a pegarlos una vez instalada la nueva plantilla. Algunos de ellos como el perfil o la lista de blogs no podrás copiar su contenido, tendrás que añadirlos a mano después, por lo que te recomiendo que hagas una lista con todos los elementos de tu sidebar para no olvidar ninguno.

- Si la nueva plantilla que has elegido viene contenida en un archivo, tendrás que descargarlo a tu ordenador (a veces está comprimido, descomprímelo) y en Diseño/Edición de HTML donde pone Carga una plantilla desde un archivo de tu disco duro: clica sobre Examinar: busca el archivo descargado a tu ordenador y clica sobre Subir. Entonces te pedirá que confirmes la supresión de artilugios, acepta y ya puedes ver los resultados con la vista previa. Si no te gusta como queda puedes borrar todos los cambios, y si estás satisfecho con el resultado guarda plantilla y ya está!

- Si la forma de ofrecerte la nueva plantilla no es un archivo sino un código la manera de hacerlo varía un poco: selecciona todo el contenido de tu plantilla y suprímelo antes de copiar y pegar el nuevo código. Volvemos a hacer uso de la vista previa y si todo está correcto guardamos la plantilla.

Ahora ya puedes añadir los artilugios y widgets de la sidebar y personalizar tu nueva plantilla para adaptarla a tu gusto.

Aquí os dejo una lista de enlaces donde podreis encontrar plantillas gratuitas para vuestro blog; el listado es bastante extenso e incluye todo tipo de páginas: desde las que ofrecen unas pocas pero muy originales hasta directorios donde vereis miles de ellas, pasando por entradas de otros blogs con más listados. Por supuesto, no las he probado todas, así que os recomiendo una vez más que antes de hacer ningún cambio en vuestra plantilla guardeis una copia!

B-themes
Doxs
Better in Pink!
Plantillas Webblog
Blog and Web
Create blog
Blogger Buster
Ehsany
Blogger Templates
Blogger Themes
Blogger Templates Deceblog
Six Shooter Media
Gecko and Fly
Pyzam
Blogger Templates by Caz
Free Templates
Custom Templates
Plantillas y templates blogger caseras
Find Templates
Mashable
Charm Skins
BlogU
CreateBlog
BloggerTemplates
dzelque
El blog de Lui
Eris
Zona Cerebral
Final Sense
Suck my lolly
Beautiful beta
Free Skins
Blogcrowds
Fresh Blogger
Template Panic
Hackjob
El buscador
JackBook
Kaushal Sheth
Blogger template directory
Layout Gala
Lemonade Designs
Blospot Templates
Noipo
Blog skins
Open Source Web Design
Web JCP
Pannasmontata
Café Junio
Ricardouk
Blog made in Spain
Search Engine Friendly Layouts
Burajiru
Thurst
Hoctro´s
Zoot's Designs

Seguro que encontrais alguna que os guste!!!

Personaliza tu plantilla!!!

2008-02-15T19:00:00.000+01:00

Llevo varios días sin recoger ningún truco, porque por fin me he decidido a personalizar totalmente mi plantilla. Iré desgranando poco a poco todos los cambios por si a alguien le sirven de inspiración. Y os animo a hacer lo mismo con las vuestras!!!

Entradas más populares

2008-02-03T17:25:00.001+01:00

Feedjit es una excelente página de herramientas basadas en analizar el tráfico de tu blog. La última herramienta que ha incorporado y una de las que más me gustan es un widget en el que podemos mostrar nuestras entradas más populares, analizando los últimos patrones de tráfico. Se actualiza constantemente con las nuevas visitas, así mantiene una lista siempre actual de tus entradas más populares.

Para instalarlo, sólo tienes que ir a la página de Feedjit y como primer paso customizar nuestro widget clicando sobre "Customize it..." bajo LIVE PAGE POPULARITY. Se puede elegir un diseño predefinido o cambiar los colores del fondo, texto, título, borde y enlaces clicando sobre cada uno de ellos; también se puede ajustar la anchura para adecuarla a la de nuestra sidebar. El segundo paso, añadirlo a tu sidebar, está automatizado para Blogger, ya que al pulsar sobre "+ Add it!" se abre una ventanita en la que al clicar sobre el logo de Blogger nos redirecciona automáticamente a la página de Blogger de importar elemento de página. Clicas sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees que ocupe en tu sidebar!
También puedes hacerlo a mano, copiando el código generado en el contenido de un nuevo elemento de página HTML/Javascript.

Espero que os resulte útil!

Popbox

2008-02-02T22:41:00.001+01:00

Por fin me he decidido a instalar Popbox, que descubrí gracias a JMiur. Es una solución Javascript para agrandar las imágenes (prueba clicando sobre el logo)... pero tan fácil que lo podemos usar simplemente añadiendo unas pocas líneas de código HTML y sin tener ni idea de HTML!
Sus principales ventajas son que al agrandar la imagen no te hace salir de la página que estás visitando ni abre nuevas ventanas y no tienes que añadir ningún plugin a tus navegadores; además, funciona con IE y Firefox. Con esta utilidad, puedes dotar de varios efectos a tus imágenes: aquí tienes unos cuantos ejemplos de lo que puedes hacer.

Aquí os voy a explicar la forma más fácil y sencilla de utilizarlo: lo primero descarga AQUÍ el archivo en ZIP a tu ordenador, descomprime y sube a tu alojamiento (por ejemplo, Google Pages) el script propiamente dicho y las CSS; o sea, los archivos popbox.js y Styles.css

Ahora ve a Plantilla/Edición de HTML, expande artilugios y busca la siguiente línea:
</head>
Justo antes pega el siguiente código:
<script src="TU_ALOJAMIENTO/PopBox.js" type="text/javascript"></script>
<link type="text/css" src="TU_ALOJAMIENTO/PopBoxStyles.css" />
sustituyendo donde pone TU_ALOJAMIENTO por la dirección de los archivos. Guarda la plantilla.

Ya puedes comenzar a utilizar el script! En cualquier entrada en edición de HTML pega el siguiente código donde quieras situar la imagen:
<img src="URL_imagen"
class="PopBoxImageSmall"
style="width: anchopx; height: altopx;"
onclick="Pop(this,speed,'PopBoxImageLarge');"
pbshowrevertbar="false"
pbshowreverttext="false"
pbshowrevertimage="false" />

en la que tienes que hacer los siguientes cambios según lo que quieras hacer:
·src: sustituye URL_imagen por la URL de tu imagen.
·style: sustituye las palabras ancho y alto por los pixeles que desees que tenga la miniatura.
·onclick: la imagen sólo se agrandará al clicar sobre ella. Si quieres que se agrande sólo con pasar el cursor sustitúyelo por onmouseover.
·speed: define la velocidad de apertura (un valor de 50 es un valor normal, cuanto más alto, más rápido)
·pbshowrevertbar, pbshowreverttext, pbshowrevertimage son atributos especiales que controlan la barra superior de la imagen y pondremos en false para no utilizarlos; respectivamente, al ponerlos en true muestran la barra superior, su texto y una imagen de la derecha de la barra (usa pbRevertText para añadir el texto de la barra superior).
Si quieres añadir texto en la barra inferior usa los atributos pbShowCaption (muestra u oculta la barra inferior repectivamente con true o false) y pbCaption (para añadir el texto).

Un ejemplo: con este código
<img src="http://img209.imageshack.us/img209/8849/ejemploum0.jpg" class="PopBoxImageSmall" style="width: 250px; height: 187px;" onclick="Pop(this,50,'PopBoxImageLarge');" pbshowrevertbar="false" bshowreverttext="false" pbshowrevertimage="false" />
el resultado sería éste:

Pero este script tiene muchas más utilidades; la más interesante, que al clicar sobre la miniatura se amplíe una imagen distinta, lo que nos permite mostrar dos imágenes sin sobrecargar la entrada. Para ello, al código anterior sólo hay que añadirle una nueva línea tal que así:
pbSrc="URL_de_la_segunda_imagen"

Y el resultado sería:

Espero que le encontreis utilidad!

Formulario de comentarios debajo de las entradas

2008-02-01T16:36:00.004+01:00

Una de las cosas que menos me gusta de Blogger y que envidio de Wordpress es el formulario de comentarios, tan anodino, igual para todos y que no pega nada con el resto del estilo del blog.

ACTUALIZACIÓN: Ya está disponible un formulario de comentarios para Blogger tipo WP; por lo tanto, aunque el hack que explico en esta entrada era una muy buena solución "provisional", es mucho mejor poner el nuevo. Si quieres implementarlo en tu blog, echa un vistazo a esta entrada: FORMULARIO DE COMENTARIOS BLOGGER.

Pues bien, la Gran Rosa por fin ha dado con una solución y modificando el HTML de la plantilla ha conseguido que el formulario para dejar comentarios de Blogger no aparezca en una ventana aparte, sino que lo haga incrustado justo al final de cada entrada, donde hasta ahora sólo aparecían los comentarios y el enlace al formulario de Blogger.

Lo reconozco, esta entrada está absolutamente copiada de la suya, pero me parece uno de los mejores hacks de todos los tiempos, así que creo que merece la pena reproducirlo.

Hacerlo es realmente sencillo, pero hay que ser cuidadoso, así que vamos a ello. Lo primero que hay que hacer es situarnos en Configuración/Comentarios y en la opción "¿Mostrar comentarios en una ventana emergente?" seleccionar SÍ y guardar configuración.

Ahora vamos a Plantilla/Edición de HTML, expandimos artilugios y buscamos la siguiente línea:
]]></b:skin>
Justo encima pegamos el siguiente código:
#comenta-outter {
margin: 50px 0;
}

#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}

Estas CSS nos permitirán más tarde personalizar la apariencia del formulario.

Buscamos el siguiente trozo de código:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author'
expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'>
<data:comment.body/>
</span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id'
title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</p>
</b:if>

Y lo sustituimos por este otro:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<center>
<div id='comenta-outter'>
<div id='comenta-inner'>
<iframe align='middle'
expr:src='data:post.addCommentUrl'
frameborder='0' marginheight='0' marginwidth='0' scrolling='auto'
style='width:100%;height:100%;'/>
</div>
</div>
</center>
</b:if>

Igualmente buscamos este otro trozo de código:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

Y también lo sustituimos, en este caso por este otro:
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link'
expr:href='data:post.url + "#comments"' >
<b:if cond='data:post.numComments == 1'>
1 <data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</a>
</b:if>
</b:if>
</span>

Clicamos sobre Guardar Plantilla y ya está! Ya tenemos el formulario de comentarios incrustado debajo de cada entrada en las páginas individuales de ésta. Ahora, cuando un lector clique sobre los comentarios en el pie de las entradas desde la página principal del blog, el enlace le llevará a la lista de comentarios y el formulario integrado (tal y como se ve cuando tenemos configurado el "Abrir formulario de comentarios en una ventana emergente") debajo de la entrada.

Ahora si lo deseamos podemos incluso personalizar el formulario para que case a la perfección con el resto del estilo del blog. Nos situamos de nuevo en Plantilla/Edición de HTML, expandimos artilugios y buscamos el siguiente código que acabamos de añadir:
#comenta-inner {
display: block;
height: 650px;
width: 500px;
margin:0;
border:none;
background-color: #ddd;
}

En él podemos hacer las siguientes modificaciones:
·height: 650px; Es el alto que tendrá el formulario, podemos cambiar el valor por el que necesitemos, pero si tienes muchos comentarios aparecerá una barra de scroll para permitir leerlos todos, y al final de éstos aparecerá el formulario de comentarios. De todas formas, en la parte superior de los comentarios hay un enlace que te lleva directamente al formulario sin necesidad de pasar los comentarios.
·width: 500px; Es el ancho del formulario, que os recomiendo que sea el mismo que el del cuerpo del blog (las entradas).
·border:none; Borde del formulario, está en none (ninguno), pero se puede variar para que aparezca con la siguiente sintaxis:
border:anchopx tipo #colorhexadecimal
Por ejemplo border:2px solid #000;
·background-color: #ddd; El color de fondo del formulario. Se puede poner el color en hexadecimal que mejor case con el estilo de vuestro blog (AQUÍ teneis la tabla de colores hexadecimales que uso yo) Se puede incluso añadir una imagen de fondo al formulario para hacerlo más original, cambiando esta línea:
background-color: #ddd;
por esta otra:
background: url(URL_de_tu_imagen);

Este gran descubrimiento de Rosa acaba con una de las limitaciones de Blogger, así que por favor no dejeis de pasar por El Escaparate para felicitarla!

Poner un fondo a las entradas

2007-12-11T18:39:00.001+01:00

Hacer una entrada un poco diferente a las del resto del blog para dar un toque navideño o para felicitar a nuestros lectores se consigue de una forma sencilla y efectiva simplemente con añadirle un fondo.
El efecto sería más o menos así:

LA CERILLERA (Hans Christian Andersen)

"Era la noche de San Silvestre, la última noche del año. Todo el mundo en la ciudad se apresuraba para llegar pronto a sus casas y refugiarse del frío y la nieve. Iban muy abrigados, y algunos llevaban regalos de Navidad. Tras los cristales ardía la leña en las chimeneas y había agradables aromas de los manjares preparados para la cena de aquella noche.
En medio del ir y venir, un pequeña chiquilla vendía fósforos para ganar algo con que comprar siquiera un pedazo de pan. - Compren fósforos, lo mejor para encender fuego. ¡Compre cerillas, señor! Pero la gente apenas escuchaba su débil voz y desde luego, por nada del mundo sacarían las manos de sus tibios bolsillos con el frío que hacía.
Poco a poco, la noche se fue acercando y la calle se quedó desierta. - ¡Fósforos, fósforos! ¡Cerillas para la lumbre! – Pero la pobre cerillera pronto comprendió que no vendería nada más aquel día. Terminó pronto de contar las escasísimas ganancias. No podía volver así a su casa: sin llevar consigo algo de alimento para su familia..."

El truco original es de Gem@, aunque yo he modificado levemente el código para poderlo usar con una imagen de cualquier tamaño y para ceñir la imagen al texto.

Hacerlo es muy fácil: simplemente hay que copiar el siguiente código en el modo Edición de HTML de una entrada:
<table background="URL_de_tu_fondo" repeat; border="0" cellpadding="0"><tbody><tr><td>AQUÍ VA EL TEXTO BAJO EL QUE QUIERAS QUE APAREZCA EL FONDO</td></tr></tbody></table>
En este código añadiremos la URL del fondo que deseemos poner, pegaremos el texto de nuestra entrada en el lugar indicado y comprobamos con la Vista Previa el efecto. Cuando esté a nuestro gusto ya podemos publicar la entrada.

Como veis, el fondo puede ir sólo en una parte de la entrada, pueden ponerse varios fondos diferentes en una misma entrada e incluso añadir un fondo animado; así podemos conseguir de otra forma diferente que nieve en nuestras entradas más navideñas y no en todo el blog!!!

Rosa hizo una estupenda recopilación de fondos navideños estáticos y animados en esta entrada, y podeis encontrar otros muy adecuados como fondos de entradas en GRSites.

Mensaje personalizado en el post-footer

2007-12-10T14:04:00.001+01:00

A raiz de una pregunta de Daniela sobre cómo poner una firma para que aparezca siempre en las entradas aunque tengas configurado el "Leer más"... acabé haciendo una cosa totalmente diferente, con la inestimable ayuda de Digymap, al que le encanta "destripar" la plantilla de mi blog de pruebas. Espero que nuestro (su) pequeño truquito os sea útil.

La idea es poner un mensaje para felicitar la Navidad al final de cada entrada, pero que aparezca en todas las publicadas hasta ahora y aunque tengamos el hack de contraer las entradas. Podeis ver un ejemplo en mi blog de pruebas y en el pie de esta entrada. Por supuesto, el truco puede usarse para poner cualquier mensaje que queramos; es especialmente útil para poner la firma del autor del blog en vez del aburrido "Escrito por" o "Publicado por" de Blogger. Con esta forma ya no tenemos el inconveniente de que si lo ponemos en la plantilla de las entradas sólo aparecerá en las que publiquemos a partir de añadirlo (Fernando, espero que ahora sí que sí)

Lo primero es conseguir nuestro mensaje o firma a través de la página Mylivesignature (teneis las instrucciones detalladas AQUÍ); cuando lo hayamos configurado a nuestro gusto nos proporcionarán un código HTML.

El segundo paso está basado en el truco de Rosa para poner una foto del autor en el post-footer. Nos situamos en Plantilla/Edición de HTML, expandimos artilugios y buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-1'>
Y justo debajo pegamos el código que nos han proporcionado en mylivesignature, AÑADIÉNDOLE UN <br/> AL FINAL. Nos quedaría más o menos así (en azul lo que añadimos):
<p class='post-footer-line post-footer-line-1'>
<a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54485/383/8BFFCB240C3F16041113181576DF124F.png" style="border: none; background: transparent;"/></a><br/>
<span class='post-author vcard'>
Las líneas en negro ya aparecen en la plantilla, las he puesto sólo para que os sirvan de referencia de dónde colocar el código que hay que añadir, que es sólo lo que está en azul.
Clicamos sobre Vista Previa y comprobamos que el mensaje sale justo al principio del post-footer en todas las entradas. Si todo está a nuestro gusto guardamos cambios y ya está!

El código en azul es el de mi mensajito de *** FELICES NAVIDADES *** que veis en el pie de esta entrada; os lo he puesto tal cual por si quereis usarlo.

Headers navideños

2007-12-09T16:19:00.001+01:00

Otro buen lugar para dar un toque navideño a nuestro blog, aparte de los dividers, es el header. Cambiar el header en el nuevo Blogger es facilísimo, así que por qué no poner uno navideño estos días? Os dejo unos cuantos que me han gustado especialmente; clicad sobre ellos para verlos en su tamaño real y descargarlos a vuestro equipo:

Generador de imágenes navideñas

2007-12-08T18:23:00.001+01:00

En el blog de Evinchi he descubierto una estupenda manera de desear felices fiestas a los lectores de vuestro blog: el generador de imágenes de Imagechef, donde podeis poner el mensaje que deseeis sobre adornos navideños, bolas y muñecos de nieve, regalos, calcetines... incluso sobre el pandero de Santa!
Cuando hayais personalizado vuestra imagen, sólo teneis que pegar el código que aparece al clicar sobre Post to Blog o Myspace en un nuevo elemento HTML/Javascript y arrastrarlo a la posición que desees que ocupe en la sidebar. Pero como ves, también puedes pegarlo sin problemas en una entrada en Edición de HTML.

Efecto de nieve en tu blog

2007-12-07T01:48:00.001+01:00

¿Os apetece que nieve en vuestro blog de Blogger como en éste? Pues gracias al código que nos facilitan en Dynamic Drive es facilísimo! Podeis ver el efecto sobre un fondo que no sea blanco aquí.

Lo primero que teneis que hacer es elegir entre estos copos de nieve (o cualquier otra imagen que os guste) y subirla a un alojamiento de imágenes:

Y el código que vamos a usar es el siguiente:
<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}

if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

Copiamos este código y vamos a cualquier conversor HTML (yo uso el de Blogcrowds) y lo pegamos en la ventana donde dice "Parse HTML". Y en la parte superior del código hay que hacer los siguientes cambios:
- Donde pone //Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
sustituye URL_de_tu_copo por la URL del copo que te guste más.
- Donde pone // Configure below to change number of snow to render
var no = 10;
ponemos el número de copos que queremos que caigan (el número irá en función del tamaño del copo para no dificultar la lectura del blog).
- Donde pone // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0;
si queremos que los copos desaparezcan al cabo de un tiempo, cambiamos el 0 por el número de segundos que deseemos.
- Donde pone // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
elegimos pageheight si queremos que los copos bajen hasta el pie del blog antes de que aparezcan otros, o windowheight si queremos que desaparezcan tras rebasar el borde de la pantalla.

Cuando hayamos hecho los cambios clicamos sobre el botón que pone "Parse".

Vamos a Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
</body>
y justo antes pegamos el código que nos ha proporcionado el conversor HTML.

Clicamos sobre Vista Previa para comprobar el resultado y si queremos vamos probando a cambiar los parámetros variables; cuando estamos satisfechos guardamos cambios y listo! Cuando pasen estas fechas y querais quitarlo, sólo hay que borrar cuidadosamente el código que hemos añadido a la plantilla (Gracias Rosa por la puntualización).

P.D.: Teneis otro truco precioso para que nieve en el blog en El escaparate.

Imagen flotante para ir arriba

2007-12-06T22:11:00.001+01:00

Pensando pensando... quizá os parezca excesivo poner en el pie de cada entrada un icono para volver a la parte superior del blog, así que la opción que se me ha ocurrido es poner una sola imagen que quede flotante en la parte inferior de la pantalla.

Variando un poquito las explicaciones de Aprender en la red he conseguido por fin exactamente lo que andaba buscando.

Una vez más nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
</head>
Y justo encima añadimos el siguiente código:
<a href='#' style='display:scroll;position:fixed;bottom:0px;right:0px;' title='VOLVER ARRIBA'><img src='URL_de_tu_imagen'/></a>

Añadimos la URL de la imagen que queramos poner, que no debe ser muy grande (lo máximo 100X100) para no descuadrar la plantilla, ponemos tras title lo que queramos que se lea en un cartelito al poner el ratón sobre la imagen, y si queremos variamos su distancia a los márgenes inferior y derecho de la pantalla en bottom y right respectivamente.
Clicamos sobre Vista Previa para comprobar el efecto y si todo está a nuestro gusto guardamos cambios y listo!

Os dejo la URL de mi abeto por si os gusta: http://img222.imageshack.us/img222/4348/arbolnavidadwd4.png

Ir arriba desde el pie de las entradas

2007-12-05T20:37:00.001+01:00

¿Habeis visto el muñeco de nieve que hay en el pie de las entradas a la derecha? Pues si clicais sobre él os lleva al principio del blog sin tener que usar la barra de scroll! ¿Será la magia de la Navidad?

En realidad es la magia de la Gran Rosa, y además muy fácil, así que vamos a poner un pequeño icono en pie de las entradas que nos lleve al inicio del blog en un periquete.

El código que tenemos que añadir es éste:

<a href='#' title='VOLVER ARRIBA'><img align='right' src='URL_de_tu_imagen'/></a>

En el código tenemos que poner en el sitio indicado la URL del icono que más nos guste; también podemos variar el title (lo que aparecerá en un pequeño cartel al poner el cursor sobre el icono) e incluso cambiar el icono por una paqueña leyenda, sustituyendo <img align='right' src='URL_de_tu_imagen'/> por el texto que queramos mostrar.

Ahora vamos a Plantilla/Edición de HTML y expandimos artilugios. Dónde colocar el icono depende de los gustos de cada uno y cómo tenga configurado el pie de las entradas, pero Rosa apunta tres posibilidades:

1.- Justo encima de la siguiente línea:


2.- Justo encima de la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>

3.- Donde lo he colocado yo, justo después de la siguiente línea:
<div class='post-footer'>

Podeis ir probando con la Vista Previa y cambiándolo de lugar para comparar los resultados; cuando quede a vuestro gusto guardais cambios y listo!

Huelga decir que las instrucciones pueden usarse para poner cualquier icono que sea discretito; los que mejor quedarían a mi modo de ver son flechas hacia arriba o casitas.
Aunque mi icono es bastante grande, os lo pongo por si quereis probarlo, y de propina otro navideño que también creo que quedaría bien:

Cambiar el cursor (sólo en IE)

2007-12-04T19:18:00.001+01:00

Ya que la bolboreta me pide un cursor para su blog, aprovecho para armar una entrada en un periquete y añadir una chorradita más a la decoración navideña. Como el resto de decoración, en realidad las explicaciones pueden usarse para poner la imagen que queramos, pero nuestro nuevo cursor sólo será visible con el navegador Internet Explorer.

Siguiendo las instrucciones de Ayuda para tu blog es fácil cambiar la flechita del cursor o puntero del ratón sobre nuestro blog. Así que vamos a ello.

Lo primero es elegir la imagen que deseamos para nuestro cursor; podemos buscar en páginas como myspacecursor o Poqbum. Cuando hayamos encontrado uno que nos guste, clicando sobre ella nos darán un código que será más o menos así:
<style type="text/css">body {cursor: url(http://www.myspacecursor.net/xmas/9.ani); }</style><br />
<a href="http://www.myspacecursor.net" title="Free Cursors">Free Cursors</a><a href="http://www.freelayoutsnow.com" title="Myspace Layouts">Myspace Layouts</a><a href="http://www.getmyspacecomments.com" title="Myspace Comments">Myspace Comments</a><br />

Cuánta publicidad, verdad? El ejemplo es de myspacecursors, en poqbum es aún peor. Si pegáramos este código en un nuevo elemento de página HTML/Javascript funcionará, pero NO LO HAGAIS, porque también nos aparecerán anuncios muy molestos. Pues bien, vamos a arreglárnoslas para prescindir de ellos. Por ahora, lo único que hay que hacer es copiar este código y lo pegamos en el bloc de notas.

Nos vamos a Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<body>
Y justo debajo pegamos el siguiente código:
<style type="text/css">body {cursor: url(URL_del_cursor.ani); }</style>
donde sustituiremos URL_del_cursor.ani por la URL que aparece entre paréntesis en el código que hemos copiado en nuestro bloc de notas y acaba en .ani; es decir, lo que yo he resaltado en negrita.
Clicamos sobre Vista Previa para comprobar que el puntero ha cambiado y guardamos cambios.

Ahora nuestro cursor será la imagen elegida sobre el blog y una manita sobre los enlaces.
De nada, apa!

Dividers navideños

2007-12-03T16:02:00.001+01:00

Creo que el sitio que más me gusta para darle un toque navideño al blog son los dividers, esas líneas de separación entre las entradas del blog; quedan muy bien en plantillas sencillas que no tengan decorado el pie de las entradas o ningún elemento entre las entradas. Clicad sobre cada uno de ellos para ver su tamaño real:

Ya expliqué en otra entrada cómo poner un divider, pero como (típico de mí) lo hice de la forma más difícil a partir de las instrucciones para el Blogger antiguo, ahora voy a poner la manera supersencilla que encontré en el blog de Gem@ para el nuevo Blogger.

Allá vamos: nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<b:include data='post' name='post'/>
Justo debajo añadimos este código:
<img src="aquí-la-url-de-la-imagen"/>
Y si queremos que la imagen quede centrada lo envolvemos con "center" así:
<center><img src="aquí-la-url-de-la-imagen"/></center>
Usamos la Vista Previa y si nos gusta el resultado guardamos cambios y ya está.

Puedes encontrar más dividers muy navideños en Glitter Graphics.

Poner un icono de RSS

2007-12-02T13:14:00.001+01:00

Como segunda decoración de Navidad he decidido cambiar el aburrido mensaje de "Suscribirse a" anterior al enlace de las RSS que hay al pie del blog por algo más acorde con las fechas, sobre todo después de encontrar en la página de anietok2 una preciosa colección de iconos RSS muy navideños:
Siguiendo las instrucciones de Beautiful Beta es realmente fácil poner un icono que sirva de enlace a la página de las feeds que se abra en una nueva ventana, así que allá vamos: nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<data:feedLinksMsg/>
Y la sustituimos por este código:
<a href='URL-de-tus-RSS' target='_blank'><img alt='Suscríbete a las feeds RSS' border='0' src='URL-de-la-imagen'></img></a>
Clicamos sobre Vista Previa y si estamos satisfechos con el resultado guardamos cambios y ya está!

Los paquetes ZIP de 12 iconos navideños se encuentran listos para descargar con fondo blanco, negro y transparente en la página de Ajaxpath. Aunque obviamente, las explicaciones valen para cambiar la frase "Suscribirse a" por cualquier otro icono RSS que os apetezca.

Cambiar el icono de "Enviar entrada por correo"

2007-12-01T18:14:00.001+01:00

Con esta entrada voy a empezar a decorar el blog para las Navidades, que me encantan. Perdonad los amantes de la sobriedad si el blog se sobrecarga un poquito estos días... pero en estas fechas todos nos volvemos algo "excesivos". El 7 de Enero volvemos al blanco liso, prometido.

Y lo primero que he hecho ha sido cambiar el icono de la función "Enviar esta entrada por correo electrónico" en el pie de las entradas basándome, cómo no, en explicaciones de El escaparate. Estas indicaciones sirven para cambiar el pequeño sobrecito gris por cualquier imagen que deseeis, pero no tiene que ser muy grande, yo diría que lo máximo 22x22.

ACLARACIÓN: Mi gif es mucho más grande, 50x50. He intentado reducirlo con el GIFWorks pero no se leen las letras. En este blog queda bien por dos razones: en el cuerpo de las entradas queda un espacio en blanco debido a la firma y la segunda línea del pie de las entradas (los comentarios) quedan más hacia la izquierda que la primera (archivado como). Si vuestro blog no cumple estos requisitos, probablemente no quede bien, pero siempre podeis probar con la vista previa antes de guardar los cambios y si no os gusta descartarlos o poner cualquier otra imagen, mientras sea pequeñita.

¿Cómo me las arreglo siempre para enrrollarme de estas maneras? Hala, vamos a ello. Dos pasos:

1.- Vamos a Plantilla/Edición de HTML y añadimos el siguiente código en las CSS (en caso de duda, justo antes de ]]></b:skin> ):
.email-post-icon2 {
background: url("AQUI LA DIRECCIÓN DE TU IMAGEN") no-repeat left;

/* makes an 18x18 box */
padding:20px;

margin:0 0 0 .5em;
}

2. Expandimos elementos y buscamos la siguiente línea:
<span class='email-post-icon'> </span>
y la sustituimos por la siguiente
<span class='email-post-icon2'> </span>

Usad la Vista previa para ver cómo queda tu nueva imagen y si te gusta clicas sobre Guardar plantilla y ya está! Si la imagen queda cortada podeis probar a aumentar el padding del primer código.

Por si quereis probar, la URL de mi gif es http://img204.imageshack.us/img204/5817/emailnavideomm8.gif
En la sidebar de este blog, en "Siempre a mano" encontrareis unos cuantos buscadores de iconos.

Cuenta atrás en Flash

2007-11-23T10:30:00.002+01:00

En Bloggermaníacos he encontrado un widget para mostrar una cuenta atrás hasta el evento que desees en Flash muy personalizable.

Para conseguir uno sólo tienes que entrar en Just Say Hi! y rellenar las opciones con tus preferencias: el color del texto y del fondo, la fecha del evento, el texto a mostrar (lástima que esté en inglés, porque saldrá UNTIL antes del texto que introduzcais) y el tamaño, que no debe ser muy grande para que quepa sin problemas en la sidebar. Clicando sobre "Generate countdown now" aparecerá una vista previa y el código HTML.

Para añadir el widget a la sidebar como siempre: vais a Plantilla/Elementos de la página y clicais sobre Añadir un elemento de página HTML/Javascript. Copiais el código en Contenido y guardais cambios y ya podeis arrastrarlo a la posición que deseais que ocupe en la sidebar. Comprobais con la Vista Previa y si está a vuestro gusto se guardan cambios y listo!

Pero como veis, también puede mostrarse en una entrada simplemente pegando el código en cualquier entrada en modo Edición de HTML; si lo quereis centrado se envuelve el código anterior entre <center> y </center> .

Tiempo de carga del blog

2007-11-22T23:20:00.001+01:00

En el blog de Key descubrí una utilidad gratuita de Pingdom con la que puedes analizar por completo cualquier página hecha en HTML incluyendo todos sus objetos (imáges, CSS, JavaScripts, RSS, Flash y frames/iframes) para saber cuánto tarda en cargar en los navegadores web. Lo encontré muy útil para saber cuánto tarda en cargar el blog y cuáles son los elementos más pesados para intentar aligerarlo si se demora demaisado.

El test completo (Full page test) nos muesta visualmente el tiempo de carga de cada objeto a través de barras coloreadas y puede listar los objetos o por el orden de carga o por su jerarquía, vista que te permite ver qué objetos están ligados a archivos CSS, por ejemplo.
También se muestran estadísticas generales de la página como el tiempo total de carga, el número de objetos según su tipo y su tamaño.
La utilidad tiene sin embargo limitada la carga de determinados objetos como los javascript y los vídeos.

Espero que os sea útil!

Mariposas y peces en tu blog

2007-11-21T12:38:00.002+01:00

Un regalito para mi bolboreta favorita: las "bolboretas" que hay revoloteando en el pie de este blog; como casi todo, lo descubrí en El escaparate.

Sólo hay que ir a Plantilla/Elementos de página y añadir un elemento de página HTML/Javascript, donde en el contenido pegaremos el siguiente código:
<embed allowscriptaccess="never" allownetworking="internal" enablejavascript="false" width="350px" src=" http://www.crazyprofile.com/butterfly/Butterfly.swf?nr=6&type1=0&type2=3&type3
=1&type4=4&type5=5&type6=2" height="300" wmode="transparent"><br/><div><a href></a></div></embed>

El width y el height se pueden cambiar por el que mejor se ajuste a la sidebar. Se guardan cambios y se arrastra el elemento a la posición que queremos que ocupe en la sidebar; también quedan bien en el pie del blog, pero se ven menos, lo que yo he arreglado poniendo varios cósigos pegados uno a otro.
Incluso puedes dejarlas volar por una entrada (si las quieres centradas, mete el código entre <center> y </center> :

Gracias a Evinchi, que parece haber pasado un buen rato jugando con las suyas, me he enterado de que si clicas una vez sobre cualquier mariposa cambian de color, y si clicas dos veces estalla en muchas mariposas pequeñas y desaparece. pero tranquilos, vuelven a aparecer si recargas la página.

Exactamente de la misma forma puedes tener tu propio acuario, aunque los peces son algo asustadizos, salen huyendo si clicas sobre ellos!:

Aunque en este caso creo que quedan mejor en un fondo que no sea totalmente blanco porque destacan más; yo los tengo en Mi Microcosmos debajo del blogroll y son hipnóticos!

El código del acuario es el siguiente:
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="never" type="application/x-shockwave-flash" height="200" src="http://www.crazyprofile.com/fish.swf" width="200" wmode="Transparent"/></embed><br/><div><a href="http://www.crazyprofile.com/fish_aquarium.asp"></a></div>

De nada, apa!

Agregar una segunda sidebar

2007-11-20T17:01:00.001+01:00

A partir de las explicaciones de Ayudaparaelblog es muy sencillo agregar una segunda sidebar en sólo 5 pasos; las explicaciones son para las plantillas Minima que son las que yo uso, porque al ser tan sencillas no se recargan tanto al ir añadiendo cositas como las decoradas.

Lo primero que hay que saber es que las plantillas tienen tres elementos principales:
#outer-wrapper - Define el blog entero. En la plantilla Minima sin modificar tiene un ancho de 660 px.
#main-wrapper - Define el cuerpo del blog, donde van las entradas. Ancho original de 410 px.
#sidebar-wrapper - Define la sidebar. Ancho original de 220 px.

Por tanto 410+220=630; como el ancho del blog entero es 660, os aconsejo que guardeis estas proporciones: cuerpo+sidebar+30=ancho completo.

Yo he añadido una segunda sidebar sin variar el ancho del cuerpo ni la primera sidebar. Como he añadido una sidebar de 200 px. (mas un margen de 20 px.) el ancho total del cuerpo será 410+220+200+20+30=880. Pero aquí hay que tener en cuenta las resoluciones de pantalla, ya que por ejemplo si la mayoría de vuestras visitas tienen aún un monitor de 600x800 no verán parte del blog.

Después de tanta disquisición, vamos al lío; es sencillo pero hay que ser cuidadoso y fijarse bien:

1.- Vamos a Plantilla/Edición de HTML y buscamos la outer-wrapper para modificar el ancho del blog entero. Teneis que buscar estas líneas:
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
Y donde pone width: 660px; cambiarlo por la anchura total del blog, que en este caso va a ser 880.

2.- Si quereis la nueva sidebar a la izquierda del cuerpo del blog hay que añadir al cuerpo un margen a la izquierda que lo separe de la nueva sidebar. Para eso teneis que buscar las siguientes líneas:
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Y debajo de width: 410px; añadir la siguiente línea con el margen:
margin-left: 20px;

Si quereis la nueva sidebar a la derecha no hay que hacer este paso 2; luego añadiremos el margen en el paso 6.

3.- Añadimos la segunda sidebar justo debajo de la primera. Hay que buscar las líneas:
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Y justo debajo añadir el siguiente código:
#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Con esto la sidebar en principio quedará a la izquierda del cuerpo principal; si la quereis a la derecha luego la cambiamos en el paso 6.

4.- Para que la nueva sidebar se muestre hay que buscar las siguientes líneas:
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>
Y justo debajo añadir el siguiente código:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

5.- Clica sobre Vista Previa y si te aparece la segunda sidebar a la izquierda del cuerpo principal con el perfil (que hemos incluido en la segunda sidebar para comprobar que aparece) clica sobre Guardar Cambios. Para eliminar este segundo perfil, ve a Plantilla/Elementos de página (allí comprobarás que sale la opción Añadir un elemento de página a la izquierda de Entradas del blog) y elimínala. Si arrastras a la sidebar izquierda cualquier elemento de la derecha o añades uno nuevo y clicas sobre Vista Previa comprobarás que aparece a la izquierda del cuerpo principal.

6.- Si deseas la nueva sidebar a la izquierda de las entradas sáltate este paso y ve directamente al siguiente. Si la deseas a la derecha, justo al lado de la sidebar original has de buscar de nuevo el código de la nueva sidebar, que era éste:
#newsidebar-wrapper {
width: 200px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
Y hacer dos modificaciones:
- donde dice float: left; cambiarlo por right
- debajo de width: 200px; añadir una nueva línea con el margen para separarla de la sidebar original; la línea que tienes que añadir es ésta:
margin-left: 20px;
Clica sobre Vista Previa y si te aparece la segunda sidebar a la derecha de la primera clica sobre Guardar Cambios.

7.- Y yo he añadido otro paso a las explicaciones de Andrés porque me gusta que la cabecera y el footer del blog sean de la misma anchura que todo el blog. Para cambiar la anchura de la cabecera volvemos a Plantilla/Edición de HTML, expandimos artilugios y tenemos que buscar las siguientes líneas:
/* Header
-----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Donde cambiaremos width:660px; por la anchura total del blog, 880.

Y para cambiar el ancho del pie buscaremos:
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Donde igualmente cambiaremos width:660px; por la anchura total del blog, 880.

Usamos la Vista Previa y si todo está bien guardamos cambios y ya tenemos dos sidebars!

iGoogle en tu blog

2007-11-19T17:05:00.001+01:00

A través de Blogger in draft puedes añadir a la sidebar de un blog de Blogger todos los widgets disponibles para iGoogle. Como ya hay más de 27.000 puede que te apetezcan muchos, pero cuidado con no sobrecargar el blog porque tardará mucho más en abrirse.

Hacerlo es muy sencillo:
·Accede a tu blog desde Blogger Draft (pincha sobre el enlace e irás directamente al panel).
·Clica sobre Diseño y ve a la pestaña Elementos de la página.
·Clica sobre Añadir un elemento de página y Gadget (nuevo).
·Ya sólo tienes que elegir el que te guste, clicar sobre Añadir y arrastrarlo a la posición que desees que ocupe en la sidebar... y listo!

Open ID en Blogger (ACTUALIZADO)

2007-11-18T16:28:00.001+01:00

A raiz de una observación que hizo Intruso en el blog de Alcanjo me di cuenta de que ahora, al escribir un comentario en un blog de Blogger, los que no poseían una cuenta de Blogger/Google no podían introducir la dirección de su blog si se encontraba en otra plataforma.

Investigando sobre el tema descubrí en BlogandWeb que desde Blogger Draft por fin es posible implementar en los blogs de Blogger el sistema de identificación libre OpenID en el formulario de comentarios. Esto abre una puerta de comunicación con otras plataformas como Wordpress, Live Journal, TypeKey o una cuenta OpenID general.

ACTUALIZACIÓN: Parece que este sistema ya se está aplicando por defecto en todos los blogs de Blogger que no tengan restringidos los comentarios, pero por si acaso en algún blog no se muestran todas las opciones dejo las explicaciones de cómo implementarlo. Además, con esta nueva forma permitimos a la vez identificaciones OpenID y comentarios con alias o anónimos.

Para permitir el uso de estas cuentas en un blog de Blogger sólo hay que seguir estos sencillos pasos:
·Accede a tu blog desde Blogger Draft (pincha sobre el enlace e irás directamente al panel).
·Clica sobre Configuración y ve a la pestaña Comentarios.
·En el apartado Persona que puede realizar los comentarios selecciona “Cualquiera - incluidos los usuarios anónimos”.
·Guarda la configuración. A partir de ahora, el formulario de comentarios mostrará todas las opciones de identificación, a través de las diferentes cuentas, con un alias y anónimos:

Imágenes con esquinas redondeadas

2007-11-17T15:43:00.001+01:00

En Bitelia encontré RoundPic, una aplicación que permite redondear los bordes de cualquier imagen, bien subiéndola desde nuestro propio equipo o con su URL si la tenemos alojada en una web. Se puede personalizar el tamaño de la esquina a redondear, la calidad, tamaño y ratio de la imagen resultante y el color de fondo de ésta para que se pueda usar sobre cualquier fondo.

Con esta sencilla herramienta podemos convertir simples fotos en verdaderas postales:

Poner un favicon

2007-11-16T17:38:00.001+01:00

El Favicon (Favorites icon) es la pequeña imagen que aparece en la barra de direcciones del navegador, en los marcadores (favoritos) y en las pestañas de los navegadores al lado del nombre de nuestro blog. Es, por así decirlo, nuestra seña de identidad en los navegadores.

Poner nuestro propio favicon es muy sencillo siguiendo las excelentes instrucciones de Vagabundia. La imagen puede ser la de nuestro avatar en Blogger o cualquier otra, pero cuidado con los tamaños, ya que se verá en 16x16 y si es una imagen muy grande puede quedar confusa. Lo mejor es trabajar con una imagen de 32x32, comprobando cuál es su aspecto en 16x16.
Por ejemplo, éste es el del Meta-microcosmos en 16x16:

Ya que algunos navegadores aceptan cualquier formato pero otros sólo admiten el formato .ico para asegurarnos de que el favicon se ve en cualquier navegador lo mejor es convertir nuestra imagen a ese formato. Para ello lo más simple es utilizar la web Favicon from Pics, donde incluso podremos hacer nuestro favicon animado. Subimos nuestra imagen y clicamos sobre "Generate Favicon.ico" Entonces nos mostrará una vista previa y la posibilidad de descargarnos a nuestro equipo un archivo comprimido con ZIP.
Tras descomprimirlo, hay que subir el archivo .ico a un alojamiento de imágenes, lo que puede resultar complicado ya que la mayoría (ni Blogger ni Imageshack, por ejemplo) no acepta este tipo de imágenes.

Yo, al igual que JMuir, usé Fileden, que permite casi cualquier tipo de archivo (lo malo es que hay que registrarse, aunque nunca viene mal tener una cuenta en este tipo de sitios); pero es el único que conozco que me permitió alojarlo. Cuando ya tengamos alojado el archivo, tomamos nota de la dirección URL.

Ahora en nuestro blog nos situamos en Plantilla/Edición de HTML y buscamos la línea:
<b:include data='blog' name='all-head-content'/>
Y justo debajo de esta línea, antes de la etiqueta <title> pegamos el siguiente código:
<link href='URL_icono' rel='shortcut icon' type='image/x-icon'/> <link href='URL_icono' rel='icon' type='image/x-icon'/>
sustituyendo donde pone "URL_icono" (las dos veces) por la dirección de alojamiento de nuestro archivo .ico. Se guarda la plantilla y ya está!

Para ver el resultado hay que recargar la página y, a veces, borrar los temporales para evitar que se lea desde la memoria caché.

Mostrar hasta 5 entradas al azar

2007-11-15T16:58:00.001+01:00

En El Escaparate descubrí justo lo que estaba buscando para mostrar en la sidebar varias entrada al azar, incluso de otro blog, que cambiasen cada vez que se refresca la página. Yo he puesto entradas de Mi microcosmos justo debajo del botón grande azul.

Lo he logrado a través de BStir en sólo unos segundos y sin registro, con unos sencillos pasos:

·Introducimos la URL de nuestro blog (o del que queramos mostrar las entradas)
·En "Keyword" ponemos cualquier palabra, realmente no sirve para mucho.
·En "Show Snippets" escogemos YES para mostrar además del título parte del contenido de la entrada y NO si sólo queremos mostrar el título.
·En "Border" escogemos YES para mostrar un borde alrededor del widget y No para no mostrarlo.
·En "Results" escogemos el número de entradas a mostrar hasta cinco.
·En "Advanced options" podemos cambiar la codificación de los caracteres y añadir un fondo de color rojo, azul o amarillo al widget. Si elegimos NONE no tendrá fondo.

Por último, tenemos que elegir entre estático (una simple lista de las entradas) y dinámico (las entradas van cambiando) En este último caso, sólo podreis añadir un widget por blog para que funcione correctamente, y sólo lo recomiendo para blogs con fondo claro (a no ser que le añadais un fondo de color) porque las diferenres entradas al ir cambiando funden a blanco.
AQUÍ teneis un ejemplo de las distintas posibilidades.

Y ya está, sólo hay que pinchar sobre el logo "Add to Blogger" y automáticamente se nos abrirá la página de Añadir elemento de página. Clicas sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees de tu sidebar!

Copia de seguridad de las entradas

2007-11-14T18:22:00.001+01:00

Para hacer una copia de seguridad de todas tus entradas en Blogger puedes usar el método que te muestran en la sección de ayuda de Blogger “¿Cómo puedo crear una copia de seguridad de todo mi blog?”. Pero este método es un tanto laborioso, por lo que he descubierto en Blog and Web uno mucho más sencillo: usar “Blog backup online“, donde lo conseguirás con unos pocos pasos:

1.- Entra en blogbackuponline.com y regístrate (no tarda más de 3 minutos)
2.- Registra tu blog, es decir, dales la dirección.
3.- Ve a la pestaña “Export” y clica sobre el botón “Download export file”; así te dará la descarga de backup en XML de todos tus post.

A partir de este archivo puedes restaurar tu blog en caso de que pase "algo", o incluso recabar la información si te mudas a otro sistema. Los blogs así registrados se respaldan automáticamente cada día sin software o programación adicional.

Botones de Blogger

2007-11-13T00:14:00.001+01:00

Si no quieres utilizar los botones oficiales de Blogger pero quieres dejar constancia de que "I power Blogger", a través de Rosa descubro una maravillosa colección de botones absolutamente originales y fuera de lo común:

Y éste, mi favorito, que yo sé bien a quién le va a encantar!!!

Tienes más modelos en esta entrada del blog de Pam, armada y peligrosa.

ShareThis para Blogger

2007-11-12T10:02:00.001+01:00

A través de Blog and Web me entero de que ya está disponible para Blogger el conocido botón para marcadores sociales de Wordpress "Share This". Así, en el pie de las entradas se mostrará un único botón que al pinchar sobre el abrirá el widget con la lista de los marcadores sociales. Esta nueva versión permite incluso enviar las entradas por email, pero también tiene sus pegas: sólo se muestra en las páginas individuales de cada entrada, y no incluye marcadores sociales en español. Esperemos que solucionen esos pequeños inconvenientes en la próxima versión.

Para conseguir nuestro widget, hemos de ir a ShareThis y seguir unos sencillos pasos. Podremos escoger el tipo de botón, normal o animado, los iconos de los marcadores que vamos a mostrar, los colores del widget y el orden de los iconos para los marcadores. La web está en inglés pero es lo suficientemente intuitiva para no tener problemas. Podemos optar por registrarnos lo que nos dará la posibilidad de seguir nuestras estadísticas.

El código que obtendremos una vez completados todos los pasos tenemos que convertirlo, usando por ejemplo el conversor de Blogcrows. Luego buscamos en Plantilla, Edición de HTML con los artilugios expandidos la siguiente línea:
<p class='post-footer-line post-footer-line-3'>
Justo debajo de ella pegaremos el siguiente código, sustituyendo "Aquí el código de Share This" por el código ya convertido:
<b:if cond='data:blog.pageType == "item"'>



</b:if>

Se guarda la plantilla y ya está. Paciencia, que tarda un poco en cargar.

Decoración del texto II

2007-11-10T14:43:00.001+01:00

Ya vimos en esta entrada cómo añadir distintos tipos de efecto al texto que no vienen como opciones en el editor de entradas de Blogger. Ahora vamos con otros cuantos efectos para nuestras entradas:

·Sombrear una palabra o línea de texto en color, señalando tras el # su código hexadecimal:
<table bgcolor="#449fcc"><tbody><tr><td>Sombrear una línea de texto con color</td></tr></tbody></table>

Sombrear una línea de texto con color

·Añadir una línea divisoria:
<hr>

·Hacer una lista sencilla sin numeración:
<ul>
<li>Know-How
<li>Utilidades
<li>Widgets
<li>Maquear
</ul>

Know-How
Utilidades
Widgets
Maquear

·Textárea con función "onclick":
<textarea cols="30" wrap="off" class="codigo" onclick="this.select()">Textárea con función "onclick": sólo hay que clicar una vez sobre el texto para seleccionarlo completo.</textarea>

Generador de logos famosos

2007-11-09T15:22:00.001+01:00

En el blog de Gem@ descubrí el generador de logos Logo54, con las fuentes típicas de Ferrari, Star Wars, Harry Potter, Monsters&Cía, Yahoo y Nintendo. Un ejemplito:

Iconos en el autor, comentarios y etiquetas

2007-11-08T03:01:00.002+01:00

En el blog de Gem@ encontré la forma más sencilla de aplicar imágenes tipo iconos en los comentarios, autor y etiquetas al pie de las entradas.

Vamos a Plantilla/Edición de HTML y buscamos los CSS; el sitio idóneo para aplicar este código es justo antes de la línea
]]></b:skin>

A continuación copiaremos y pegaremos los siguientes códigos dependiendo del elemento al que deseemos añadir un icono:

·En Categorías/Etiquetas:
.post-labels
{ padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

·En Comentarios:
.comment-link
{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

·En Autor de las entradas:
.post-author
{
padding-left:20px;
padding-top:5px;
background: url(url_de_la_imagen) center left no-repeat; }

En cada caso, donde dice "url_de_la_imagen" hay que añadir la url del icono que queramos mostrar, y podeis jugar con los paddings hasta que quede a vuestro gusto. Usamos la Vista previa y cuando estemos satisfechos del resultado guardamos cambios y listo!

Podeis encontrar bonitos iconos 16x16 por ejemplo en Iconfinder, que es de donde he sacado yo los míos

Histats: todas tus estadísticas

2007-11-07T03:42:00.001+01:00

Después de probar unos cuantos servicios de estadísticas, me quedo con Histats. Es el que ofrece más datos: las páginas visitadas, el número de visitantes, el tiempo que están en cada página, la procedencia de websites o buscadores, las cadenas de búsqueda, posicionamiento geográfico de las visitas... casi todo lo que puedas desear.

Además, la información está presentada de una forma clara y sencilla, con multitud de gráficas para facilitar su comprensión.
Por otro lado, ofrece una variedad amplísima de atractivos diseños de botones para insertar en el blog, mostrando las visitas diarias, online, totales, y también si queremos los hits, tanto totales como diarios.
Conseguir uno de ellos es muy fácil, sólo en cuatro pasos que apenas te llevarán un minuto:
- Regístrate gratis
- Personaliza el contador
- Pega el código del contador en un nuevo elemento de página HTML/Javascript y colócalo donde desees
- Inmediatamente comenzarás a mantener el registro de visitantes.

Gravatar

2007-11-05T12:27:00.001+01:00

Una de las cosas que nos identifica en el mundo on-line es nuestro avatar. Cuando comentamos en un blog de Blogger no hay problemas, se añade automáticamente el avatar de nuestro perfil, pero cuando comentamos en otros blogs (basados en Wordpress, por ejemplo) no podemos añadir esta imagen. Para que nuestro avatar nos acompañe allí donde comentemos el sistema más extendido es Gravatar, cuyo plugin está instalado en la mayoría de los blogs. Este servicio asocia una imagen a una dirección de email, así que si introducimos esta dirección automáticamente saldrá la imagen asociada.

Hacerse con uno es muy fácil:
·Entrar en gravatar.com y clicar sobre "sign up now".
·Introduces tu email y esperas a que te llegue el mensaje de correo de confirmación; en ese mensaje incluyen el link para seguir con el proceso.
·Elijes la contaseña y ya puedes subir tu avatar clicando sobre "add a new one", desde Internet o tu ordenador. No te preocupes por el tamaño, luego podrás ajustarlo.
·Lo más curioso es el sistema de clasificación del avatar según muestre imágenes violentas, sexuales... pero me imagino que todos los vuestros serán "G".

Y ya está! Ahora el avatar seleccionado se mostrará cuando comenteis en todos los blogs de Wordpress que hayan instalado el plugin.

Anuncios muy llamativos

2007-11-04T13:53:00.001+01:00

En el blog de César descubro el generador de texto animado de Fodey, que se puede usar para incluir un anuncio en una entrada de una forma muy llamativa. Puedes crear una ardilla, gato, flor, tomate o lechuza con un globito de texto tipo cómic o un generador animado con un ninja o mago escribiendo lo que desees.

Sólo tienes que ir a fodey.com, elegir tu diseño y escribir tu mensaje en el cuadro de texto. A continuación nos generará el código para que peguemos en nuestro blog, en una entrada o en la sidebar, añadiendo un nuevo elemento de página HTML/Javascript. También se puede descargar la imagen a través del link azul bajo la animación.
El código que obtenemos se puede personalizar: cambiar el tamaño, borrar el enlace y editar la descripción de la imagen.

Pero lo más divertido de esta página es que también podemos crear nuestra propia noticia en un periódico o claqueta de cine.

Menú lateral flotante

2007-11-03T11:56:00.001+01:00

Entre las explicaciones de El Escaparate y las de Blog&Web he añadido un menú lateral flotante que me gusta bastante. En sólo dos pasos:

En primer lugar añadimos en el CSS de nuestra plantilla el código necesario para controlar el menú y que se muestre con los efectos que queremos. Vamos a Plantilla, Edición de HTML, expandimos artilugios y buscamos esta línea:
]]></b:skin>
Justo encima pegamos el siguiente código:
/* Scroll MenuIcon
---------------------------------------------
*/
#MenuIcon{
position:fixed;
text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:0px;
margin-left:-35px;
}

* html #MenuIcon{ /*IE only*/
position:absolute;
}

#MenuIcon a img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
}

#MenuIcon a:hover img{
opacity:0.8;
-moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px;
}

* html #MenuIcon a img{
filter:alpha(Opacity=100);
}

#MenuIcon img{
margin-bottom: -3px;
}

* html .MenuIcon{
margin-bottom: -3px;
}

Y guardamos cambios.

Segundo paso, añadir un nuevo elemento HTML-Javascript; para ello buscamos esta línea:
<div id='content-wrapper'>
Y justo debajo pegamos este código:
<div id="MenuIcon">
<span>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com" rel="external" title="VOLVER AL INICIO"><img alt="Home" src="http://img114.imageshack.us/img114/5226/homeuo9.jpg" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://www.blogger.com/profile/06743611108067453905" rel="external" title="SOBRE MI"><img alt="Home" src="http://img114.imageshack.us/img114/2736/yonh9.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="mailto:lejaniaimposible@hotmail.com" title="CONTACTAME"><img alt="Contactar al Autor" src="http://img114.imageshack.us/img114/118/mailforwardgr2.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://feeds.feedburner.com/blogspot/hnBy" title="SUSCRIBIR A EL ESCAPARATE"><img alt="Subscribe a El Escaparate" src="http://img69.imageshack.us/img69/29/iconosrssea0.jpg" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/2007/01/ranking-de-comentarios-en-el-escaparate.
html" title="RANKING DE COMENTARIOS"><img alt="Comentarios del Escaparate" src="
http://img114.imageshack.us/img114/9202/yellowgelfh3.gif" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/search/label/?max-results=999" title="VER TODOS LOS POST DEL ESCAPARATE"><img alt="Entradas del Escaparate" src="http://img503.imageshack.us/img503/3457/eye1yl9.png" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="http://elescaparatederosa.blogspot.com/2007/09/me-han-nominado.html" title="GALARDONES AL ESCAPARATE"><img alt="Premios del Escaparate" src="http://img210.imageshack.us/img210/296/ganadorescomercialrn5ui0.gif" class="MenuIcon"/></a>
<br/>
<a style="border:0;" href="# " title="IR ARRIBA"><img alt=" ir arriba" src="http://img69.imageshack.us/img69/1295/flecha12zi1.jpg" class="MenuIcon"/></a>
</span>
</div>

He copiado literalmente el código para el menú de Rosa porque ella tiene más opciones que yo he eliminado, aunque si os fijais en la estructura es fácil añadir o quitar botones, moverlos de posición... Ahora teneis que repasar cuidadosamente el código para sustituir los datos del blog de Rosa por los de vuestro blog.
También se pueden cambiar los iconos, pero deben ser todos del mismo tamaño, que en este caso es 22x22.
Donde se lee esta frase en el código: /*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */ cambiáis los valores si el menú queda muy arriba o muy abajo. Tal cual está son los valores de mi blog y el elemento con el código lo he puesto debajo de la cabecera, pero en cada caso el resultado será distinto, dependiendo del tamaño del "cuerpo" del blog. Usad la vista previa para evitar sorpresas y cuando esté a vuestro gusto, guardais cambios y listo!

Nube de etiquetas

2007-11-02T12:52:00.001+01:00

Para poner una nube de etiquetas en el blog, pero sin que desaparezca la lista de etiquetas de Blogger (si lo que quieres es sustituir la lista por una nube puedes seguir los pasos de Ayuda para el blog), la única forma que he encontrado que me gusten los resultados es a través de ZoomClouds.

Es un servicio gratuito en el que nos permite extraer de un feed que elijamos los términos que más se repiten, de modo que le servirá para crear una nube de etiquetas; como en toda nube que se precie, el tamaño de las palabras es directamente proporcional al número de veces que aparece en el feed.
Para conseguir tu nube sólo has de seguir tres sencillos pasos: registrarse en Zoomclouds.com, poner la dirección del feed de tu blog y diseñar el aspecto de la nube: número, color y tamaño de las palabras, color de fondo y demás parámetros. Cuando por fin haya quedado a vuestro gusto según la vista previa nos generarán un pequeño código javascript para insertar en el blog.

Desde nuestra cuenta de ZoomClouds también podemos usar los filtros para eliminar las palabras no deseadas, y lo mejor es que se actualiza automáticamente en función del contenido de nuestras RSS.

Seguimiento de los comentarios

2007-11-01T23:47:00.001+01:00

Si no es porque lo leí en Vagabundia no me doy cuenta: Blogger ha implementado una nueva opción para que no perdamos el rastro de los comentarios que hacemos en cualquier blog de Blogger. En el formulario de comentarios, basta con marcar la casilla en la que pone "Email follow-up comments to (nuestra dirección de email) para que cuando se agreguen comentarios en esa entrada nos avisen por medio de un mail y así poder seguirles la pista fácilmente.

La pizarra de Bart

2007-10-30T12:53:00.001+01:00

En Recursosblog he encontrado la página de Milinkito, en la que puedes escribir el mensaje que desees en la pizarra de Bart. No genera el código de la imagen, así que sólo queda hacer una captura, pero aún así me ha parecido genial!

Blogs de ayuda para Blogger

2007-10-29T23:54:00.001+01:00

Desde mi punto de vista, los tres mejores blogs de ayuda para Blogger. Es muy interesante darse una vuelta por sus entradas para ver qué cosas nuevas podemos añadirle al blog... y si tienes algún problema, los tres autores son amabilísimos y resolverán cualquier duda que les plantees vía comentarios:

Citas célebres

2007-10-28T12:34:00.001+01:00

En CitasComunidad podemos conseguir hacernos con un widget para la sidebar que mostrará citas o frases célebres acompañadas de la imagen de su autor. Cada vez que se acceda al blog o se refresque la página la cita cambiará.

Puede personalizarse totalmente el widget para que se ajuste al estilo de nuestro blog: tamaño (anchura y altura), estilo, mostrar título, fuente, tamaño y color del texto, tamaño y situación de la imagen del autor... lo que queramos. Cuenta con Vista Previa para que vayamos comprobando los cambios.

Cuando lo hayamos personalizado a nuestro gusto nos generará un código HTML. Para añadir el widget a nuestra sidebar sólo tenemos que ir a Plantilla, Elementos de la página y añadir un elemento de página HTML/Javascript. En el contenido pegaremos el código que nos han proporcionado. Guardamos y arrastramos a la posición que queremos que ocupe en la sidebar.

Decoración del texto I

2007-10-27T12:12:00.001+02:00

La propiedad "text-decoration" aplicada a una palabra o frase permite añadir distintos tipos de efecto que no vienen como opciones en el editor de entradas de Blogger. Los valores que podemos obtener con "text-decoration" son:
·none: ninguno
·underline: subrayado
·overline: sobrerayado
·line-through: tachado
·blink: parpadeo (Internet Explorer no lo reconoce).

Para aplicarlo tenemos que usar los siguientes códigos, poniendo el texto que queremos resaltar donde pone TEXTO AQUÍ:
<span style="text-decoration: none;">TEXTO AQUI</span>
<span style="text-decoration: underline;">TEXTO AQUI</span>
<span style="text-decoration: overline;">TEXTO AQUI</span>
<span style="text-decoration: line-through;">TEXTO AQUI</span>
<span style="text-decoration: blink;">TEXTO AQUI</span>

Y el efecto es el siguiente:
subrayado
tachado
sobrerayado
parpadeo

Generador de mensajes

2007-10-26T11:53:00.001+02:00

He encontrado por casualidad el generador de redkid, en el que tienen una buena colección de imágenes para generar con ellas un mensaje: para poner un anuncio, dar la bienvenida a los lectores o simplemente "maquear" el blog. Puedes poner tus mensajes en boca de los Beatles, Scooby Doo, Bob Esponja o Gorillaz, o sobre un camión, una señal del metro londinenese o una sopa de letras, por ejemplo. Y mi favorito:

Abrir enlaces de la sidebar en ventana aparte

2007-10-25T11:10:00.001+02:00

Para que los links de las listas de vínculos de Blogger se abran en una ventana diferente (el elemento "Lista" ya incluye abrir en ventana aparte), sólo hay que incluir en la plantilla una pequeña etiqueta.
Vamos a Plantilla, Edición de HTML y expandimos artilugios. Buscamos el widget de la lista de vínculos, que tienen que ser más o menos así:
<b:widget id='LinkList1' locked='false' title='AQUÍ EL TÍTULO QUE LE HAYAS PUESTO A LA LISTA' type='LinkList'>
Si no le has puesto título, sólo aparecerán unas comillas.

Ahora buscamos la siguiente línea:
<li><a expr:href='data:link.target'><data:link.name/></a></li>
Y sólo añadimos la etiqueta target='_blank' donde está en azul, dejando un espacio entre target' y target='_blank':
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>

Últimas entradas

2007-10-24T11:33:00.001+02:00

Gracias a Rosa por fin he descubierto un widget para las últimas entradas publicadas que es personalizable. En él se muestra el título de la entrada, las primeras líneas y unos puntos suspensivos con (leer más) ensobre el que se puede clicar para ver la entrada completa.

Para añadirlo a nuestra sidebar sólo tenemos que ir a Plantilla, Elementos de la página y añadir un elemento de página HTML/Javascript. En el contenido pegaremos el siguiente código:
<script src="http://lejaniaimposible.googlepages.com/ultimospost.js "></script>
<script language="javascript">
var numposts = 10;
var numchars = 120;
var showpostdate = false;
var showpostsummary = true;
var standardstyling = true;
</script>
<script src="http://NOMBRE_DEL_BLOG.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Y antes de guardar, lo personalizamos de la siguiente forma:
· var numposts: Número de entradas a mostrar.
· var numchars: Números de los primeros caracteres de cada entrada.
· var showpostdate: true para mostrar la fecha de cada entrada, false para ocultarla.
· var showpostsummary: true para mostrar el ...(leer mas), false para ocultarlo.
· var standardstyling: true y false son dos tipos diferentes de texto.
· "NOMBRE_DEL_BLOG": cambiarlo por el del blog donde vamos a aplicarlo.

Guardamos y lo arrastramos a la posición en la que queramos que aparezca.

Dirección de e-mail en una imagen

2007-10-23T00:29:00.001+02:00

Para evitar en lo posible publicar nuestra dirección de e-mail de manera que lo puedan pillar los cazadores de spam, casi siempre recurrimos al socorrido mi(punto)microcosmos(arroba)gmail(punto)com. Pero también hay otra forma mucho más estética, que es ponerlo como una imagen. Lo vi en el blog de Joseantonio71 y me encantó.

En la página de E-mail Icon Generator puedes crear en un momento un icono con tu dirección de correo, personalizado además con los colores de tu proveedor si usamos sus templates predefinidos.

Es de lo más sencillo: sólo tienes que introducir tu dirección y seleccionar tu proveedor de correo en la ventana desplegable; dependiendo de los casos, también podrás elegir la extensión regional (por ejemplo con yahoo podrás tener tu dirección yahoo.es). Clicas sobre el botón "Generate" y ya está! Obtienes una previsualización del icono, una dirección URL de la imagen e incluso la posibilidad de descargártela a tu disco duro.

Aunque tienen varios proveedores disponibles, si no encuentras el tuyo o quieres diseñar tu icono totalmente personalizado, clica en "Provider not available? Click here!" y al introducir tu dirección completa podrás elegir el color de la letra, el fondo y el borde de tu icono, e incluso la fuente.

Difunde Firefox

2007-10-22T20:19:00.001+02:00

Por supuesto, yo uso Firefox!

Si también es tu caso y quieres hacerlo patente en tu blog, o avisar a tus lectores de que quizá no podrán visualizarlo correctamente con Internet Explorer, en la página de Difunde Firefox encontrarás banners y botones con una gran variedad de tamaños y estilos para poder escoger el que mejor se adapte a tu blog (o para usar de firma en foros). Debajo de cada uno de ellos aparece el código que debes pegar donde desees.

En la misma página encontrarás también banners y botones de Thunderbird para utilizar como firma en mensajes de email

"Sigue leyendo" con efecto recoger

2007-10-21T16:03:00.001+02:00

Es la primera cosa que me preguntaron cómo había hecho, a mí, una novatilla!!!
Así que aquí va la explicación, sacada de Gem@blog:

Mis entradas son generalmente muy largas, me enrollo como un yoyó, por lo que me encantó este truqui para mostrar sólo el principio de la entrada. Así hay más entradas visibles en la página principal del blog y los lectores sólo expanden la que les interesa.

Nos situamos en Plantilla/Edición de HTML y marcamos la casilla de expandir artilugios. Buscamos </ head > y justo antes añades el siguiente código:
<script src='http://forevergema.googlepages.com/functiontoggleIt.js' type='text/javascript'/>

Buscamos este código en la plantilla (recuerda expandir los artilugios):
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template'
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

Lo sustituyes por este otro:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>SIGUE LEYENDO</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>CONTRAER ENTRADA</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> 
</div>

Donde dice SIGUE LEYENDO y CONTRAER ENTRADA puede sustituirse por otra frase o incluso por una imagen añadiendo el código siguiente:
<img src="URL DE LA IMAGEN">

Se guarda la plantilla y ya está!

Para utilizarlo en las entradas deberemos añadir en cada una de ellas dos códigos en modo Edición de HTML:
A partir de lo queramos esconder
<span id="fullpost">
Y al final de la entrada
</span>

Para facilitar la tarea y evitar tener que copiar y pegar ese código cada vez que deseemos añadirlo hay una solución y es aplicarlo en la plantilla de entrada. Nos situaremos en Plantilla/Opciones/Formato y casi al final encontraremos la plantilla de entrada, es una ventana con opción para escribir donde añadimos:
Aquí lo que queda visible
<span id="fullpost">
Aquí lo escondido
</span>

Guardamos los cambios y listo.

Ahora cada vez que editamos una entrada aparecerá ese código, escribiremos en la primera línea donde dice "aquí lo que queda visible" el inicio de la entrada y en la segunda línea de "aquí lo escondido" es el texto que aparecerá "escondido".

Muy agradecida a Gem@, que pese a tener su blog temporalmente desactivado por haber perdido todo lo almacenado en su plantilla (aunque por suerte tras el pequeño contratiempo ya está funcionando de nuevo), sacó un ratillo para enviarme la explicación por mail.

De dónde vienen tus visitas

2007-10-20T00:57:00.001+02:00

Si quieres saber de dónde vienen los lectores de tu blog, Feedjit te dice al instante tanto su procedencia geográfica como desde qué sitio en Internet han llegado a tu blog. Lo descubrí a través de Disquisiciones.

Originalmente pensado para blogs (pero se puede instalar en cualquier sitio web), Feedjit no requiere ningún tipo de registro y es totalmente gratuito. Como primer paso debes fijar la anchura del widget y el color, que puedes seleccionar entre los ya configurados o hacerlo a tu antojo (eligiendo los colores del fondo, texto, cabecera, borde y links). El segundo paso, añadirlo a tu sidebar, está automatizado para Blogger, ya que al pulsar sobre "Add to Blogger" se abre directamente la página de Blogger de importar elemento de página. Clicas sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees de tu sidebar. También puedes hacerlo a mano, copiando el script generado en un nuevo elemento de página HTML/Javascript.

Feedjit indica para las diez últimas visitas la bandera del país del que procede, la ciudad y la región desde donde accede, si viene de un buscador o después de pulsar sobre un enlace de otro blog o web y a qué página de tu sitio ha accedido.

En la misma página también podemos conseguir otro widget: un pequeño mapa que muestra la distribución de los últimos 100 visitantes, con un funcionamiento similar a la lista de visitas: primero personalizar los colores y después añadirlo a nuestro blog.

La información que nos da cada widget se actualiza cada minuto, con lo que nos dará de un vistazo una idea de quiénes y desde dónde nos visitan.

Insertar código HTML en una entrada

2007-10-19T16:52:00.001+02:00

Para insertar un código HTML en una entrada y que Blogger no lo "procese" hay varios trucos, pero a mí el que más me gusta para que la entrada quede lo más limpia y diáfana posible es usar un conversor de código. El que yo utilizo es uno online de Blogcrowds: simplemente entras en Parse HTML, introduces el código en la ventana, clicas sobre el botón Parse y ya tienes el código listo para insertar! Fácil y rápido, lo mejor!

Firmas personalizadas

2007-10-18T17:28:00.001+02:00

En El escaparate de Rosa descubrí una web que nos ofrece crear una firma personalizada para incluir en el pie de las entradas de nuestro blog. Es una buena opción al aburrido "Escrito por" o "Publicado por" de Blogger.

El proceso es muy sencillo: en la web My Live Signature (no hace falta registrarse) pinchamos bajo Don't want to register en "Proceed" y después en "Create signature". Nos darán dos opciones, olvidaos de la segunda usando una imagen escaneada (que es de pago) y clicamos sobre la primera "Using the signature creation wizard".

Lo demás es facilísimo, introduces el nombre que quieras y vas siguiendo los pasos: escoger la fuente del texto (hay 140 modelos), el tamaño, el color, la inclinación... Al final nos muestran el resultado y nos ofrecen tres posibilidades: hacerla animada (de pago), descargarla a nuestro PC o usarla, para lo que nos generan su código HTML o BBCode para los foros.

Una vez obtenido el código HTML de vuestra firma, si quereis usarla en todas vuestras entradas podeis incluirla en la plantilla de entrada. En Plantilla/Opciones/Formato casi al final encontraremos la plantilla de entrada, es una ventana con opción para escribir. En esta ventana introducimos el código y así aparecerá en todos las entradas; si en alguno no queréis ponerla, simplemente borráis el código. Y si queréis que aparezca centrada, metéis el código que os dan entre <center> y </center>

Mandar un email con un click

2007-10-17T01:02:00.001+02:00

Resulta interesante mostrar en la sidebar del blog nuestra dirección de email para que los lectores puedan enviarnos por correo electrónico dudas o sugerencias que no quieran dejar en los comentarios de las entradas.

Para que se pueda enviar un email desde un link (en el que pinchando se abra el programa de correo) hay que poner el siguiente código:
<a href="mailto:NUESTRA DIRECCION DE CORREO"> LINK A MOSTRAR</a>

Y así aparecerá el siguiente link:
Escribe un email a Yo misma

Si queremos sustituir el link a mostrar por un botón, imagen o icono (por ejemplo, los creados siguiendo las instrucciones de la entrada Dirección de email en una imagen) lo haríamos a través del siguiente código:
<a href="mailto:NUESTRA DIRECCION DE CORREO"><img src="URL DE NUESTRA IMAGEN"/></a>

Y éste sería el resultado:

¿Y si hay dos autores en el blog y queremos que los emails de los lectores lleguen a las dos direcciones de correo distintas de los dos autores? Pues no hay problema, encontré la solución en El escaparate de Rosa: en el caso de dos autores y dos direcciones distintas el código que tendríamos que poner sería el siguiente:
<a href="mailto:DIRECCION DEL PRIMER AUTOR?cc=DIRECCION DEL SEGUNDO AUTOR">LINK A MOSTRAR</a>

Y quedaría así:
Contacta con los autores del blog

Este código también sirve si queremos que los emails de los lectores lleguen a dos cuentas de correo distintas de una misma persona.

Y se hace exactamente de la misma manera sustituyendo el link por una imagen; el código sería:
<a href="mailto:DIRECCION DEL PRIMER AUTOR?cc=DIRECCION DEL SEGUNDO AUTOR"><img src="URL DE LA IMAGEN"></a>

Con lo que obtendríamos:

Últimos comentarios

2007-10-16T00:43:00.001+02:00

Añadir un widget totalmente personalizable en la sidebar de un blog de blogger es lo más fácil del mundo gracias a Blogger Templates. Sólo tienes que insertar en el formulario los parámetros que desees:
- El título que tendrá el widget
- La dirección de tu blog
- El número de comentarios que deseas que aparezcan
- Marcar o desmarcar las opciones de mostrar la fecha del comentario y el título de la entrada donde se ha realizado
- El número de caracteres que se mostrarán del comentario.

Clicas sobre el botón "Apply" y luego sobre "Add widget to muy blog"... y se abre directamente la página de Blogger de importar elemento de página. Clicas sobre "Añadir artilugio" y ya lo puedes colocar en la posición que desees de tu sidebar!

Generador de botones

2007-10-15T19:30:00.001+02:00

Cuando no encuentras exactamente lo que estabas buscando... lo mejor es que lo hagas tú mismo. Y en cuestión de botones, el generador que más me gusta es el de GRSites. Allí puedes hacerlos totalmente personalizados, con colores, efectos (me encanta el de gel o el crystal) o texturas (increible la colección de fondos) e incluir el mensaje que desees con varios tipos de letra. Es imposible que no puedas hacer justo lo que querías!

Yo he hecho éste para volver a mi Microcosmos!!!

Cambiar la imagen de la cabecera

2007-10-14T17:14:00.001+02:00

Cambiar el título de la cabecera del blog por una imagen es muy fácil: sólo hay que ir a Plantilla Elementos de página y clicar sobre editar en la cabecera. Sólo tenemos que elegir entre subir una imagen desde nuestro equipo o desde una web. Lo más difícil es elegir la imagen.

Para eso, Freewebpageheaders puede ser lo que estabas buscando. Tienen más de 500 imágenes geniales y están disponibles en tamaño 800x200.

Otra posibilidad es Blloger Talk, donde ofrecen sólo unas cuantas pero resultonas. Seguro que encuentras una que te guste!

Poner un divider entre las entradas

2007-10-13T16:20:00.001+02:00

Los dividers entre las entradas del blog vienen bien en plantillas muy sencillas que no tengan ninguna separación entre entradas. Después de pelearme un poco con la explicación original para el Blogger antiguo que encontré en el blog de Gem@ por fin conseguí poner el mío:

Vamos allá: nos situamos en Plantilla Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<p class="post-footer-line post-footer-line-3">
INSERTA AQUÍ EL CÓDIGO

Pero CUIDADO! Si tienes una cuarta línea añadida en el pie de las entradas (yo tengo en las páginas individuales el ShareThis para Blogger y las entradas relacionadas) deberás buscar el final del código del post-footer. En este caso tendrías que buscar algo parecido a esto, al menos es donde yo lo he insertado y funciona:
</div> INSERTA AQUÍ EL CÓDIGO </div> </b:includable>

El código que hay que insertar, añadiendo la URL del gif que queramos usar como divider es el siguiente:
<input src="http://urldelaimagendivider.gif" type="image"/>
Prueba con la vista previa; si está a tu gusto guarda la plantillas y ya está!

Puedes encontrar algunos dividers en Glitter Graphics; el mío lo he sacado de aquí.

Ránking de comentarios

2007-10-01T16:54:00.000+02:00

[Concurso BSOS] El premio: hadas y mucho más...

2006-03-31T16:57:00.004+02:00

onocer a Macarena Gea ha sido uno de los mayores placeres que me ha brindado esto de ser blogger "a tiempo parcial". Y no sólo porque sus creaciones me enamoraran desde el primer momento en que, casi por casualidad, descubrí su blog, sino porque esta arquitecta valenciana se hace querer rápidamente, es un verdadero encanto.

Y si me quedo sin palabras para describir a la persona, mucho más me pasa al hablar de la artista; pero quiero que conozcais algo más de su apasionante historia, ya habeis adivinado por qué?

Así que dejaré que su trabajo hable por mí y llenaré esta entrada con las imágenes de las maravillas que salen de sus manos.

Aunque Maca diseña desde hace años complementos como "cura anti estrés", está claro que su creación estrella y la que le ha convertido en todo un referente en la blogesfera hand-made son las hadas, unas preciosas muñequitas de madera y alambre que se pueden utilizar como broche o colgante.

Elegantes, delicadas, exquisitas, realizadas con tal mimo y amor a los detalles que no me extraña que sean verdaderos objetos de coleccionista... y de deseo para las más fashionistas.

Para realizar sus hadas, se inspira en el mundo de la moda, del que es una verdadera apasionada (y experta!): desde looks de revistas hasta un solo accesorio, o incluso una tendencia, un color o un material (ésta es mi favorita de todos los tiempos...) ; aunque también encuentra inspiración en el mundo del cine: películas tan míticas como "Desayuno con diamantes", actuales como "María Antonieta" y por supuesto, su adorada Carrie Bradshow. Cualquier detalle que la atrape hace que comience a darle vueltas para plasmarlo en forma de hada, que de esta manera resultan el complemento más trendy.

Así que llevar uno de estos pequeños tesoros al cuello o la solapa es lucir un trocito de verdadera haute couture:

Por eso no es de extrañar que su trabajo ha aparecido en las más influyentes revistas de moda: Vogue, Elle, Glamour, Woman...
... aunque esto hizo que se viera desbordada por un exceso de pedidos. Pero Maca quería seguir haciendo sus hadas como hasta ahora, de manera totalmente artesanal y poniendo toda su ilusión en cada una de ellas; en una palabra: disfrutando.

De ahí nació la idea del Atelier: más o menos cada quince días pone a la venta en edición exclusiva y limitada (de 5 a 10 hadas) un modelo distinto de sus ya famosísimas haditas, que al estar ya incluso empaquetado cuando lo presenta a sus lectores no tienen lista de espera.
Y ya que actualmente éstas son las únicas haditas en venta, hay que ser muy muy rápido y tener mucha suerte para hacerse con una, porque a veces duran menos de un minuto!!!

Sí, es una suerte hacerse con una de ellas... pero vosotros vais a tener más suerte aún, porque el premio de la segunda edición del concurso BSO de serie será un hadita original de Macarena Gea!!!

Maca ha sido de lo más generosa y ha creado un modelo nuevo y totalmente exclusivo como premio del concurso, así que el ganador será muy muy afortunado!

Sé que estais deseando verla, así que aquí la teneis:

Get Carried Away

Como veis, nuestra hadita está inspirada en el look que Carrie luce en una de las primeras escenas de Sexo en NY: un vestido años 50 verde botella con flores malva bordadas y una pequeña capa blanca y verde que tienen toda la pinta de ser de Prada Resort y un bolso de ensueño en forma de Torre Eiffel... Además, Maca le ha añadido un tocado a juego, que si bien en la peli no aparece, no me cabe duda que la verdadera Carrie no tardaría ni un segundo en ponérselo si lo tuviera a mano! ¿A que es una verdadera maravilla?

Soy consciente de que el premio esta vez es un tanto "femenino", pero estoy segura de que los niños tendreis a vuestras novias-madres-mujeres-hermanas-amigas animándoos como locas para que ganeis el concurso y les regaleis esta pequeña gran obra de arte. Y las chicas... no os morís por tener en vuestras garritas esta preciosidad?

Pues preparados, as, porque el fin de semana empieza la lucha... y muchísima suerte para todos!!!