Mini menú

Me pregunta Surplus21 como colocar un "mini-menú" como el que tengo en el footer del Escaparate, donde he colocado algunos iconos enlazados con diferentes servicios o páginas: Mi perfil en Blogger, en Twitter, Technorati, etc...

No es más que un div al que he añadido algunos estilos y en el que he colocado los distintos iconos con enlace uno detrás de otro.

El código se coloca en un gadget HTML en la sidebar o donde queráis mostrar el mini menú:

<div style="text-align: center; background:#fff; border:2px solid #82B7C4; width: 100%;">

<span class="pushbutton"><a href="http://www.blogger.com/profile/06743611108067453905" target="_blank" title="Sobre mi"><img src="
http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgNwl4KeI/AAAAAAAAGYg/FL3sBqDjVlE/s320/personal.png"/></a></span>

<span class="pushbutton"><a href="mailto:lejaniaimposible@hotmail.com" title="Email"><img src="http://1.bp.blogspot.com/_8PJ-pgoBhWQ/ScYgVjvmKwI/AAAAAAAAGYw/68TckepVJX8/s320/email_edit.png"/></a></span>

<span class="pushbutton"><a href="http://feeds.feedburner.com/blogspot/hnBy" target="_blank" title="Suscribe"><img src="http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png"/></a></span>

<span class="pushbutton"><a href="http://twitter.com/RosaTorre" target="_blank" title="Sigueme en Twitter"><img src="http://4.bp.blogspot.com/_8PJ-pgoBhWQ/ScYjtuhV8CI/AAAAAAAAGZA/OGZ2EDm70Uo/s320/twitter.png"/></a></span>

</div>

La primera línea del código es donde se aplican los estilos del div o contenedor:

text-align: center; La alineación del contenido (los iconos) que en este caso es al centro.
background:#fff; El color de fondo.
border:2px solid #82B7C4; El grosor, aspecto y color del borde.
width: 100%; Ocupará todo el ancho de donde esté colocado, a no ser que cambiemos 100 por un valor menor.

La parte de código que corresponde a cada icono, es la que empieza por <span class="pushbutton"> y acaba por </span> esto es una clase que he añadido a cada icono para conseguir el efecto de "botón pulsar".

He dejado mis datos en el código de cada icono para que os sirvan de guía al colocar los vuestros.

Una vez añadido el código en el gadget y hechos los cambios necesarios, colocamos además estas líneas de CSS en nuestra plantilla antes de ]]></b:skin>, esto marcará la separación entre los iconos (2px) y le dará el efecto de pulsado:

.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}

También podemos usar el CSS en el mismo gadget si os resulta más cómodo, solo tenéis que pegar el código sobre el que habéis puesto para el mini menú de esta manera:

<style type="text/css">
.pushbutton{padding: 2px;}
.pushbutton a:hover {position: relative; top: 1px; left: 1px;}
</style>