Para ello añadiremos unas cabeceras en el servidor en las que se deje bien claro que estas páginas no deben guardarse en cache.

<?php
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header( "Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . " GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
?>

GoogleBot lo interpreta como una página correcta (Código HTTP 200), y regresará de nuevo cuando toque. En la mayoría de los casos no queremos que esto pase, por eso tenemos que devolver un código HTTP 503 (Network Unavaible), en este caso GoogleBot no indexará esta página y volverá a intentarlo pasado un rato.

Fuente:
All About Googlebot en Official Google Webmaster Central Blog

Para implementar esto en PHP podemos hacerlo de la siguiente manera:

<?php
	header('HTTP/1.0 503 Service Unavailable');
?> 

<?php
/******************************************************************************
* cuenta el número de apariciones de una cadena en otra
*
* @param     string     $cadena        Texto en le que buscar la cadena
* @param     string     $subDadena     Cadena a buscar
* @return    integer
******************************************************************************/

function substr_count($cadena, $subDadena){
	return count(explode($subDadena, $cadena)) - 1 ;
}

?> 

Simplemente escribís en “Search For ” el comando que os interesa, y os mostrará su página de ayuda

Para ejecutarlo, simplemente se tiene que arrastrar el archivo zip descargado sobre el Opera, y ya debería funcionar.

Descargar Kuler widget para Opera 0.1 (156.9KB)

Para crear algo como esto lo primero es crear el Html, por supuesto un Html correcto XD:

<div class="edit_listaEnlaces">
<img alt="Redes sociales:" src="redesSociales.gif" />
<ul>
<li>
<a href="http://del.icio.us/post?url=&title=">
<img src="del.icio.us.jpg" title="del.icio.us"/></a>
</li>
<li>
<a href="http://tec.fresqui.com/post?url=">
<img src="fresqui.png" title="fresqui"/></a>
</li>
</ul>
</div>

Algo así sería lo correcto, y así es como se vería en un navegador en modo texto:

Redes sociales

* [1]del.icio.us

* [2]fresqui

Visible links

1. http://del.icio.us/post?url=&title=

2. http://tec.fresqui.com/post?url=

Lo cual también nos da una idea de como sería visto por un lector de pantalla y por tanto que seria accesible.

Ahora vamos a darle estilo:

Lo primero es limitar el ancho del la etiqueta <div> ya que lo que trataremos es de que solo se despliegue cuando estemos sobre un elemento concreto, y no la caja en si, como además yo busco que este elemento esté a la altura de otro de los elementos de la página añadiré un display:inline;:
.edit_listaEnlaces{
display:inline;
}

También que los elementos de la lista se muestren en una única linea, así que para ello añadiremos el siguiente código: (el padding es para que tengan algo de separación entre ellos)
.edit_listaEnlaces li{
display:inline;
list-style:none;
margin:0;
padding:0 0 0 3px;
}

Y ya es hora de ocultar los elementos de la lista y hacer que se muestre solo la primera imagen:

.edit_listaEnlaces ul{
display:none;
}
.edit_listaEnlaces > img{
display:inline;
}

Y ahora añadiremos la “acción”, en el momento en el que nos situemos sobre la imagen, se deberán desplegar los enlaces y ocultarse la misma:

.edit_listaEnlaces:hover ul{
margin: 0px;
padding: 0px;
display:inline;
}
.edit_listaEnlaces:hover > img{
display:none;
}

esto ya es suficiente para que funcione, si queremos hacer el efecto que tiene el ejemplo en el borde de las imágenes, deberemos añadir los siguiente
.edit_listaEnlaces > img{
padding: 1px;
display:inline;
}
.edit_listaEnlaces a img{
border: 1px solid blue;
}
.edit_listaEnlaces a:hover img{
border: 1px solid yellow;
}
.edit_listaEnlaces a:visited img{
border: 1px solid green;
}

Esto de los bordes se ha añadido para que sea más accesible, que las recomendaciones indican que se han de diferenciar los enlaces, de los enlaces seleccionados y de los visitados.

Este código está probado sobre Opera (v 9.22), Firefox (v 2.0.0.6), e Internet Explorer (v 7.0.5730.11)