Da de alta tu blog en los buscadores

Si quieres que tu blog aparezca en los resultados de búsqueda de los buscadores más usados, tienes que darte de alta con cada uno de ellos. De este modo estarás en su base de datos y cuando los robots hagan su rastreo habitual podrán visitar tu blog.
Muchos se quejan de que no aparecen en los buscadores, pero el primer paso para que Google te visite es que lo invites a pasar.
Así que te dejo los links para que des de alta tu blog en los tres principales buscadores.

Google

http://www.google.es/addurl/?hl=es&continue=/addurl

Yahoo

http://add.yahoo.com/fast/add?75100781+ES

Bing

http://www.bing.com/docs/submit.aspx

Ya que te has dado de alta tienes que entender que para que aparezcas en los resultados debes ser paciente y trabajar en el contenido de tu blog. Hay tres puntos que debes considerar:
Alta en buscadores, es cuando damos de alta nuestro blog.
Indexación en buscadores, es cuando los buscadores ya dieron de alta nuestro sitio y han indexado el contenido en su base de datos.
Posicionamiento, que es trabajar porque nuestro blog aparezca en las primeras posiciones con las frases o palabras clave referentes a nuesto blog.

Así que primero a darse de alta y mientras esperamos a que pasen los robots por el sitio a trabajar con un mejor contenido.

Crea foto montajes divertidos

Platicando con Víctor recordé un generador de imágenes muy creativo en el cual puedes poner tu foto prácticamente donde quieras. Es una herramienta muy buena para ayudarte en el diseño de tu blog en caso de que quieras cambiar la cabecera o adornarlo un poco más.
Se trata de Photofunia, un generador de imágenes en el cual podrás hacer montajes en escenarios como museos, calles, pinturas, revistas, y si eres admiradora de Beckham podrás hacer que tu rostro esté tatuado en el cuerpo del futbolista.

Crear estas divertidas imágenes es muy sencillo, es sólo cuestión de elegir una plantilla, cargar la foto y listo. Les dejo unas imágenes de ejemplo.

Enlace | Photofunia.com

Enviar una foto por correo

Este código ya no funciona, al hacer click abre el cliente de correo pero no se adjunta la foto. Puede seguirse usando, pero ya no para enviar postales.

Tal vez tengas un fotoblog, o sino simplemente quieras compartir una imagen que tanto te gusta. Puedes hacer esto con un pequeño código que les permitirá a tus lectores enviar una foto por correo, algo así como "enviar una postal a un amigo".

El código es el siguiente y va dentro de un elemento HTML/Javascript:

<center><img border="0" alt="Postal" src="URL de la imagen" name="Postal"/></center>
<center><input value="Enviar postal" onclick="window.location = 'mailto:?subject=Postal&body=<img src=URL de la imagen>'" type="button"/></center>

IMPORTANTE: La URL de la imagen en color verde va sin comillas.

Puedes ver un ejemplo de cómo queda en este blog de pruebas, la postal está hasta abajo. Si le das click en "Enviar postal" se abrirá tu correo electrónico con la imagen insertada lista para enviar a quien quieras. Sólo debes cambiar la URL de la imagen.
Si lo prefieres puedes ver cómo queda en esta foto (obviamente el botón no funciona).

Eliminar frame en los resultados de Imagenes de Google

AVISO
No se recomienda usar este código en la nueva interfaz de Blogger o podría evitar el ingreso a la edición HTML de la plantilla.

Si las fotos que tienes en tu blog aparecen el los resultado de Búsqueda de Imágenes de Google entonces sabrás que cuando alguien da click sobre la foto se abre tu blog y arriba de él un marco (frame) con los datos de la imagen.


Si quieres eliminar este frame entonces pega este script antes de la etiqueta </head>

<script type='text/javascript'>
//<![CDATA[
var miURL, Blogger;
miURL= window.location.href;
blogger = miURL.indexOf("token=");
if(Blogger==-1) {
if (top.location != self.location) { top.location = self.location; }
}
//]]>
</script>

Con esto cuando un usuario le dé click a una imagen tuya desde los resultados de Google abrirá tu página sin el marco superior.

Codigo para que nos enlacen

Con este código en nuestra sidebar daremos la posibilidad a otros bloggers de que nos enlacen con un pequeño banner.
Vamos a Diseño > Elementos de la página > Añadir un gadget > HTML/Javascript y pegamos este código:

<center><textarea rows="3" cols="30" onclick="this.select();"><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></textarea></center>
<center><a href="URL de tu blog"><img alt="Nombre de tu blog" src="URL de la imagen"/></a></center>

El resultado es algo como este:

<a href="http://ciudadblogger.com/" rel="dofollow"><img alt="Ciudad Blogger" src="http://lh6.googleusercontent.com/-yvOrGKj0Nzg/Ttfz2xPjA1I/AAAAAAAAGjc/ok3bG556p-A/s80/ciudadblogger02.png" title="Ciudad Blogger"/></a>

Este código está programado para que cuando se dé click sobre él se seleccione automáticamente todo el texto, si desean quitar esta función entonces eliminan donde dice: onclick="this.select();"
Cambian los datos en color rojo por los suyos y listo, tendrán un código para que los enlacen con una imagen. El área de texto donde aparecerá el código puede ser modificado, esto según el tamaño que lo quieran, sólo cambian el tamaño de rows (el alto) y el de cols (ancho).

Nube de etiquetas en movimiento

ATENCIÓN:
Este código presentó problemas con el alojamiento de un archivo, el archivo ya ha sido realojado y se ha modificado el código.
Si tu nube de etiquetas ya no se ve elimina la anterior y repite estos pasos.
Si tienes problemas con la nube de etiquetas en Internet Explorer visita la entrada de Oloblogger con otra opción para colocar la nube.

Podemos poner una nube de etiquetas en movimiento (tag cloud) en la sidebar de Blogger con un poco de flash. Para ello usaremos sólo un código que hará todo el trabajo sucio.

Lo primero es ir a Diseño > Edición de HTML y SIN expandir artilugios buscamos esta etiqueta:

<b:section class='sidebar' id='sidebar' preferred='yes'>

Si usas una plantilla del Diseñador de Blogger entonces deberás buscar esta línea:

<b:section-contents id='sidebar-right-1'>

Justo debajo de ella pegamos lo siguiente:

<b:widget id='Label99' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
&lt;object type="application/x-shockwave-flash" data="http://ciudadblogger.hostzi.com/tagcloud.swf" width="190" height="200" allowscriptaccess="always" &gt;
&lt;param name="movie" value="https://sites.google.com/site/ciudadbloggerfiles/Home/tagcloud.swf" /&gt;
&lt;param name="bgcolor" value="#ffffff" /&gt;
&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
&lt;/tags&gt;" /&gt;
&lt;p&gt;Blogumulus by &lt;a href='http://www.roytanck.com/'&gt;Roy Tanck&lt;/a&gt; and &lt;a href='http://www.bloggerbuster.com'&gt;Amanda Fazani&lt;/a&gt;&lt;/p&gt;
&lt;/object&gt;
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Ahora podemos personalizar nuesta nube con los datos que están en color rojo:
Nube de etiquetas, es el nombre del gadget
190 es el ancho
200 es el alto
#ffffff es el color de fondo, en este caso blanco
000000 es el color de la letra
style='12' es el tamaño de la letra
"tspeed", "100" es la velocidad con la que se mueven las etiquetas

Ahora sólo guardan los cambios y listo. Este elemento lo pueden arrastrar donde ustedes quieran.

NOTA: Siempre antes de hacer un cambio en la plantilla deben guardar una copia de ella.

U comment I follow

Después de pensar detenidamente sobre este tema, he llegado a la conclusión de que el atributo rel="nofollow" en los enlaces de los comentaristas no afecta la indexación del contenido de los comentarios, únicamente pone un límite a la URL del comentarista, por lo que dejar este atributo no afecta en el posicionamiento del blog.

Aunque ya tiene un par de años que inicio la campaña U comment I follow, vale la pena hablar sobre ello para informarles de qué se trata y puedan decidir si se unen o no.

U comment I follow (Tú comentas, yo te sigo) tiene la idea de aumentar los comentarios de nuestras entradas, así como lograr un mejor posicionamiento en la web.
Pero primero vamos a dejar claro cómo funciona; las "arañas" tienen como tarea revisar todo nuestro sitio para poder indexarlo en los buscadores, estas arañas están programadas para rastraer todo lo que encuentren a menos que encuentren algo que les diga qué elementos NO deben rastrear, ellas respetarán estas prohibiciones y pasaran por alto esos documentos en su tarea de rastreo.
Ahora bien, este algo que les indica lo que deben o no rastrar es un atributo que se encuentra en el código HTML de un sitio y está establecida como rel="nofollow". Nuestras plantillas (incluso la tuya) tienen este atributo en el área de los comentarios, esto es una medida que toman tanto Google como webmasters para evitar una avalancha de spam. Así que lo que tus lectores comentan no se está indexando en los motores de búsqueda, y esto puede ser un tanto perjudicial en el mundo SEO.


U comment I follow se trata pues, de quitar este atributo de nuestras plantillas para dejar que las arañas rastreen todo el contenido, incluyendo los comentarios.
¿Cómo nos beneficia? Al dejar que todo el contenido se indexe permitimos uno, que todo lo que nuestros lectores comenten aparezca en los resultados de Google, y dos, que como consecuencia se animen a comentar en nuestras entradas enriqueciendo el contenido.
Así pues hay tanto usuarios como compañías quienes están en contra de que se remueva este atributo pues alegan que sólo se incita al desarrollo de spam. Lo cierto es que a todos nos gusta la publicidad gratis y que vale la pena que los comentarios sean indexados pues es un modo de darle un reconocimiento a todo aquel que contribuye con el contenido de nuestro blog.
Ciertamente lo ideal es educarnos para ser buenos bloggers y dejar comentarios de calidad, con contenido que contribuyan positivamente en un post, y por qué no, de paso hacer referencia de nuestro blog (si viene al caso) para que nos ayude a elevar el PageRank.


Para quitar este atributo y permitir que todo el contenido se indexe, vamos a Diseño > Edición de HTML, marcamos la casilla Expandir artilugios y con CTRL+F busca este código:

<a expr:href='data:comment.authorUrl'
rel='nofollow'><data:comment.author/></a>

Elimina el rel='nofollow'. Luego busca este otro código y haz lo mismo:

<a expr:href='data:backlink.url'
rel='nofollow'><data:backlink.title/></a>

Si lo deseas puedes poner uno de los logos en tu blog que indican que te has unido al movimiento, de este modo tus lectores sabrán que si comentan su comentario podrá aparacer en las búsquedas de Google.

Imagen que cambia al pasar el mouse (script)

Con un pequeño script podemos hacer cambiar una imagen por otra al pasar el cursor sobre ella, esto le agrega mayor dinamismo a nuestro blog. Sólo necesitamos tener dos imágenes del mismo tamaño y este código que les daré a continuación.

Vamos a Diseño > Elementos de la Página > Añadir un gadget > HTML/Javascript y pegamos lo siguiente:

<script language="JavaScript">
function cambiar (flag,img) {
if (document.images) {
if (document.images[img].permitirloaded) {
if (flag==1) document.images[img].src = document.images[img].permitir.src
else document.images[img].src = document.images[img].permitir.oldsrc
}
}
}
function preloadcambiar (img,adresse) {
if (document.images) {
img.onload = null;
img.permitir = new Image ();
img.permitir.oldsrc = img.src;
img.permitir.src = adresse;
img.permitirloaded = true;
}
}
</script>


<a onmouseover="cambiar(1,'IMG1');" onmouseout="cambiar(0,'IMG1');" href="URL del enlace">
<img border="0" src="URL de la imagen UNO" onload="preloadcambiar(this,'URL de la imagen DOS');" name="IMG1"/></a>

Deben cambiar los datos en rojo por los suyos, guardan los cambios y listo. Tendrán una imagen dinámica sin necesidad de tocar la plantilla. Pueden ver un ejemplo en la foto de mi perfil aquí.

Crea tu logo estilo Google

Si estás envuelto en la Googlemanía seguro querrás tu nombre con las letras y colores de Google. Este generador es bastante simple de usar, sólo tienes que entrar a Goglogo, escribir tu nombre, click en Create my search page y listo, tendrás tu propio logo estilo Google.

Una vez que tengas tu nombre googlelizado (sí, acabo de inventar esa palabra) podrás usar la página como tu página de inicio, lamentablemente cuando se usa la barra de búsqueda abre otro sitio que es el que hará la búsqueda, además de que tiene publicidad incrustada y una ventana pop up se abre cada que se ingresa al sitio. Pero bueno, pueden crear su nombre y guardar la imagen y usarla donde ustedes quieran.

ATENCIÓN:

Hay reportes sobre posibles virus troyanos alojados en la página de googlogo.com

Por la seguridad de tu equipo, se recomienda no entrar

Enlace: http://www.goglogo.com/

Radio online en tu blog

Una de las herramientas más solicitadas es cómo poner una radio en Blogger. Así que les diré cómo poner esta herramienta de modo que puedan tener su estación de radio favorita en su blog.

Primero vamos a Diseño > Elementos de la página > Añadir un gadget y seleccionamos HTML/Javascript. Ahí pegamos el siguiente código:

<embed pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" showgotobar="false" transparentatstart="true" autostart="false" showstatusbar="true" src="URL de la emisora" type="application/x-mplayer2" height="45" width="300" bbclient="0" name="MC1"></embed>

Ahora en "URL de la emisora" vamos a poner la dirección de la radio online. Guardamos los cambios y listo.

40 Principales Asturias

Sino tenemos idea de cuál es la dirección de la emisora podemos conseguir la dirección desde un sitio que aloje estaciones de radio. Los pasos son los siguientes:

1. Entramos a Tu televisión online y damos click en Emisoras de radio.
2. Seleccionamos el país y elegimos una estación.
3. Esperamos a que cargue el reproductor y damos click derecho sobre la pantalla.
4. Damos click en Propiedades.

5. Ahora vemos que en la ventana de Propiedades hasta abajo en Ubicación dice la dirección URL de la estación, sólo la seleccionamos y la copiamos.

Con este pequeño código tendremos una estación de radio online en el blog, si queremos que la radio se inice automáticamente cuando se abre la página entonces cambiamos en el código autostart="false" por autostart="true".
Funciona a la perfección, si notan que no se escucha entonces es debido a la transmisora de radio o bien que no tienen correcta la dirección. Pueden incluso conseguir la URL de una estación de televisión online y pegar la dirección; sólo ajustamos el alto (height) del reproductor para que aparezca la pantalla y tendremos televisión online!

(24/ABR/09) ACTUALIZACIÓN:

Es posible que en algunos navegadores como Mozilla, la función autostart="false" no funcione y la música se reproduzca de modo automático, si esto les sucede entonces cambienlo por autostart="0"

Mostrar la barra cargando pagina

Puedes poner en Blogger la barra "cargando página" que indicará que los elementos del sitio se están cargando. Una vez que el sitio cargue todos los elementos la barra desaparecerá. Para colocarlo en nuestro blog nos ayudaremos con un script, los pasos son los siguientes:

Vamos a Plantilla | Edición de HTML y antes de </head> pegamos lo siguiente:

<script type='text/javascript'>
window.onload = detectarCarga;
function detectarCarga(){
document.getElementById("imgLOAD").style.display="none";
}
</script>

Guardamos los cambios y vamos a Diseño | Elementos de la página y en un elemento HTML/Javascript pegamos lo siguiente:

<div id="imgLOAD" style="text-align:center;">
<b>Cargando...</b>
<img src="URL de la imagen" />
</div>

Este elemento lo podemos arrastrar donde mejor nos guste, aunque generalmente va arriba de los posts. Donde dice URL de la imagen lo cambian por la dirección de la imagen que quieran. Les dejo unas cuantas imágenes para que usen.

Cambiar el color del texto seleccionado

Este "truco" es para cambiar el color de fondo que aparece al seleccionar un texto, esto es para poder personalizar más su blog y poder usar un color que combine o contraste con los colores de su página. Ya que por defecto el navegador nos da un color predeterminado, generalmente azul.

Para personalizarlo necesitamos un poco de CSS, vamos a Diseño > Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:

/* Color texto seleccionado */
::selection {
background: #ccc;
}

::-moz-selection {
background: #ccc;
}

El color lo pueden cambiar por el que ustedes quieran, sólo ingresan el código de color en background. En el ejemplo el color cambia a gris.


Puedes ver cómo queda seleccionando cualquier parte de texto en esta entrada, el color que yo he puesto es gris oscuro.

(23/ABR/09) ACTUALIZACIÓN:
Este efecto funciona sólo para Firefox, Safari, Google Chrome, Konqueror, Opera y Flock.

Entradas con imagen de fondo

Podemos darle un estilo muy personalizado a nuestras entradas con una imagen de fondo como esta que estoy publicando. Para tener este efecto en el texto de nuestras entradas sólo usamos el siguiente código dentro del post: <table bordercolor="#000000" cellspacing="5" cellpadding="5" width="100%" background="http://URL de la imagen de fondo" border="0"><tbody><tr><td><p>Aquí va el texto de la entrada. Si desean agregar una imagen encima de la imagen de fondo sólo agregan la siguiente etiqueta y dentro de ella la URL de la imagen. <img style="float:right; margin:5px 5px 5px 5px;cursor:pointer; cursor:hand;width: 200px; height: 183px;" src="http://URL de la segunda imagen" border="0" alt="" /> y aquí continua el texto de la entrada.</p></td></tr></tbody></table> Ahí pueden ver dónde deben escribir el texto de la entrada, y en caso de que deseen usar una foto encima de la imagen de fondo sólo agregan la etiqueta correspondiente como se explica en el código. Si no desean una imagen encima entonces eliminan esa etiqueta. En bordercolor pueden modificar el ancho del borde de la imagen, sino desean que tenga el borde lo dejan en cero como está. El margen entre la imagen y el texto lo pueden modificar en cellspacing y cellpadding. La posición de la segunda foto pueden cambiarla en float; cambian right si la desean a la derecha; left, a la izquierda o center si la quieren centrada. El tamaño de la segunda imagen lo modifican con width (ancho) y height (alto). Les recomiendo que usen una imagen de fondo que no dificulte la lectura de la entrada. De igual modo elijan una imagen que sea del tamaño adecuado al tamaño del post, ya que una foto muy chica se repetirá muchas veces hasta ocupar el espacio. Que se diviertan personalizando sus posts.

Imagen de correo personalizado

Si quieres darle más estilo a tu dirección de correo electrónico puedes personalizarlo con este generador de íconos de email. El proceso es simple, sólo entra a la página de E-Mail Icon Generator y escribe tu dirección de correo, elige el cliente de mail que usas y la extensión de tu correo (.com, .es, etc.)
A continuación tendrás tu dirección de correo electrónico personalizada, puedes usar el link que te da la página para tener acceso a la imagen o guardar la imagen en tu equipo. Yo recomiendo que hagas lo último y luego la subas al servicio de alojamiento que uses.

Bueno, ahora vamos a ponerla en nuestro blog; abrimos un elemento HTML/Javascript y pegamos esto:

<a href="mailto:tucorreo@gmail.com"><img border="0" alt="Email" src="URL de la imagen"/></a>

Sólo cambia lo que está en rojo y listo, tendrás un acceso a tu correo de forma original.

Enlace | E-Mail Icon Generator

Como crear un mini test

Este script es para que puedan poner a prueba los conocimientos de sus lectores a través de un mini cuestionario, pueden personalizarlo como quieran y aumentar el número de preguntas o respuestas. No se guarda el registro de los resultados pues es más como un juego online para que se diviertan. Este es un ejemplo:

¿Qué significa W.W.W.?
What we want!
Baño en inglés
World wide web
No significa nada

¿Qué les pareció? Para usarlo sólo deben pegar el siguiente código en un post o en un elemento HTML/Javascript:

<center><font size=4>¿Qué significa W.W.W.?</font></center>
<input name="b" onclick="alert('Ni un poquito cerca');b.checked;" type="radio">What we want!
<input name="b" onclick="alert('¿En qué estás pensando?');b.checked;" type="radio">Baño en inglés
<input name="b" onclick="alert('¡Correcto!');b.checked;" type="radio">World wide web
<input name="b" onclick="alert('Hay que leer más');b.checked;" type="radio">No significa nada

Lo primero a modificar es la pregunta que está en azul, pueden cambiar el tamaño de la letra donde dice font size.
Lo que está en color rojo entre paréntesis es el texto que aparecerá en el mensaje de alerta.
Lo que está en verde son las posibles respuestas.
Pueden hacerlo tan largo o tan corto como ustedes quieran. Yo le he puesto un color de fondo para hacerlo más atractivo, si quieren hacer lo mismo sólo ponen antes del código esto: <div style="background-color: #c27ba0;"> y al final del cuestionario cierran con </div>

Inicia la campaña Review por Review

Pues después de habernos tenído un tiempo a la espectativa, nuestro amigo Franco lanzó la campaña Review por Review.
¿De qué se trata esto? Bueno, esta campaña más que un intercambio de enlaces es un intercambio de opiniones y recomendaciones sobre otros blogs. Los beneficios como él nos lo explica están el incremento de visitantes nuevos y por supuesto posicionamiento en el PageRank.
Para solicitar tu review y que se publicado en Cyberbloggero sólo manda un correo a cyberbloggero@gmail.com añadiendo la dirección de tu blog para que hagan tu review y empieza a ganar visitas.
Para conocer más sobre el tema haz click aquí.

Script para añadir a favoritos

Este pequeño script hará que los demás los puedan agregar a sus favoritos en el navegador de internet. Les mostraré dos variantes, una con texto y otra con una imagen. El script es el siguiente y deben pegarlo en un elemento HTML/Javascript:

<script>
function agregar(){
// Para IE
if ((navigator.appName=="Microsoft Internet Explorer") && (parseInt(navigator.appVersion)>=4)) {
var url="http://nombre-de-mi-blog.blogspot.com/"; //
var titulo="Nombre de tu blog"; //
window.external.AddFavorite(url,titulo);
}
// Para Firefox
else {
if(navigator.appName == "Netscape")
//
window.sidebar.addPanel("Nombre de tu blog", "http://nombre-de-mi-blog.blogspot.com","");
}
}
</script>
<a href="javascript:agregar()">Agrégame a tus favoritos</a>

Agrégame a tus favoritos

Sólo deben cambiar lo que está en rojo por sus datos. Para cambiar el texto por una imagen cambiamos esta última parte:

<a href="javascript:agregar()"><img alt="favoritos" src="http:URL de la imagen"/></a>

Quedaría así:

Aquí les dejo unas imágenes que hice y que pueden usar libremente.

Crea tu caja 3D

3D Package es un generador online de cajas 3D muy sencillo de utilizar. Sólo debes subir las fotos de los tres lados y listo, 3D Package hará una caja tipo software para ti, pero no sólo eso ya que puedes elegir entre una caja 3D, una caja de CD o DVD. Es ideal para crear el diseño de la cabecera de tu blog o para lo que se te ocurra. Después de crearlo puedes escoger guardarlo en formato png, jpg o gif. Que se diviertan creando su caja.

Enlace | 3d-pack.com

Poner botón 'Ir atrás' o 'Regresar' en el blog

Tener un botón que nos mande al contenido anterior puede hacer más fácil la navegación a nuestros lectores. Para colocarlo hacemos lo siguiente:

1. Hacemos una copia de respaldo de la plantilla por si no nos gustara el resultado; para hacerla vamos a Diseño > Edición de HTML > Descargar plantilla completa.
2. Ahora ahí mismo marcamos la casilla Expandir plantillas de artilugios y buscamos el texto:

<!-- feed links -->

3. debajo de él pegamos lo siguiente:

<form> <input type="button" value="Volver atrás" name="Volver atrás" onclick="history.back()" /> </form>

4. Guardamos los cambios y damos click en el título de un post para ver el resultado. El botón de atrás quedará abajo de los posts, si quieres puedes moverlo de lugar y colocarlo donde más te guste. Incluso, sino quieres moverle a la plantilla sólo pega el código al final de cada post.

Banner cambiante (rotador de banners)

Tener un banner con imágenes cambiantes nos es de mucha ayuda si tenemos muchos banners que mostrar pero queremos ahorrarnos espacio, ya que en el mismo lugar los banners irán cambiando cada tres segundos.

Para colocarlo entra a Plantilla | Edición de HTML y pega antes de </head> lo siguiente:

<script type='text/javascript'>
//<![CDATA[
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('rotator').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000); }
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);}
else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return; }
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}
//]]>
</script>

Ahora pega antes de ]]></b:skin> lo siguiente:

/* BANNER CAMBIANTE
----------------------------------------------- */
{margin: 0; padding: 0;}
#rotator {
border: 1px solid #000000;
overflow: hidden;
margin: 0px ;
padding:2px;
position: relative;
width: 430px;
height: 60px;
}
#rotator img {
border: 0;
width: 430px;
height: 60px;
}

Las medidas las puedes cambiar de acuerdo al espacio de tu blog, para ajustar el ancho cambia donde dice width y para cambiar el alto en height.

Por último entra a Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y pega lo siguiente:

<div id="rotator">
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
<a href="URL del enlace"><img alt="Título" src="URL de la imagen" /></a>
</div>

Cambia los datos de la URL del enlace e imagen y listo.
En color azul se indica el tiempo en milisegundos que tarda en cambiar cada banner, se puede modificar por otro valor.

Mostrar últimas entradas (transitorio)

Gracias a Hoctro podemos implementar este gadget en nuestro blog. Se trata de un widget que muestra los titulares de los últimos post en forma cambiante. Pueden ver un ejemplo aquí. Para ponerlo en nuestro blog hacemos lo siguiente:

1. Vamos a http://code.google.com/apis/ajaxfeeds/signup.html, aceptamos los terminos y condiciones, escribimos la dirección de nuestro blog y damos click en Generar clave de API.
2. Ahora vamos a Diseño > Edición de HTML y SIN expandir los artilugios pegamos antes de </head> lo siguiente:
   

   <script src='http://www.google.com/jsapi/?key=TU CLAVE' type='text/javascript'/>
   <script src='http://dl.getdropbox.com/u/864517/entradas-transitorias.js' type='text/javascript'/>
   
   <style type='text/css'>
   @import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
   
   #feedControl {
   margin-top : 20px;
   margin-left: auto;
   margin-right: auto;
   width : 400px;
   font-size: 16px;
   }
   .gfg-title {
   color : #612e00;
   background-color: #FFF3DB;
   }
   .gfg-title a {
   color : #612e00;
   }
   .gfg-root {
   border: 1px solid #00000;
   font-family: "Georgia", sans-serif;
   
   }
   </style>
   <script type='text/javascript'>
   function load() {
   var homeUrl = "<data:blog.homepageUrl/>";
   var feed = homeUrl + "feeds/posts/default";
   new GFdynamicFeedControl(feed, "feedControl",
   {numResults : 5});
   
   
   }
   google.load("feeds", "1");
   google.setOnLoadCallback(load);
   </script>

3. Ahora en un elemento Javascript/HTML pega lo siguiente:

<div id="feedControl">Cargando...</div>

En donde dice TU CLAVE lo sustituimos por la primera clave API que generamos anteriormente.


Esta herramienta mostrará los cinco últimos artículos, si deseas cambiarlo sustituye el 5 por el número de posts que quieras que se muestren, el máximo es de 25 posts. Este gadget lo pueden poner donde ustedes quieran, sólo arrastran el elemento Javascript/HTML que crearon y lo colocan donde más les guste.

Mini botones Blogger

Este pack contiene 14 mini botones Blogger que yo diseñé y que puedes usar libremente en tu blog. Tiene los colores básicos azul, verde, rosa, negro, gris y blanco. Estos mini botones o también llamados badges tienen una medida de 80 x 15px por lo que el tamaño se adapta a cualquier espacio donde coloques tu directorio.

Iconos de 16px por 16px

Este pack contiene 29 mini iconos que podrás usar libremente para tu página. La mayoría son de 16px por 16px.