Una de las cosas mas moletas de los blogs son los infinitos iconos de enviar a sitios sociales, etc, por eso, tras investigar un rato, me di cuenta de que la mejor manera de ponerlos de forma no molesta es asi, imaginemos a un usuario:

-Hmmm, este post sobre Sony me hizo gracia, voy a menearlo
-A ver, clic con el botón derecho en el tit…
-Anda! si ha aparecido un icono del gallifante solo!

En ese caso no serviría de nada porque no hay gallifante, solo abrir en nueva página y delicious, pero no hay problema en ponerlo.

Paso 1

Lo más importante son los iconos, por lo que haz unos que peguen con el estilo de tu blog o famfamfamizate.

Paso 2

Asumiendo que tus títulos están puestos de la forma h2 a, coloca el siguiente código justo entre a y h2:

<a href="<?php the_permalink() ?>" target="_blank"><img class="nwti nuevav" src="url-del-icono" alt="Nueva ventana/tab" /></a>

Si todo funciona, cambiando url-del-icono por su url, deberias tener un bonito icono, en este caso de nueva ventana al lado de cada titulo.

Paso 3

Como puedes ver, el código ya tenia unas clases css definidas, puedes llamarlas de otra forma si también las cambias en el css.

Ahora copia y pega esto en tu hoja de estilos:

.nwti {
display: none;
}
h2:hover > a .nwti {
display: inline;
}

Con la primera clase estamos escondiendo .nwti, es decir, la imagen.

Y en la segunda clase, estamos usando un selector de hijo, su funcionamiento es muy sencillo, El estilo solo afectará a las etiquetas exactas (Derecha) que estén dentro de las de la izquierda, en un principio, parece estúpido usarlo ya que eso se puede conseguir escribiendo los nombres seguidos.

Pero la magia es que en la izquierda podemos incluir la subclase que queramos (en este caso, :hover) para conseguir un efecto solo obtenible con javascript, la aparición de elementos.