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!!!
Más plantillas para Blogger
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!