Cargando...
Meta microcosmos: octubre 2007

La pizarra de Bart

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

Blogs de ayuda para Blogger

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







Citas célebres

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

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

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

Decoración del texto I

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

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

Y el efecto es el siguiente:
subrayado
tachado
sobrerayado
parpadeo

Generador de mensajes

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

Abrir enlaces de la sidebar en ventana aparte

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

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

Últimas entradas

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

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

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

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

Dirección de e-mail en una imagen

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

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

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

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

Difunde Firefox

Por supuesto, yo uso Firefox!

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

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

"Sigue leyendo" con efecto recoger

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

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


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

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

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

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

Se guarda la plantilla y ya está!

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

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

Guardamos los cambios y listo.

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

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

De dónde vienen tus visitas

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

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

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

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

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

Insertar código HTML en una entrada

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

Firmas personalizadas

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

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

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

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

Mandar un email con un click

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

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

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

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

Y éste sería el resultado:


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

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

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

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

Con lo que obtendríamos:

Últimos comentarios

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

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

Generador de botones

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

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

Cambiar la imagen de la cabecera

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

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

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

Poner un divider entre las entradas

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



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

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

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

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

Ránking de comentarios