90

Menu minislide

Un sencillo menú con CSS y Javascript que podéis ver con el nombre de "menú uno (minislide)" en mi blog de pruebas.

[1] Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.
Lo colocamos entonces antes del </head> de nuestra plantilla de esta manera:

<script src='URL_DEL_ARCHIVO_JAVASCRIPT' type='text/javascript'/>

[2] Incluiremos ahora el código CSS necesario antes del ]]></b:skin> de nuestra plantilla:
/*MENU UNO (Minislide)
Stephen Clark
www.sgclark.com/sandbox/minislide
----------------------------------------------------------------------- */

#nav {padding:10px 0px 0px 0; margin: 0 0 20px 0; float:left; width:100%; border-bottom:1px solid #888888;}


#minislide {
        float: left;
        margin: 0;
        padding: 0px 10px 0px 10px;
        position:relative;
        z-index:2;
        }

#minislide li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
        text-transform:uppercase;
        }

#minislide a:link, #minislide a:visited {
        float: left;
        line-height: 19px;
        font-weight: bold;
        margin: 0 10px 0px 10px;
        text-decoration: none;
        color: #888888;
        }

#minislide a.active:link, #minislide a.active:visited {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #888888;
        }
      
#minislide a:hover {
        border-bottom: 5px solid #888888;
        padding-bottom: 1px;
        color: #CC0000;
        }
  
#animated-tab {
        position: absolute;
        z-index: 1;
        /*font-size: 85%;*/
        line-height: 19px;
        padding-bottom: 1px;
        border-bottom: 5px solid #888888;
        width:100%;
        }
      
br
        {
        clear:both;
        }

[3] Ya solo nos queda colocar el código necesario para armar los enlaces del menú, lo pondremos dentro de un gadget HTMLJavascript debajo de la cabecera o en el crosscol por ejemplo:

<div id="nav">
<ul id="minislide">
<li><a href="#">Inicio</a></li>
<li><a href="#" title="Mi perfil en Blogger">Perfil</a></li>
<li><a href="#" title="Suscribe Feed">Feed</a></li>
<li><a href="mailto:#" title="Envia un email">Contacto</a></li>
<li><a href="search/label/?max-results=999" title="Ver todas las entradas">Ver todas las entradas</a></li>
</li></ul></div>

Entradas Relacionadas:

90 comentarios:


Kenneth Jack

pasando para decirte Feliz Año Nuevo y que Dios te colme de mucha Salud, Prosperidad, Paz, Sabiduría, Amor, en fin lo mejor del mundo…Yo rezare para que así sea…

Tiro

Gracias, Rosa en un comentario de hace días me refería como implementar este menú. ¡¡¡Feliz 2009!!!

Jose, a secas

Me gusta el menú aunque de momento dejaré el que tengo... hasta que me anime a cambiar la plantilla, jeje.

Saludos y FELIZ AÑO 2009 Rosa!

Salegna

¡Feliz Año Nuevo! que nos traiga un montón de cosas buenas para tod@s.
¡¡¡FELIZ 2009!!!

Σ=o) Pau

Cuando pasen estos días de locura pondré este menu en mi balcón, es sencillo y elegante ^_^
gracias!!!!!!!!!! :D

muchos besos y un abrazote!!!!! :-L

Gem@

¡¡Feliz año, feliz vida!!
Un abrazo grande ;)

YK (Jéssica)

Rosa, que tengas un bonito año 2009. Éxitos y adelante!

Un abrazo desde Perú:-L

YK de Diversas y Variadas

Jaime Trujillo Escobedo

Un gran abrazo desde canarias, feliz 2.0009!!!!!!!!!!!!!:-)

Azul...

Apañaísima, pasé a desearte el mejor de los años nuevos, que venga llenito de eso que anhela tu corazón ♥

Te mando 3000 besototes!!!!

Rubí

Hola Rosa!! aprovecho esta entrada para desearte FELIZ AÑO 2009, muchas bendiciones para ti y tu familia.

Besitos!!

Silvi

Hola Rosa, hace tiempo que no paso por aqui, pero queria desearte un muy feliz 2009 y que este lleno de hermosas sorpresas y de sueños que se cumplan a lo largo de esos 365 dias..

un beso grande desde Argentina.

david santos

Excelent trabajo! Gracias por compartirlo con nosotros.

Buen Anõ de 2009.

Graciela

Rosi después miraré lo del menú, que por cierto me encanta...solo paso a dejarte deseos de muchísima salud, paz interior, inmensa luz...mis besos y abrazos!!!

MARGA'S HAPPY PATCHWORK

Rosa, el truco parece muy guay, pero de momento, creo que tengo demasiadas cosas en mi blog.
Porfi Rosa, pasate por mi blog tienes un mensaje.
Besos.

Sofía

Rosa quiero desearte feliz año nuevo, por ser una persona que nos ayuda a todos sin pedir nada a cambio y con el único objetivo de ayudar, como pocas en este mundo lo hacen.
Mis más sinceros deseos de felicidad para ti y toda tu familia
Desde Uruguay faltando 4 horas para fin de año.
Un saludo Sofía.

Bonzu Pipinpadaloxicopolis III

Feliz año 2008 y el 2009 y que seas muy feliz :$

robersnake

Pues bueno Rosa yo voy a redundar Feliz Año 2009! y que la pases bien en esta noche y por su puesto lo mismo para todos tus lectores y mucho éxito para este proximo año 2009.

El menu es muy bueno, muy elegante como ya lo han expresado.

Otra pregunta es como pones esa barra al pie de la pagina, la que tienes en tu blog de pruebas para suscribir.

Saludos y Feliz Año desde México. ;)

MARGA'S HAPPY PATCHWORK

Hola Rosa, perdón porque la pregunta no es sobre esta entrada, pero no lo he encontrado.
¿Como puedo hacer un Blinkie Code de mi blog, como lo que tu tienes para enlazar tu blog?
Muchas gracias Rosa.

TRECARUNGA

Rosa me paso algo muy raro, un dia entro a mi blog y veo que, la nube de etiquetas se combirtio en una lista de etiquetas, las entradas expandibles enn la pagina de ertiquetas ya no estaba eran una vista normal, el mensaje de "estas biendo las entradas de (nombre de la etiqueta) ver todas las entradas" que yo habia sacado, el enlace comentarios en un globo ya no esta, esto es muy raro, que hago?

PuertoExiste

Feliz año nuevo 2009

WTF Streetview

Que todas las circunstancias que nos rodeen, no nos impidan seguir blogueando.

TRECARUNGA

pude arreglar todo expto la nube de etiquetas que cuando la trato de poner me da error :(

Birdelo

Hola Rosa.

Disculpa por mi pregunta fuera de tema.
Visitando tu blog de pruebas he hechado un ojo por la sidebar y hay un widget con rotación de imágenes. Es posible hacer eso con más im@genes y como podría hacerlo, claro si me puedes ayudar?.

Saludines y feliz año!!!. :D

TRECARUNGA

logre arreglar todo, listo!!

TRECARUNGA

hey rosa una ultima pregunta, como pongo la imagen con el nombre de cada emoticon en el formulario de coimentarios?

NeneLand

Otra gran entrada de la amiga Rosa. Muchas gracias. !!

Rosa

Birdelo, está explicado en esta entrada:
http://elescaparatederosa.blogspot.com/2008/12/rotador-de-imagenes.html

Alberto Ríos Mosteiro

Te deseo un feliz año 2009. Gracias por toda la ayuda que nos das, que es impagable. Un abrazo y que todos tus sueños se cumplan en este nuevo año que acaba de comenzar.

Rosa

TRECARUNGA, la imagen está colocada directamente en el html de la plantilla.
Expandes artilugios y localizas esta línea:
<p><data:blogCommentMessage/></p>

Justo debajo colocas la imagen:

<img src="url_de_imagen"/>

Rosa

robersnake, puedes ver como colocar la barra en esta entrada:
http://elescaparatederosa.blogspot.com/2008/12/barra-anuncio-fija-sobre-el-pie-del.html

Rosa

MARGA, pues yo lo he hecho con una captura de mi antigua cabecera y luego reduciendo la imagen con este programa online: http://www.online-image-editor.com/

TRECARUNGA

Gracias rosa sos la mejor :P

Lisett

Rosita gracias por este dato, pienso implementarlo mas adelante pero te tengo una pregunta...

Mira,
he cambiado de template, kise hacerlo mas manimalista, pero los pings (los banners donde esta alojado nuestro blog) no me ayudan mucho, se ven amontonados y como son bastantes, no hacen juego con mi blog..

Ahora viene la pregunta:
como podria hacer para que puedan ocupar solo un pequeño espacio y que pasen las imagenes en slide sin ocupar toooooodo el espacio que estan ocupando ahora?

Gracias por tu paciencia
un besito :$
Feliz año

Lisett

Rosa

Lisset, mira a ver si esto te sirve:
http://elescaparatederosa.blogspot.com/2007/03/link-con-texto-o-imagenes-en-movimiento.html

y...¡gracias a ti!:-L

Die

Hola rosa, la verdad qe amo tu desempeña en tu blog, la forma con la cual explicas los pasos a seguir, me has ayudado muchisimo y me gustaria hacer algo por tii, yo me adelante y ya soy un seguidor tuyo, tambien te enlase y ademas en mi barra de menu (que la hice gracias a tu ayuda) hay una parte qe dice el escaparate de rosa, en el cual le das click y te manda directamente a este blog, reitero muchas gracias y cualqier cosa qe me pidas qe agrege en mi blog bienvenido sera :-)
Att. Die :-L


PD: por favor echa una visita a mi blog, y dime qe le puedo hacer :D

Rosa

Die, yo cambiaría dos cosas en tu blog.

El icono de suscribir y los enlaces que tienes sobre la sidebar, los metería dentro de un gadget htmljavascript y lo pondría así:
<div style="width: 50%; float: left;"><img style=" width: 120px; height: 120px; float: left;" src="http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SQElh1OTWGI/AAAAAAAAEiU/yFnzMiy9rMY/s320-R/liteblue128x128ym2.png"/></div>
<div style="width: 50%; float: right;"><br/><a href="http://domino-dl.blogspot.com/feeds/posts/default">Feed (RSS) </a>
<a href="http://www.fotolog.com/dieguizzz/feed/main/rss20"> Flog FF's (RSS) </a></div>

Por otro lado le daria un fondo de color negro a la cabecera, para evitar que en pantallas grandes la cabecera tenga esos espacios en blanco a ambos lados, para eso debajo de esta línea:
#header-wrapper {

Pones esta:
background:#000;

Pruebalo y ya me dirás...

El Club de Dumbledore

Hola amiga Rosa le escribo para desarle un Feliz Año 2009... Espero que sea un año de mucha salud, amor y prosperidad... Espero nos siga dando buenos consejos... Por otra parte quisiera hacerle una pregunta: me podría decir como puedo hacer un sistema de registro de usuarios para mi blog... Que Dios me la bendiga y me la llene de bendiciones... :-)

Rosa

El Club de Dumbledore, lo siento, pero en Blogger al menos que yo sepa, no puede hacerse.

Espineli

Wenas Rosa, pasaba a saludarte y a ver si te interesa favicon en espineli por la jeta





esta entrada

Rosa

Espineli, acabas de ganarte una entrada "por la jeta" :D :D

Σ=o) Pau

Hola Rosita :) ya lo instalé en mi balcón y me encanta tanto así que cuando tenga tiempo le haré unos cambios a la voz y lo incluiré junto con el rotador de imágenes :)

Muchas gracias ^_^ prrrr

Un abrazo ronroneado y muchos besos

MALINA

Superchulo!, y me ha gustado mucho el menu dos (robs) por eso de los despegables.
Me pasas el enlace de donde lo tienes en el blog?

FELIZ NOCHE DE REYES!!

Rosa

MALINA, aún no lo he publicado, pero todo se andará ;)

MALINA

Ooopppsss... me adelanté entonces. Pues nada ya te lo pillaré cuando lo hagas.

Besosssss

VANKEY

Oye que pagina me recomiendas para el menu slide Necesitaremos descargar el archivo javascript a nuestro PC y subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url.

Rosa

VANKEY, este por ejemplo:
http://elescaparatederosa.blogspot.com/2008/12/skydrive-alojar-archivos-y-usar-la-url.html

Javier Fernández

Hola rosa enhorabuena por tu blog, la verdad que llege de casualidad viendo esta entrada he descubierto los menus de prueba que tienes y el menu dos (robs) sería la solución a muchos de mis problemas de espacio del menu, me gustaría saber cuando lo vas a explicar o me digas donde lo puedo buscar. Un saludo y muchas gracias

Rosa

Javier, estoy preparando la entrada sobre ese menú.

Javier Fernández

Muchas gracias,lo leeré cuando lo pongas porque creo que me voy a hacer seguidor incondicional de tu blog, jejeje.

UN saludo

MAX KRATOS

Hola que tal Muy buena info solo que tengo un problema, ya lo instale y al parecer no hay ningun error, Pero ala hora de la hora los primeros 3 botones no hacen nada los ultimos 2 estan bien

que cres que sea te dejo la direccion de my blog

MAX KRATOS

De antemano Gracias :D

Rosa

MAX, es que el menú no se hace solo:D

Tienes que colocar en los enlaces del código tus datos, por ejemplo en la pestaña "Perfil" en el <a href=" hay que poner la url de la página de tu perfil en Blogger, el menú hay que construirlo...

MAX KRATOS

Muchas gracias Rosa :P :d

Andrés Álvarez Fernández

Hola, buen día. Me gustaría saber como instalar el menú dos llamado en la página de pruebas como "ROBS".

Saludos y gracias por adelantado.

http://cronicasgallegas.blogspot.com/

Rosa

Andrés, probablemente sea mi próxima entrada :D

Andrés Álvarez Fernández

Ahh, ok, ok. Seguiremos con atención, pues. ;)

Salud.

The Genuine

hola rosa, el script para crear esta entrada esta roto, podrias subirlo nuevamente. gracias.
the genuine

Rosa

The Genuine Están rotos muchos en el blog. No funciona SkyDrive, trataré de arreglarlo a la mayor brevedad....

The Genuine

hola rosa gracias por el servicio de haber subido el script pero ahora no se descarga sino que me lleva a la pagina y me lo muestra no se como guardarlo gracias.

Rosa

The Genuine Pincha en la página que se abre, botón derecho y guardar como.

The Genuine

muchas gracias rosa, por todo eres un cielo.
the genuine

RacHaV2
Este comentario ha sido eliminado por el autor.
RacHaV2

Hola Rosa Ayudame En algo Como Logro Colocar Esta Barra abajo de la Cabecera Mmmm por que Normalmente No me Sale solo arriba de la columna Principal y ahi no se puede poner tanto Boton mi Planilla es Thisaway (Blue) Con 3 columnas Ayudaa con algun Codigo o algo asi ;)

Rosa

RacHaV2 Esta entrada te será de ayuda:
http://elescaparatederosa.blogspot.com/2008/05/elementos-adicionales-en-diseo-de-la.html

Maria

Hola, quisiera poner este menú en vez de en posición horizontal, en vertical, en la sidebar. ¿Existe algun método?, gracias anticipadas.

Rosa

María No, este no se puede fácilmente...habría que hacer todo prácticamente de cero, y aún así dudo que el resultado fuese parecido a este...

Si ves uno para la sidebar en algún sitio funcionando que te guste, podría intentar mirar si es factible y explicar como hacerlo en una entrada...mira a ver, hay muchas páginas de menús donde los hay muy lindos :D

Maria

Gracias Rosa, me imaginaba algo así porque ya tenía rota la cabeza con tantos intentos, pero me gusta esta opción y soy de ideas fijas. Seguiré intentándolo. Un beso.

Asteyma

Hola Rosa.

Me gustaría saber si puedo implementar este menú en un post, para que vaya mostrando alternativamente uno u otro texto en el mismo, según elijamos una u otra pestaña.

En mi blog http://asteyma.es (en la entrada "qué ofrecemos") tengo un menú creado con fabtabulous.js de tres pestañas funcionando, pero me gusta tanto el efecto del "slide" que me pregunto si podría conseguirse.

Un saludo y gracias por anticipado por hacer caso a preguntas sobre entradas tan antiguas...

Rosa

Asteyma No,lo siento, pero no veo modo de hacer eso. :(

RacHaV2

Con la Nueva Forma de alojar los Scrip (En la Planilla) Funciona Mejor Carga Mas Rapido y Sin Problemas ;)

Meri

Todo perfecto ¡eres mi ídola! :)

Pero una cosita al pasar el cursor me da un saltito la página :O ¿Qué puede ser?

Saludos

Meri

He visto que en el blog de pruebas tambien da el saltito, asi que es normal

Saludos

Rosa

Meri Si así es, eso sucede al ampliarse el espacio para que se vea la rallita de marcación.

Meri

De todos modos a mi no me corre la rallita como te corre a tí :( A mi me corre que es mareante

Rosa

Meri Tu menú no está funcionando como debe porque tienes mal añadido el script, es decir, la url que enlaza con el script no es la correcta.
Tu tienes esta:http://mail.google.com/mail/images/txt.gif y si la copias y la pegas en tu navegador te lleva a una imagen.
Donde has subido el script no has escogido la url correcta, esta es correcta cuando al pegarla en el navegador se ve el script.

Meri

Mira te pongo captura, me dices si esta bien alojado y la dirección que tomo es en lo que esta sombreado
http://fotos.subefotos.com/1ade9d471125a8dc1aa99ca7bd97cd1do.jpg

Si la dirección la copias en el navegador lo que sale es para descargartelo.

¿Algo no hago bien? ¿Es que no funciona Sites?

He cambiado la direccion de la plantilla pero la barrita no desliza ¡salta!

Es esta
http://sites.google.com/site/cosasdemeri/archivojs/minislide.txt?attredirects=0

Perdona tanta molestia ¡joroba!

Meri

Probando hice otra cosa pero sigue igual

Puse esto
Dirección GoogleSites + Nombre de la página de archivos + Nombre del archivo con extensión.txt

http://sites.google.com/site/cosasdemeri/archivojs/minislide.txt

Meri

Volvi a poner todo de nuevo y creo que SI va bien

Si no fuera por tu ayuda :(

Gracias Rosa

Rosa

Meri¡Ahora si! Cualquier script que enlaces desde Google Sites acaba en .txt lo que sobra se lo quitas y ya está.
¡Enhorabuena!

Meri

Gracias Rosa

Gracias por la ayuda que das

Saludos

Meri

Una pregunta Rosa.
¿Como puedo hacer para poner otro enlace pero que quede recto o en linea con los que hay y no debajo?
Saludos

Rosa

Meri A ver...el menú ocupa el espacio total de donde lo coloques, en tu caso has añadido esto:
padding: 0px 200px 0px 200px;

Para lograr desplazar el menú y que se vea centrado, así que tendrás que "rebajar" ese padding para dejar espacio a otra pestaña...

Por eso todos los menús prácticamente parten de la izda, para luego ir pudiendo colocar mas pestañas sin problemas...

Meri

Muchas gracias Rosa, asunto arreglado ;)

jaimevazquez15

Hola Rosa primero que nada quiero felicitarte por tu paciencia para ayudarnos y de paso quieisrea saber si podrias ayudarme...
Haces tiempo visite un blog donde tenia uan widget en el que tenia solo la imagen del post y te enviaba a el. el widget constaba de 5 imagenes que podian moverse con imagenes de flechas (adelante y atras) tipo slide, y asi se recorrian para ver mas imagenes de posts, estaba arriba del menu.

No se si puedas ayudarme o darme un consejo te lo agradeceria muchisimo..

Rosa

jaimevazquez15 Mira si era algo así...
http://zonacerebral.com/2009/04/tutorial-para-crear-galeria-de-imagenes-slideshow.html

Si es otra cosa no tengo idea...

Carlos

Hola Rosa


Es que ese es el punto ... ya que creo hacer todos los pasos bien, pero aun no me sale.
te muestro mis pasos. en una de esas es más facil.

*Descargué el archivo javascript. (eje 1)
Despues... "subirlo depués a un alojamiento de archivos de donde, una vez subido, obtendremos su url."

*Supogo que es la parte de Edición de HTML. (eje 2)

*Luego pego todo lo del archivo (eje 3) y voy a poner el código CSS ... (eje 4)

*Pongo todo segun dice (eje 5) y y luego me sale esto... (eje 6)


Creo que en algo estoy mal hasta este punto. como ves?

las fotos te las mando por correo.

saludos

Rosa

Carlos No me ha llegado ningún email... y por otro lado ¿sabes subir archivos a un alojamiento?...creo que ahí es donde fallas.

Meri

Hola Rosa, ¿sabes que problema hay con este menú? He visto desde hace unos días que empieza a dar saltitos como me pasaba cuando lo puse y si te acuerdad era por el alojamiento. Pense que el sitio del alojamiento (Google Sites) estaba dando problemas. He visto que en el tuyo de pruebas pasa lo mismo :o ¿Qué problema hay?
Saludos

Rosa

Meri No tengo ni idea...lo miraré, mi script está en Sites tambien :S

Meri

Gracias Rosa por responderme.;)

Luis Kasanova

Hola rosa!

A mi me daba problemas y cuando trataba de guardar me decía que había algo que no estaba cerrado y pues viendo bien el código del paso [3] al paracer hay una <../..li..> demás... la borré y listo, me dejó guardar bien.

La cuestión es que me ha desaperido la imagen de cabecera... no sé para donde la ha hechado ¿?

chequea mi blog de prueba por favor, lo estoy implementando ahí primero...

http://vidaseductivablogdeprueba.blogspot.com/

Qué estará sucediendo?

Saludos!

Rosa

Luis KasanovaSi, es cierto, el ultimo li de cierre se me "coló"... aunque no creo tenga esto nada que ver con nada más en la plantilla si es que lo has colocado correctamente...

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