Cargando...
Meta microcosmos: 2008

Formulario de comentarios Blogger

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

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

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

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

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

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

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

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

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

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

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é?

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

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!


Seguro que encontrais alguna que os guste!!!

Personaliza tu plantilla!!!

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

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

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

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!