Cargando...
Meta microcosmos: 2007

Poner un fondo a las entradas

Hacer una entrada un poco diferente a las del resto del blog para dar un toque navideño o para felicitar a nuestros lectores se consigue de una forma sencilla y efectiva simplemente con añadirle un fondo.
El efecto sería más o menos así:

LA CERILLERA (Hans Christian Andersen)
"Era la noche de San Silvestre, la última noche del año. Todo el mundo en la ciudad se apresuraba para llegar pronto a sus casas y refugiarse del frío y la nieve. Iban muy abrigados, y algunos llevaban regalos de Navidad. Tras los cristales ardía la leña en las chimeneas y había agradables aromas de los manjares preparados para la cena de aquella noche.
En medio del ir y venir, un pequeña chiquilla vendía fósforos para ganar algo con que comprar siquiera un pedazo de pan. - Compren fósforos, lo mejor para encender fuego. ¡Compre cerillas, señor! Pero la gente apenas escuchaba su débil voz y desde luego, por nada del mundo sacarían las manos de sus tibios bolsillos con el frío que hacía.
Poco a poco, la noche se fue acercando y la calle se quedó desierta. - ¡Fósforos, fósforos! ¡Cerillas para la lumbre! – Pero la pobre cerillera pronto comprendió que no vendería nada más aquel día. Terminó pronto de contar las escasísimas ganancias. No podía volver así a su casa: sin llevar consigo algo de alimento para su familia..."

El truco original es de Gem@, aunque yo he modificado levemente el código para poderlo usar con una imagen de cualquier tamaño y para ceñir la imagen al texto.

Hacerlo es muy fácil: simplemente hay que copiar el siguiente código en el modo Edición de HTML de una entrada:
<table background="URL_de_tu_fondo" repeat; border="0" cellpadding="0"><tbody><tr><td>AQUÍ VA EL TEXTO BAJO EL QUE QUIERAS QUE APAREZCA EL FONDO</td></tr></tbody></table>
En este código añadiremos la URL del fondo que deseemos poner, pegaremos el texto de nuestra entrada en el lugar indicado y comprobamos con la Vista Previa el efecto. Cuando esté a nuestro gusto ya podemos publicar la entrada.

Como veis, el fondo puede ir sólo en una parte de la entrada, pueden ponerse varios fondos diferentes en una misma entrada e incluso añadir un fondo animado; así podemos conseguir de otra forma diferente que nieve en nuestras entradas más navideñas y no en todo el blog!!!

Rosa hizo una estupenda recopilación de fondos navideños estáticos y animados en esta entrada, y podeis encontrar otros muy adecuados como fondos de entradas en GRSites.

Mensaje personalizado en el post-footer

A raiz de una pregunta de Daniela sobre cómo poner una firma para que aparezca siempre en las entradas aunque tengas configurado el "Leer más"... acabé haciendo una cosa totalmente diferente, con la inestimable ayuda de Digymap, al que le encanta "destripar" la plantilla de mi blog de pruebas. Espero que nuestro (su) pequeño truquito os sea útil.

La idea es poner un mensaje para felicitar la Navidad al final de cada entrada, pero que aparezca en todas las publicadas hasta ahora y aunque tengamos el hack de contraer las entradas. Podeis ver un ejemplo en mi blog de pruebas y en el pie de esta entrada. Por supuesto, el truco puede usarse para poner cualquier mensaje que queramos; es especialmente útil para poner la firma del autor del blog en vez del aburrido "Escrito por" o "Publicado por" de Blogger. Con esta forma ya no tenemos el inconveniente de que si lo ponemos en la plantilla de las entradas sólo aparecerá en las que publiquemos a partir de añadirlo (Fernando, espero que ahora sí que sí)

Lo primero es conseguir nuestro mensaje o firma a través de la página Mylivesignature (teneis las instrucciones detalladas AQUÍ); cuando lo hayamos configurado a nuestro gusto nos proporcionarán un código HTML.

El segundo paso está basado en el truco de Rosa para poner una foto del autor en el post-footer. Nos situamos en Plantilla/Edición de HTML, expandimos artilugios y buscamos la siguiente línea:
<p class='post-footer-line post-footer-line-1'>
Y justo debajo pegamos el código que nos han proporcionado en mylivesignature, AÑADIÉNDOLE UN <br/> AL FINAL. Nos quedaría más o menos así (en azul lo que añadimos):
<p class='post-footer-line post-footer-line-1'>
<a href="http://www.mylivesignature.com" target="_blank"><img src="http://signatures.mylivesignature.com/54485/383/8BFFCB240C3F16041113181576DF124F.png" style="border: none; background: transparent;"/></a><br/>
<span class='post-author vcard'>
Las líneas en negro ya aparecen en la plantilla, las he puesto sólo para que os sirvan de referencia de dónde colocar el código que hay que añadir, que es sólo lo que está en azul.
Clicamos sobre Vista Previa y comprobamos que el mensaje sale justo al principio del post-footer en todas las entradas. Si todo está a nuestro gusto guardamos cambios y ya está!

El código en azul es el de mi mensajito de *** FELICES NAVIDADES *** que veis en el pie de esta entrada; os lo he puesto tal cual por si quereis usarlo.


Headers navideños

Otro buen lugar para dar un toque navideño a nuestro blog, aparte de los dividers, es el header. Cambiar el header en el nuevo Blogger es facilísimo, así que por qué no poner uno navideño estos días? Os dejo unos cuantos que me han gustado especialmente; clicad sobre ellos para verlos en su tamaño real y descargarlos a vuestro equipo:



Generador de imágenes navideñas

En el blog de Evinchi he descubierto una estupenda manera de desear felices fiestas a los lectores de vuestro blog: el generador de imágenes de Imagechef, donde podeis poner el mensaje que deseeis sobre adornos navideños, bolas y muñecos de nieve, regalos, calcetines... incluso sobre el pandero de Santa!

ImageChef.com - Custom comment codes for MySpace, Hi5, Friendster and more

Cuando hayais personalizado vuestra imagen, sólo teneis que pegar el código que aparece al clicar sobre Post to Blog o Myspace en un nuevo elemento HTML/Javascript y arrastrarlo a la posición que desees que ocupe en la sidebar. Pero como ves, también puedes pegarlo sin problemas en una entrada en Edición de HTML.
ImageChef.com - Custom comment codes for MySpace, Hi5, Friendster and more

Efecto de nieve en tu blog

¿Os apetece que nieve en vuestro blog de Blogger como en éste? Pues gracias al código que nos facilitan en Dynamic Drive es facilísimo! Podeis ver el efecto sobre un fondo que no sea blanco aquí.

Lo primero que teneis que hacer es elegir entre estos copos de nieve (o cualquier otra imagen que os guste) y subirla a un alojamiento de imágenes:



Y el código que vamos a usar es el siguiente:
<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
// Configure below to change number of snow to render
var no = 10;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";

///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up||ns6up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow(){
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up){
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}

</script>

Copiamos este código y vamos a cualquier conversor HTML (yo uso el de Blogcrowds) y lo pegamos en la ventana donde dice "Parse HTML". Y en la parte superior del código hay que hacer los siguientes cambios:
- Donde pone //Configure below to change URL path to the snow image
var snowsrc="URL_de_tu_copo"
sustituye URL_de_tu_copo por la URL del copo que te guste más.
- Donde pone // Configure below to change number of snow to render
var no = 10;
ponemos el número de copos que queremos que caigan (el número irá en función del tamaño del copo para no dificultar la lectura del blog).
- Donde pone // Configure whether snow should disappear after x seconds (0=never): var hidesnowtime = 0;
si queremos que los copos desaparezcan al cabo de un tiempo, cambiamos el 0 por el número de segundos que deseemos.
- Donde pone // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";
elegimos pageheight si queremos que los copos bajen hasta el pie del blog antes de que aparezcan otros, o windowheight si queremos que desaparezcan tras rebasar el borde de la pantalla.

Cuando hayamos hecho los cambios clicamos sobre el botón que pone "Parse".

Vamos a Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
</body>
y justo antes pegamos el código que nos ha proporcionado el conversor HTML.

Clicamos sobre Vista Previa para comprobar el resultado y si queremos vamos probando a cambiar los parámetros variables; cuando estamos satisfechos guardamos cambios y listo! Cuando pasen estas fechas y querais quitarlo, sólo hay que borrar cuidadosamente el código que hemos añadido a la plantilla (Gracias Rosa por la puntualización).

P.D.: Teneis otro truco precioso para que nieve en el blog en El escaparate.

Imagen flotante para ir arriba

Pensando pensando... quizá os parezca excesivo poner en el pie de cada entrada un icono para volver a la parte superior del blog, así que la opción que se me ha ocurrido es poner una sola imagen que quede flotante en la parte inferior de la pantalla.

Variando un poquito las explicaciones de Aprender en la red he conseguido por fin exactamente lo que andaba buscando.

Una vez más nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
</head>
Y justo encima añadimos el siguiente código:
<a href='#' style='display:scroll;position:fixed;bottom:0px;right:0px;' title='VOLVER ARRIBA'><img src='URL_de_tu_imagen'/></a>

Añadimos la URL de la imagen que queramos poner, que no debe ser muy grande (lo máximo 100X100) para no descuadrar la plantilla, ponemos tras title lo que queramos que se lea en un cartelito al poner el ratón sobre la imagen, y si queremos variamos su distancia a los márgenes inferior y derecho de la pantalla en bottom y right respectivamente.
Clicamos sobre Vista Previa para comprobar el efecto y si todo está a nuestro gusto guardamos cambios y listo!

Os dejo la URL de mi abeto por si os gusta: http://img222.imageshack.us/img222/4348/arbolnavidadwd4.png

Ir arriba desde el pie de las entradas

¿Habeis visto el muñeco de nieve que hay en el pie de las entradas a la derecha? Pues si clicais sobre él os lleva al principio del blog sin tener que usar la barra de scroll! ¿Será la magia de la Navidad?

En realidad es la magia de la Gran Rosa, y además muy fácil, así que vamos a poner un pequeño icono en pie de las entradas que nos lleve al inicio del blog en un periquete.

El código que tenemos que añadir es éste:
<!--Ir arriba -->
<a href='#' title='VOLVER ARRIBA'><img align='right' src='URL_de_tu_imagen'/></a>

En el código tenemos que poner en el sitio indicado la URL del icono que más nos guste; también podemos variar el title (lo que aparecerá en un pequeño cartel al poner el cursor sobre el icono) e incluso cambiar el icono por una paqueña leyenda, sustituyendo <img align='right' src='URL_de_tu_imagen'/> por el texto que queramos mostrar.

Ahora vamos a Plantilla/Edición de HTML y expandimos artilugios. Dónde colocar el icono depende de los gustos de cada uno y cómo tenga configurado el pie de las entradas, pero Rosa apunta tres posibilidades:

1.- Justo encima de la siguiente línea:
<!-- quickedit pencil -->

2.- Justo encima de la siguiente línea:
<p class='post-footer-line post-footer-line-3'/>

3.- Donde lo he colocado yo, justo después de la siguiente línea:
<div class='post-footer'>

Podeis ir probando con la Vista Previa y cambiándolo de lugar para comparar los resultados; cuando quede a vuestro gusto guardais cambios y listo!

Huelga decir que las instrucciones pueden usarse para poner cualquier icono que sea discretito; los que mejor quedarían a mi modo de ver son flechas hacia arriba o casitas.
Aunque mi icono es bastante grande, os lo pongo por si quereis probarlo, y de propina otro navideño que también creo que quedaría bien:

Cambiar el cursor (sólo en IE)

Ya que la bolboreta me pide un cursor para su blog, aprovecho para armar una entrada en un periquete y añadir una chorradita más a la decoración navideña. Como el resto de decoración, en realidad las explicaciones pueden usarse para poner la imagen que queramos, pero nuestro nuevo cursor sólo será visible con el navegador Internet Explorer.

Siguiendo las instrucciones de Ayuda para tu blog es fácil cambiar la flechita del cursor o puntero del ratón sobre nuestro blog. Así que vamos a ello.

Lo primero es elegir la imagen que deseamos para nuestro cursor; podemos buscar en páginas como myspacecursor o Poqbum. Cuando hayamos encontrado uno que nos guste, clicando sobre ella nos darán un código que será más o menos así:
<style type="text/css">body {cursor: url(http://www.myspacecursor.net/xmas/9.ani); }</style><br />
<a href="http://www.myspacecursor.net" title="Free Cursors">Free Cursors</a><a href="http://www.freelayoutsnow.com" title="Myspace Layouts">Myspace Layouts</a><a href="http://www.getmyspacecomments.com" title="Myspace Comments">Myspace Comments</a><br />

Cuánta publicidad, verdad? El ejemplo es de myspacecursors, en poqbum es aún peor. Si pegáramos este código en un nuevo elemento de página HTML/Javascript funcionará, pero NO LO HAGAIS, porque también nos aparecerán anuncios muy molestos. Pues bien, vamos a arreglárnoslas para prescindir de ellos. Por ahora, lo único que hay que hacer es copiar este código y lo pegamos en el bloc de notas.

Nos vamos a Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<body>
Y justo debajo pegamos el siguiente código:
<style type="text/css">body {cursor: url(URL_del_cursor.ani); }</style>
donde sustituiremos URL_del_cursor.ani por la URL que aparece entre paréntesis en el código que hemos copiado en nuestro bloc de notas y acaba en .ani; es decir, lo que yo he resaltado en negrita.
Clicamos sobre Vista Previa para comprobar que el puntero ha cambiado y guardamos cambios.

Ahora nuestro cursor será la imagen elegida sobre el blog y una manita sobre los enlaces.
De nada, apa!

Dividers navideños

Creo que el sitio que más me gusta para darle un toque navideño al blog son los dividers, esas líneas de separación entre las entradas del blog; quedan muy bien en plantillas sencillas que no tengan decorado el pie de las entradas o ningún elemento entre las entradas. Clicad sobre cada uno de ellos para ver su tamaño real:



Ya expliqué en otra entrada cómo poner un divider, pero como (típico de mí) lo hice de la forma más difícil a partir de las instrucciones para el Blogger antiguo, ahora voy a poner la manera supersencilla que encontré en el blog de Gem@ para el nuevo Blogger.

Allá vamos: nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<b:include data='post' name='post'/>
Justo debajo añadimos este código:
<img src="aquí-la-url-de-la-imagen"/>
Y si queremos que la imagen quede centrada lo envolvemos con "center" así:
<center><img src="aquí-la-url-de-la-imagen"/></center>
Usamos la Vista Previa y si nos gusta el resultado guardamos cambios y ya está.

Puedes encontrar más dividers muy navideños en Glitter Graphics.

Poner un icono de RSS

Como segunda decoración de Navidad he decidido cambiar el aburrido mensaje de "Suscribirse a" anterior al enlace de las RSS que hay al pie del blog por algo más acorde con las fechas, sobre todo después de encontrar en la página de anietok2 una preciosa colección de iconos RSS muy navideños:
Siguiendo las instrucciones de Beautiful Beta es realmente fácil poner un icono que sirva de enlace a la página de las feeds que se abra en una nueva ventana, así que allá vamos: nos situamos en Plantilla/Edición de HTML y expandimos artilugios. Buscamos la siguiente línea:
<data:feedLinksMsg/>
Y la sustituimos por este código:
<a href='URL-de-tus-RSS' target='_blank'><img alt='Suscríbete a las feeds RSS' border='0' src='URL-de-la-imagen'></img></a>
Clicamos sobre Vista Previa y si estamos satisfechos con el resultado guardamos cambios y ya está!

Los paquetes ZIP de 12 iconos navideños se encuentran listos para descargar con fondo blanco, negro y transparente en la página de Ajaxpath. Aunque obviamente, las explicaciones valen para cambiar la frase "Suscribirse a" por cualquier otro icono RSS que os apetezca.

Cambiar el icono de "Enviar entrada por correo"

Con esta entrada voy a empezar a decorar el blog para las Navidades, que me encantan. Perdonad los amantes de la sobriedad si el blog se sobrecarga un poquito estos días... pero en estas fechas todos nos volvemos algo "excesivos". El 7 de Enero volvemos al blanco liso, prometido.

Y lo primero que he hecho ha sido cambiar el icono de la función "Enviar esta entrada por correo electrónico" en el pie de las entradas basándome, cómo no, en explicaciones de El escaparate. Estas indicaciones sirven para cambiar el pequeño sobrecito gris por cualquier imagen que deseeis, pero no tiene que ser muy grande, yo diría que lo máximo 22x22.

ACLARACIÓN: Mi gif es mucho más grande, 50x50. He intentado reducirlo con el GIFWorks pero no se leen las letras. En este blog queda bien por dos razones: en el cuerpo de las entradas queda un espacio en blanco debido a la firma y la segunda línea del pie de las entradas (los comentarios) quedan más hacia la izquierda que la primera (archivado como). Si vuestro blog no cumple estos requisitos, probablemente no quede bien, pero siempre podeis probar con la vista previa antes de guardar los cambios y si no os gusta descartarlos o poner cualquier otra imagen, mientras sea pequeñita.

¿Cómo me las arreglo siempre para enrrollarme de estas maneras? Hala, vamos a ello. Dos pasos:

1.- Vamos a Plantilla/Edición de HTML y añadimos el siguiente código en las CSS (en caso de duda, justo antes de ]]></b:skin> ):
.email-post-icon2 {
background: url("AQUI LA DIRECCIÓN DE TU IMAGEN") no-repeat left;

/* makes an 18x18 box */
padding:20px;

margin:0 0 0 .5em;
}

2. Expandimos elementos y buscamos la siguiente línea:
<span class='email-post-icon'> </span>
y la sustituimos por la siguiente
<span class='email-post-icon2'> </span>

Usad la Vista previa para ver cómo queda tu nueva imagen y si te gusta clicas sobre Guardar plantilla y ya está! Si la imagen queda cortada podeis probar a aumentar el padding del primer código.

Por si quereis probar, la URL de mi gif es http://img204.imageshack.us/img204/5817/emailnavideomm8.gif
En la sidebar de este blog, en "Siempre a mano" encontrareis unos cuantos buscadores de iconos.

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!