Meta microcosmos: noviembre 2007

Cuenta atrás en Flash

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

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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.