Estas son las imágenes que hemos utilizado en el ejemplo. Son JPG sin transparencia y por eso le hemos incorporado el color negro en la parte redondeada de abajo, coincidiendo con el color del fondo dónde lo vamos a utilizar. No hay problema en utilizar unos GIF con fondo transparente y de hecho, sería lo recomendable si el fondo de vuestro blog no tiene un color plano sino una imagen. Para el efecto de que la pestaña se "estire" sólo necesitamos que una imagen sea más larga que otra. Con respecto al diseño de las imágenes, ahí es dónde os podeis lucir, porque el resto del menú es bastante fácil de construir.
Lo primero es redactar el estilo de las pestañas en la parte CSS de la plantilla (antes de ]]></b:skin>):
/* Estilo menu pestañas*/
ul#main-nav { /* El bloque general de los enlaces */
margin:0px;
padding:0px;
float:left; /* También podriamos llevarlo a la dcha o incluso centrarlo */
width:100%;
}
ul#main-nav li { /* Cada elemento del menú */
list-style:none;
float:left; /* Cada pestaña se pegará a la anterior, alineadas a la izquierda */
width:100px; /* Ancho de la imagen de fondo que utilicemos */
text-align:center;
}
ul#main-nav li a { /* Cada elemento con enlace del menú */
text-decoration:none;
display:block;
color:#cccccc;
/* Imagen pestaña normal */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqBYiCO4nAelKFT6AJWRKh0gjRSV8QJsQOfqbF784lmxEgros2TUxGXaWEMA4MdUGYo8-hgUp3136hi6OJwgsX4sZWCXWmmc5T0xLQLXbWTY2JXkSsyMFeTxsxtYH_bqbmeAH6oDk9lOE/s400/pestana1.jpg) no-repeat top left;
height:36px; /* Altura de la imagen más alta */
padding:4px 0px 9px 0px;
}
ul#main-nav li a:hover { /* Cada elemento con enlace pulsado */
color:#ffffff;
font-weight:bold;
/* Imagen pestaña más alta */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xsZrhPO5OeUGzgL0y49cfpZnyy5EUYatO7R0J73f-czwbqaqZHJuHSgB4MdRvUSthwKecFc8cShlfeuQUP5ErSs1PwpVabBxt0kRP29RSwv-wUBryTX3JoX9vCMo-P8lRiHiExEfF48/s400/pestana2.jpg) no-repeat top left;
/* Redistribuimos el padding vertical (4+9x) para que el texto de la pestaña simule bajar junto con ella */
padding-top:10px;
padding-bottom:3px;
}
ul#main-nav { /* El bloque general de los enlaces */
margin:0px;
padding:0px;
float:left; /* También podriamos llevarlo a la dcha o incluso centrarlo */
width:100%;
}
ul#main-nav li { /* Cada elemento del menú */
list-style:none;
float:left; /* Cada pestaña se pegará a la anterior, alineadas a la izquierda */
width:100px; /* Ancho de la imagen de fondo que utilicemos */
text-align:center;
}
ul#main-nav li a { /* Cada elemento con enlace del menú */
text-decoration:none;
display:block;
color:#cccccc;
/* Imagen pestaña normal */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqBYiCO4nAelKFT6AJWRKh0gjRSV8QJsQOfqbF784lmxEgros2TUxGXaWEMA4MdUGYo8-hgUp3136hi6OJwgsX4sZWCXWmmc5T0xLQLXbWTY2JXkSsyMFeTxsxtYH_bqbmeAH6oDk9lOE/s400/pestana1.jpg) no-repeat top left;
height:36px; /* Altura de la imagen más alta */
padding:4px 0px 9px 0px;
}
ul#main-nav li a:hover { /* Cada elemento con enlace pulsado */
color:#ffffff;
font-weight:bold;
/* Imagen pestaña más alta */
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5xsZrhPO5OeUGzgL0y49cfpZnyy5EUYatO7R0J73f-czwbqaqZHJuHSgB4MdRvUSthwKecFc8cShlfeuQUP5ErSs1PwpVabBxt0kRP29RSwv-wUBryTX3JoX9vCMo-P8lRiHiExEfF48/s400/pestana2.jpg) no-repeat top left;
/* Redistribuimos el padding vertical (4+9x) para que el texto de la pestaña simule bajar junto con ella */
padding-top:10px;
padding-bottom:3px;
}
Ahora buscamos el lugar dónde queremos situar el menú y allí escribimos una lista utilizando la clase creada (main-nav) y unos enlaces simples dentro de cada elemento:
<!-- MENU -->
<ul id='main-nav'>
<li><a href='URL_ENLACE1'>ENLACE1</a></li>
<li><a href='URL_ENLACE2'>ENLACE2</a></li>
<li><a href='URL_ENLACE3'>ENLACE3</a></li>
</ul>
<ul id='main-nav'>
<li><a href='URL_ENLACE1'>ENLACE1</a></li>
<li><a href='URL_ENLACE2'>ENLACE2</a></li>
<li><a href='URL_ENLACE3'>ENLACE3</a></li>
</ul>
Para colocarlo justo después de la cabecera, tal y como se hizo en la plantilla Bloggerbloc (alguien que no recuerdo lo preguntó), esta segunda parte habrá que insertarla debajo del cierre del bloque correspondiente, que normalmente lleva la id='header-wrapper'. Tras el </div> que lleve ese bloque es dónde tenemos que poner nuestra batería de enlaces para este caso.
Las pestañas podeis diseñarlas con los colores y formas que más os gusten. Si cambiais el tamaño, sólo habrá que ajustar los width, height y padding de la parte de estilo. Aunque los bloques son rectángulos, nada impide usar como se ha dicho, un GIF redondo o incluso totalmente irregular. Con hacer transparente la parte que no queremos que se vea, el efecto estará logrado.
Aunque está construido de distinta manera, este sistema ofrece el mismo resultado que las pestañas que podeis ver actualmente arriba a la derecha en este blog a modo de mini-post-it. Para conseguir buenos botones, ahora es sólo cuestión de tener un editor de imágenes, un poco de maña y mucha imaginación.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Oye, cambia el fondo que le pones al código.. no se lee ni bien ni mal.
ResponderEliminarYo lo leo bien, pero si lo seleccionas igual lo ves mejor. Además que el código suele ser para copiarlo y pegarlo en tu plantilla y modificar allí lo que quieras.
ResponderEliminarMuchas gracias por este nuevo descubrimiento, hay en un blog donde igual lo experimento esta noche.
¡Besos!
genial muchisimas gracias
ResponderEliminarbesitossss
muy bueno!
ResponderEliminarY para ponerlos verticales?
besitossss
Lo de ponerlas verticales es otro artilugio y no se me ocurre dónde podría ir bien ¿algo más concreto podrías ser?
ResponderEliminarComo creo este mismo sistema pero con menu desplegable?
ResponderEliminarOsea que se desplegue y muestre la lista luego de clickearlo. Antes de darle click que solo salte el boton.
Tienes idea de como hacerlo?
Business, se pueden diseñar montones de menús distintos y cada uno lleva su propio código. Echa un vistazo a esta herramienta online que seguro que ahí encuentras varios modelos que te sirvan.
ResponderEliminar.-OLOMAN: No sé si es porque, poco a poco, me voy enterando más de esto del CSS y del XHTML, o quizás porque lo has explicado muy clarito y completo; pero la verdad es que este post es un tutorial de referencia de cómo hacer una atractiva barra de menú con efecto desplazante hacia abajo.
ResponderEliminar.-En cuanto a lo de cómo seleccionar las imágenes, tanto jgp como gif, preguntarte si el photoshop 8 elements permite crear imágenes, botones, etc. para este efecto...
.-Gracias y enhorabuena por este pedazo de tutorial, porque, precisamente, estos días estoy aprendiendo cómo crear, diseñar y dar estilo a una barra de menú principal.
Andybel, no conozco Photoshop 8, aunque supongo que sí. Las imágenes que ves de muestra en este post, las hice con el sencillo y gratuito Photofiltre.
ResponderEliminarEn otras ocasiones uso una aplicación antigua del paquete Photoshop: ImageReady, pero realmente para unos botones o pestañas, no hace falta mucha parafernalia.
Me alegra que vayais avanzando más de lo que esperabais hace unos días, ya que entonces seos veía algo desesperados por no aprender al ritmo deseado.
y no hay de otros colores quiero un menu verde porfa
ResponderEliminarPuede ser del color y la forma que tú quieras. Bajas las imágenes base, las editas y las subes. Luego utilizas las direcciones nuevas que obtengas.
ResponderEliminarExcelente, me gusto mucho este menu, en un futuro muy cercano lo pondre en mi blog ^^!
ResponderEliminar---
Oloman te molesto nuevamente u.u - si entras en mi bog http://xdarkblood.blogspot.com/ - al final dice:
1203 Discos
26 Comentarios
...bueno si te das cuenta esta como desordenado, y me gustaria que me dijieras como puedo encerrar eso en un solo cuadro osea que queden las dos cosas juntas encerradas en cuadro ^^ ...
Saludos y Muchas Gracias
Feuer, para formatear eso, lo más fácil es hacer una tabla y meter en cada celda una parte del código. Aquí se explica un poco más la idea.
ResponderEliminarOK - Gracias ^^!
ResponderEliminary si quiero agregar mas botones¿?
ResponderEliminarPues como el estilo es el mismo, sólo tienes que añadir enlaces. Para ello, antes de </ul>, insertas más elementos de lista (li):
ResponderEliminar<li><a href='URL_ENLACE4'>ENLACE4</a></li>
<li><a href='URL_ENLACE5'>ENLACE5</a></li>
<li><a href='URL_ENLACE6'>ENLACE6</a></li>
etc...
</ul>
Estoy aprendiendo como hacer estas coas, pero no sé si es cuestión de costumbre o práctica, pero me está costando bastante....
ResponderEliminarEs cuestión de seguir las instrucciones. Con el tiempo y la práctica podrás hacer variaciones sobre lo explicado.
ResponderEliminarcomo hacerlo en blogger?
ResponderEliminarTal y como se explica Miten. De hecho las referencias que doy para insertar el código, son las de una plantilla Blogger.
ResponderEliminarexcelente tutorial master pero me gustaría saber si sabes como hacer unos menús mas personalizados o las técnicas que se usan para hacerlos, tengo mucho buscando la manera pero no la encuentro me podrías ayudar en eso :) mira estos son ejemplos de los menús que te menciono
ResponderEliminarhttp://www.csstea.com/css-gallery-news-and-resources/264-120-excellent-examples-of-css-horizantal-menu.html
¡Uff! Esos son de lujo. Me gustan casi todos y la mayoría de ellos creo que se hacen "a mano".
ResponderEliminarEs decir, los menús como el que se explica aquí, son para programar una vez y ya sólo cambiar el nombre del enlace las siguientes ocasiones.
En estos que me enlazas, el componente gráfico hace que haya que trabajar más.
Muchos son simplemente un menú "normal", con un fondo muy currado (por ejemplo 1 á 6 del enlace que me pasas). Si además, las letras del enlace las sustituyes por imágenes (1, 7, 8...) pues ya tienes resultados más sofisticados.
En otros casos, seguramente se trata de hacer un fondo gráfico para cada botón individualmente, que concuerde con el fondo de la zona dónde esté y mediante el hover, cambiar el fondo para que parezca que se mueva. Siempre imágenes.
Te copio el enlace Smark. Gracias.
hola oloman tengo una preguntita es algo muy fuera de este tema, ¿como puedo cargar informacion de una base de datos a una caja de texto?
ResponderEliminarLa caja de texto la tengo en google sites y la base de datos (access 2007) esta en mi maquina.
Saudos
Dania
Lo de las bases de datos es una cosa que no he tocado nunca, Nanis. No te puedo ayudar.
ResponderEliminarDe cualquier forma ¿como vas a volcar varios campos de varios registros en una sola caja de texto? Quedará todo muy raro ¿no?
Me quedo bien...
ResponderEliminarpero tengo un problema... los que pasa es que quiero centrar el menú, entonces cambio "float:left; " por "float:center; ", que "creo" seria lo obvio, pero cuando guardo la plantilla, se desbarata toda la plantilla :S ...(tengo una minima de tres columnas).
Ojalá, me puedas ayudar.... gracias.
Hola Kuston. Para centrar el menú completo, tendrías que eliminar el FLOAT y utilizar MARGIN:0PX AUTO;
ResponderEliminarul#main-nav {
margin:0px auto;
padding:0px;
width:100%;
}
gracias por contestar...
ResponderEliminarpero sigue mi problema, no se centra mi menu, no se que hice mal, pero te dejo una imagen: http://img38.imageshack.us/img38/2193/20100201235854.png
Puede ser porque la capa anterior esté flotando.
ResponderEliminarPodemos probar dos cosas o bien incluyes un
display:block;
en el mismo selector que antes comentaba, o bien editas la plantilla e incluyes delante de
<ul id='main-nav'>
un
<div style='clear:both;'>
A ver si hay suerte porque nunca me acuerdo del todo de estas cosas.
.
muchisimas gracias!! estoy decorando mi blog gracias a tu blog!! y mi última modificación han sido estas pestañas!!
ResponderEliminarde nuevo gracias!
Como podria hacer para que esto se despliegue hacia arriba y no hacia abajo??
ResponderEliminarGracias
Para eso, el truco es fijarse en cómo se coloca el background que forma los botones. En lugar de posicionar ambos en la parte superior (top), tendrías que posicionarlo en la parte inferior (bottom). También habría que cambiar el padding del texto, pero eso ya se indica cómo hacerlo en los comentarios del código.
ResponderEliminarcon esto tengo mucha creatividad pero hay una cosa que no entiendo. Cuando pongo más de cinco o seis botones, no funciona al pasar mi curosr i solo me van algunos al cabo de un rato. Me entiendes merci de todas formas!
ResponderEliminarEn un principio, eso que dices no debería pasar siempre que hubiera espacio suficiente para todos los botones. El problema es que no lo tienes instalado y que así no puedo ver qué es lo que ocurre exactamente.
ResponderEliminarlos botones me aparecen todos ,espacio ay, se ven todos bien lo que pasa és que conforme voy poniendo mas botones los más reciente se ven la otra imagen que pongo para cuando el cursos este encima i otras no lo hacen. Pero es que aparte los botones que tengo puesto en otras zonas por ejemplo poongo una barra de menus en el lateral i inserto los botones, estos que pongo ahora me funcionan però alomejor entonces los de la cabecera dejan de mostrar la segunda imagen al pasar el curosr. No se si me entiendes
ResponderEliminarLo he probado en otras computadoras i pasa lo mismo i incluso peor.
ResponderEliminarInsisto. Necesito que lo montes tal cual lo haces aunque sea en un blog de prueba, para poder ver qué es lo que sucede.
ResponderEliminarsi jeje
ResponderEliminarHola oloman, una cosa aparte del tema: ¿Como haces para que cada vez que señales con el puntero "algo" tenga un cuadro amarillo con texto?
ResponderEliminarComo este: http://1.bp.blogspot.com/_m9myEUCycrI/TJS8-HV-iUI/AAAAAAAAAcI/2IBRh_yuzCA/s1600/cuadroama.png
Facundo, ya te contesté en otro post dónde hiciste la misma pregunta ;)
ResponderEliminarSi, disculpa es que no me acuerdo en que post comente lo mismo. ¿Me puedes decir?
ResponderEliminarAdemás de en este de aquí, también en este y en este.
ResponderEliminarEn el último, que fue tu primero, tienes la contestación.
Lo que deberías hacer es pinchar en "Suscripción por correo electrónico" cuando hagas una pregunta. Así te saldrá un aviso automático en tu email con enlace al comentario cuando alguien conteste. :D
Saludos, ante todo muchas gracias por tantas ayudas, te pregunto si se puede quitar el fondo negro por un fondo transparente, ya que subí las imágenes en png, pero el fondo sigue saliendo negro. Gracias
ResponderEliminarNo hay problema. Puedes poner el fondo que quieras, bien sea un color plano o una imagen. Lo único que tienes que cuidar es el formato de la imagen que formará las pestañas. Como intento explicar en el post, o usas una imagen en la que se completen los huecos "no dibujados" con el color de fondo, o directamente usas un formato que permita transparencia, como es el caso de GIF y PNG.
ResponderEliminarGracias por tu respuesta ya me funciono, ahora tengo una pequeña duda, como le puedo quitar o hacer transparente un pequeño separador negro entre cada botón del menú. Para que me entiendas mejor mira este es el blog: http://pep-estanislaozuleta.blogspot.com/
ResponderEliminarDe nuevo muchas gracias y disculpa las molestias.
Esa línea la mete el estilo genérico para enlaces dentro de listas. En...
ResponderEliminarul#main-nav li a
...añade un border:0px; y creo que se quedará todo el problema resuelto.
Buenas! Me funcionó de maravilla el menú. Mi única consulta consiste en que si es posible colocar una imagen diferente para cada una de las pestañas.
ResponderEliminarSaludos!
No con este sistema Tumacher. Cada pestaña es un elemento de lista y con este código, TODOS los elementos tienen el mismo fondo. Tendrás que buscar otra cosa si lo quieres hacer con imágenes distintas.
ResponderEliminarHola! Creo que mi duda está dentro de este post... He puesto unas pestañas en mi blog, pero se ven semi-translúcidas y no se leen bien con el fondo. Me gustaría ponerlas de un color opaco, o no tan transparente, pero soy incapaz! He probado mil cosillas que voy viendo por tu blog y nada... si cambio el color aparece una barra opaca por detrás, y eso queda peor aún...
ResponderEliminarParece que lograste solucionarlo antes de que yo pudiera atender este comentario, La ladrona de libros. Ahora mismo tienen un fondo de color plano, sin transparencia.
ResponderEliminarGracias por tu respuesta Oloman, pero lo cierto es que no lo conseguí, igual no me expliqué en el pregunta, me refería al color del fondo que está detrás de las pestañas. No consigo ponerlo transparente, y por eso tengo que buscar fondos de página de colores similares al de las pestañas, para que no se note... :S Debe haber alguna forma de poner ese fondo de atrás transparente.
ResponderEliminarA ver si es esto lo que quiers Ldrona de Libros:
ResponderEliminar.tabs-inner .widget ul {opacity: 0.6;}
Saludos Oloman. "Proyecto Educativo Popular Estanislao Zuleta", hizo una pregunta respecto a: COMO PONER LA BARRA NEGRA TRASPARENTE. Me gustaría, si puedes, que hagas una explicación mas detallada ya que soy nuevo en esto del "BLOG".
ResponderEliminarAprovecho para felicitarte... y de paso te dejo mi blog para futuras consultas de mi parte.
http://detrasdelaverdadss.blogspot.com/
Sandy, el tuyo no es el mismo caso exactamente. Prueba a añadir a ul#main-nav una línea más con background: transparent;
ResponderEliminarEXCELENTE !!!
ResponderEliminarAntes había intentado con la palabra "transparent".Quite la parte que dice: "margin:0px;
padding:0px;" y la sustituí por "background: transparent;"
Ahora se aprecia una diminuta linea negra. ¿que podría hacer en ese caso para eliminar eso?
Y gracias por contestarme, tu blog me esta ayudado mucho !!!
Sandy, a ver si en tu plantilla tienes una clase llamada
ResponderEliminar.tabs-inner .widget li a
Si es así, la raya sale por la última propiedad:
border-right: 1px solid #000000;
Si la quitas, la rayita desaparece. Lo que no sé es si esa línea sirve para algo más, pero puedes probar y si te estropea algo, la repones.
Aparece la parte que dice: ".tabs-inner .widget li a" pero no aparece esa propiedad. De todos modos intentare otras cosas, sino tendré que dejarlo así. Muchas gracias por tu tiempo !!!!
ResponderEliminarSandy, quizás es una propiedad heredada y por eso yo lo veo así, pero no hay problema. Si no viene en lugar de quitarla, fuerza la desaparición del borde incluyendo en ella un border:0;
ResponderEliminarSi no funciona puedes forzar un poco más poniendo en lugar de eso, border:0 !important;