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!

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.

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:

Bloggertalk

BlogThemes

Free headers

100pixel

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!

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.

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.

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.

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!

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é.

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.