Cargando...
Meta microcosmos: febrero 2008

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!