46

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

Mini-menú

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>

Entradas Relacionadas:

46 comentarios:


TRECARUNGA

Yo hize algo parecido para el traductor de mi blog :D
Saludos!

Anibal

Wow. Genial, voy a ver si lo pongo en mi blog para ahorrar espacio con algún par de opciones. Como siempre 1000 gracias.

Theemilio_crazy

Gracias por esto Rosa!!... Voy a probarlo :D

Petterjuice

algo q agregaria yo seria
1) agregarle nombre a las imagenes al pasarle el mouse
2) hacerle un reborde al pasarle el mouse
podroas agregarle esos items?
desde ya muchas gracias
petterjuice

Petterjuice

edito: veo q los nobres ya estan puestos...
se puede tambien hacer q los links abran en una ventana nueva?

Surplus21

Nada mas que decir muchas gracias Rosita =D siempre dispuesta a ayudar y compartir todo lo que sabes =D Gracias =D excelente =D cuidese =D

La Dueña

Gracias Rosa, como siempre muy clara. Ya lo voy a agregar a mi blog :D
Saludos

susana

Hola Rosa,
Estoy haciendo un blog a una amiga y la verdad es tus trucos me ayudan un montón.
Me gustaría preguntarte un cosa:
Quiero que el blog tenga una sola entrada en la página principal y que cuando entres en alguna etiqueta de las que hay en la sidebar sigas viendo sólo una entrada, no dos ó tres o las que tenga esa etiqueta...
Sabrías decirme cómo lo hago?
(perdona, no sé si este es el sitio para hacer una consulta)
Muchas gracias.
Vero.

San..

Esta buenisimo el truco!!

Ahora lo armo para ponerlo en mi blog!!

:)

Saludos Rosa!

MIA

hola, tengo un problema con un seguidor resulta que es una pagina porno y me interesaria eliminarla,no se como funciona para que quede eliminada y no sea visible para nadie, estos temas no me interesan para nada, gracias. mi blog es http://miaintimitats.blogspot.com/

Marga

HOLA ROSA !!!

Ahora mismo termino de ponerlo en el blog. Está chulísimo !!!!!

Gracias como siempre :)

Marga

Deybi

¡Mira que bien queda! Es realmente chévere la forma de utilizar el CSS en estos tipos de widgets.

¡Saludos!.

Themasteralex

Buenas rosa,

pues yo queria acerte esta consulta ya hace un tiempo, se trata de como le ago para que un cuadro salga (estilo pop up o como se escriba) y dia algunas cosas aqui hay une ejemplo de lo que quiero en este blog


EjemploY mi blog es

MeGaDeScsaludos y gracias por todo ROSA y muy bueno tu blog yo le daria un +100,000.

Rosa

@TRECARUNGA Si, con un buen resultado además ;)
@Anibal Seguro que encuentras como usarlo de forma original. :D
@Theemilio_crazy Gracias a ti!
@Surplus21 Lo prometido era deuda :D
@Deybi Si, de la forma más sencilla pueden lograrse cositas originales.

Rosa

Petterjuice Los enlaces se abren en ventana aparte gracias al uso del target="_blank" en los enlaces.
Para un borde al pasar el mouse, sería en el a:hover añadiendo algo así: border: 1px solid #ddd;

Rosa

Themasteralex Supongo que te refieres al cartel flotante ¿no? Yo no he publicado nada de eso, pero puedes verlo en el blog de Gem@:
http://gemablog-.blogspot.com/2008/10/cartel-de-aviso-flotante.html

Rosa

Marga ¡Qué guapo! Lo has usado para enlazar otros blog...¡genial! :D

Rosa

@La Dueña y @San... Gracias y espero que os quede chulo ;)

Rosa

susana Primero nos dirigimos a Plantilla–Edicion de HTML
Marcamos la casilla expandir plantillas de artilugios, y buscamos todos los códigos como este:
data:label.url

Y los reemplazamos con este:

data:label.url + "?max-results=1"

Así era como antes podíamos controlar eso...te digo antes, porque hace mucho tiempo que no compruebo si eso es factible, ya que Blogger cambio el resultado en las etiquetas a un mínimo de 20 hace tiempo, así que no estoy segura de si seguirá aceptando este cambio...

Rosa

MIA Mira en esta entrada:
http://elescaparatederosa.blogspot.com/2009/04/administrar-nuestros-seguidores.html

Themasteralex

Gracias Rosa por la ayuda.

Francisco Bórquez™

excelente, ademas con opacity puedo hacer que 'brillen' al pasar el cursor

Vicente Di Massa

Espectacular, hace tiempo que querìa obtener un mini menú asì de sencillo, y no lograba encontrarlo, pensé algo en flash que parezca un slide y puedas clikear una imagen y te lleve al link pero este Mini Menù està excelente.

Gracias lo pondré en pràctica

Rosa

Vicente Di Massa Con pocas complicaciones y sin usar ningún código "raro" que afecte a la carga u otras funcionalidades del blog...usando imágenes adecuadas puede conseguirse un resultado muy lindo. :D

lunatica

Pura vida!! :D
Tengo una pregunta, he visto en algunos foros que para poder descargar "x-archivo" primero hay que dejar un comentario en el post para poder ver el link, será posible aplicar ésta función en blogger?? Espero haberme dado a entender jejeje..

Excelente página siempre encuentro cositas interesantes para aplicar en mi blog..
Saludos.

xCanibalx

Que genial el menu....
rosa una pergunta quisiera saber si hay alguna forma de saber cuando la url de una imagen esta rota dentro del blog..ya que siempre estoy volviendo a subir las imagenes que no se ven,
y solo me doy cuenta x la lita de blog que muestran las imagenes en miniatura.
de antemano gracias y saludos rosa.

susana

Muchas gracias Rosa, eres como el diccionario de los blogs...
Pero no me sale porque borre las etiquetas y en el HTML no tengo el date:label.url, las etiquetas las tengo metidas en lo de añadir un gadget (html/javascript) y no tengo ni idea de que etiqueta meter ahí para que vaya bien.
Gracias de nuevo.

Helena

Este menu es precioso, Rosa!! Yo ya lo he puesto en mi blog. Muchas gracias!!!

Rosa

lunatica Te entiendo perfectamente porque lo he visto a menudo en foros que ofrecn descargas:D
No, en Blogger no es posible hacer algo como eso.

Rosa

xCanibalx Pues no conozco ningún sistema para hacer eso...:( quizás hay algún servicio online como para localizar enlaces rotos...pero ni idea, lo siento.

Rosa

susana Ese código está en tu plantilla mirando en ella con los artilugios expandidos y está más de una vez...habría que cambiarlo todas las veces que aparece.

Rosa

Helena ¡Te ha quedado precioso con los iconos algo mayores! :O

lunatica

Ah que lástima, bueno Rosa pura vida gracias
Saludos..

Lidia Fanjul

Gracias Rosa por todo siempre me has sido de gran ayuda para diseñar mi blog http://imaginatuvuelo.blogspot.com/

quisiera saber como pongo los marcadores sociales uno tras otro como en el pie de tu blog hablo del pagerank,spam poison,etc si ya has hecho uan entrada con ese tema dime cual es gracias.

Rosa

Lidia Hay un par de entradas que hablan de como colocar los marcadores sociales que te servirán como orientación:

http://elescaparatederosa.blogspot.com/2007/05/marcadores-sociales-en-blogger.html

http://elescaparatederosa.blogspot.com/2008/04/marcadores-sociales-con-efecto-opacidad.html

Σ=o) Pau

Me encanta este minimenu ;) en cuanto pueda lo probaré ^_^
Espero que ahora si me salga el comentario jejejej :) la conexión en mi ofi aveces es fatal!

Besotes ronroneados y feliz viernes :)

Centro de Estudiantes de Arquitectura

Una consultita sobre el tema, me anda barbaro pero me sale el recuadro de imagen-link y queda medio feo a la vista me podrias decir como sacarlo....
para ver como es lo que te digo solo entra a la pagina principal a la derecha estan los botoncitos que quiero poner...

http://www.cearq.com.ar

Rosa

Centro Coloca después de esto:

#navigation h1 a:link {
color: #ffffff;
}

Esta línea:

a img{ border-width:0;}

Retro Icon

Hola ROsa!
Como puedo hacer para que solo salgan los iconos sin fondo ni borde?

Gracias por toda tu ayuda!
Un saludo!

Rosa

Retro Icon No se exactamente si esta será la causa ya que no me dices para que blog es...normalmente eso pasa porque falta esta instrucción en la plantilla:

a img{ border-width:0;}

Ha de ir en el CSS, antes de ]]></b:skin>

Beatriz V.P.

Hola Rosa! Si te fijas en mi blog, he puesto el mini menú pero no logro que me quede centrado, se queda pegado al lado izquierdo. ¿Lo podría poner justo en el centro?

Por otro lado, aprovecho a hacerte una pregunta. Me encanta cómo tienes decorado el footer, con ese ancho tan grande y el color de fondo. No logro darle color al mío! ¿qué puedo hacer?

Gracias!!!!

Rosa

Beatriz V.P. Yo lo veo centrado...¿es el del footer verdad?

En cuanto a darle color de fondo al footer, tendrás que colocar algo así en el CSS (antes de ]]></b:skin> )

#footer-wrapper{
background: #000;
}

Beatriz V.P.

Hola! Sí, se ve centrado pero en realidad es una ilusión óptica, jaja, el mini menú ocupa el 100% del ancho y le he quitado el borde, así que los iconos quedan centrados, pero cuando le pongo el 50% de ancho en lugar de quedarse en el centro se va a la izquierda. Me gustaría tenerlo en el centro pero con el 50% de ancho.

Ya logré lo de dar color al footer! GRACIAS DE NUEVO!

Rosa

Beatriz V.P. Es que así es... el menú está centrado ya que va incluido en un div.
Si pones el 100% se centra en el espacio disponible y queda en el medio, pero si pones el 50% el menu se centra pero en el medio del 50% del footer... no es que se vaya a la izda...no se si me explico...

Beatriz V.P.

Ah!! vale ya lo entiendo!! gracias!!!

y3s5

WOW, sigo descubriendo cosas por aqui!!! Queria un menu de redes sociales amigable y eficaz, y me has sorprendido... de nuevo, XD.

Gracias, Rosa!!!

Publicar un comentario en la entrada

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S