JMiur [E]

Poner una barra de menús (feo plural) horizontales es algo bastante simple, el código CSS está ampliamente difundido, en este caso particular, me basé en uno de Dynamic Drive para ahorrar tiempo pero puede ser cualquier otro. En el mismo sitio hay muchos más modelos gráficos que pueden adaptarse a diferentes diseños de plantillas.


Una barra se hace utilizando una lista (etiquetas UL y LI) a la que se les establecen propiedades específicas para darles el formato deseado.

Esta es una lista normal:
  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
<ul>
<li>AAAAAAA</li>
[.......]
</ul>
Esta es una lista donde al elemento LI {} se le establece la propiedad display como inline:
  • AAAAAAA
  • BBBBBBB
  • CCCCCCC
Ahora, establecemos las propiedades de la etiqueta UL {}:
float: left;
width: 100%;
margin: 0;
padding: 0;
[... propiedades de color, bordes y fuentes ...]
  • AAAAAAA
  • BBBBBBB
  • CCCCCCC


Como cada uno de los textos, serán vínculos, debemos establecer las propiedades de estos LI A {}:
float: left;
padding: 10px; /* cuánto se va a separar el texto de los bordes */
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF; /* raya vertical de separación */



Ahora, sólo falta establecer las propiedades del efecto rollover sobre los vínculos A para que funcione en Internet Explorer ya que este navegador no permite este tipo de efecto sobre otros elementos.

Así que debemos establecer las popiedades para la etiqueta LI A:hover {}:
color: #FFFFFF !important; /* forzamos el cambio de color del texto del vínculo */
background-color: #BF0000; /* cambiamos el color del fondo */



Pero claro, en lugar de colocar un color de fondo, podemos colocar una imagen. Una, será la imagen "NORMAL", la que se verá siempre (SolapaNormal.gif) y la otra, la que producirá el efecto rollover (SolapaActiva.gif) cuando pongamos el mouse encima de cada item de la lista.

En la etiqueta UL debe establecerse la propiedad background con la imagen normal que centramos y repetimos como tile horizontal:
background: #004080 url(SolapaNormal.gif) center center repeat-x;



Y en la etiqueta LI A:hover establecemos la propiedad background con la imagen del rollover:
background: #004080 url(SolapaActiva.gif) center center repeat-x;



Para que todo sea más simple, creamos las clases CSS necesarias y las colocamos en la sección de estilo de la plantilla:
.solapamenu {
float: left;
width: 100%;
margin: 0;
padding: 0;
background: black url(URL_SolapaNormal) center center repeat-x;
[... propiedades de color, bordes y fuentes ...]
}

.solapamenu li {display: inline;}

.solapamenu li a, .solapamenu li a:visited {
float: left;
padding: 10px;
text-decoration: none;
[... propiedades de color, bordes y fuentes ...]
}

.solapamenu li a:hover {
background: transparent url(URL_SolapaActiva) center center repeat-x;
[... propiedades de color y fuentes ...]
}
Finalmente, debemos definir dos cosas, qué queremos mostrar y dónde ubicamos la barra.

Hay muchos ejemplos de barras donde las solapas se corresponden con las etiquetas, incluso hay widgets específicas para esto.

La limitación de este tipo de solución es que la barra se torna incontrolable ya que, si las etiquetas son muchas o se van modificando, la barra se va adaptando con consecuencias imprevisibles.

Mi idea fue independizarme totalmente de las etiquetas (algo que siempre me ha parecido muy poco práctico) y crear una serie de post especiales que contuvieran un índice personalizado. Por supuesto, hay una solución intermedia que es utilizar como vínculos, sólo ciertas etiquetas. Esto se consigue poniendo con la siguiente URL:

URL_BLOG/search/label/ETIQUETA/

Dependiendo de la estructura de cada plantilla, la barra puede ubicarse como parte del header o debajo de este.

Este es el código normal de una plantilla Mínima:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Probando Blogger Beta (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>

[... POSIBLE UBICACION 1 ...]

</b:includable>
</b:widget>
</b:section>
</div>

[... POSIBLE UBICACION 2 ...]
En cualquiera de los dos casos, el código principal es el mismo:
<ul class='solapamenu'>
<li><a href=''URL_blog/index.html'>Inicio</a></li>
<li><a href='URL_vinculo'>VINCULO</a></li>
[... tantas etiquetas LI como vínculos se quieran poner ... ]
</ul>
<br style='clear: left'/>
En el primer caso, el código se inserta sin más trámite. En el segundo caso, deberíamos ubicarlo dentro de un bloque DIV:
<div id="menuSolapas" style="width: 100%; height: VALORpx">
[... el código anterior ... ]
</div>
donde debemos tratar de calcular la altura de la barra (VALORpx) que dependerá del padding usado y del tamaño de las fuentes. Una forma simple de hacerlo es colocarla en la plantilla, usar la VISTA PREVIA, capturar la ventana con ALT+PrintScreen y medir el sector con cualquier procesador de imágenes.

115 comentarios:

Esteban  

Excelente artículo Jmiur,será cuestión de ponerse a experimentar un poco... :)

Saludos.

Responder
Anónimo  

Ya he creado mi menú horizontal en rEdEsfEr@. Aunque aún lo tengo que arreglar. Dejarlo bonito.
¿Como pongo la anchura del bloque de menú? Se me sale por los lados.
Saludos.

Responder
JMiur  

Daniel, te he contestado por mail porque tengo alguna duda sobre tu pregunta.

Responder
Santi Benítez (Sun_Tsu)  

Porras, no le contestes por mail, pon la respuesta aquí hombre, así nos enteramos tod@s, que yo tengo la misma duda.

Ôo-~

Responder
JMiur  

Amigo, es imposible contestar aquí porque no hay una regla general, depende de qué tipo de barra están hablando, de dónde la han ubicado y cuáles son las propiedades que tiene.

Si dejas la URL de tu blog, con gusto miraré de qué se trata. También puedes consultarme por mail.

Responder
Bad to the bone  

Ah, de acuerdo. El blog en el que estoy haciendo pruebas es http://malotodabone.blogspot.com , y lo quiero poner justo debajo de la imagen de cabecera.

Ôo-~

Responder
JMiur  

Intento contestar aquí, no sé si quedará claro, si no es así, envíame un mail.

Primero que nada, debes reordenar la forma en que están colocados los bloques. Ahora están (resumiendo), así:

<div id="logo">
<center>
<img width="944" height="230" src="laimagen" ....... />
</center>
</div>
<br> ......... muchos
<ul class="solidblockmenu">
<li>.............</li> los menues
</ul>
<br style="clear: left;"/>

Esto, debería quedar de esta otra forma:

<div id="logo">
<img width="944" height="230" src="laimagen" ....... />
<ul class="solidblockmenu">
<li>.............</li> los menues
</ul>
<br style="clear: left;"/>
</div>

En tu caso, el menú, debe estar DENTRO del DIV logo.

Y las propiedades CSS deberían modificarse así:

#logo {
eliminar position: absolute
}

.solidblockmenu {
eliminar position: absolute
eliminar left: 2%
cambiar margin:0 por margin:0pt 32px;
cambiar width:96% por width:944px;
}

solidblockmenu li a {
verificar si será padding:9px 11px; o padding:5px 11px;
}

El resultado se vería así pero estoy trabajando con tu plantilla online lo que significa que hay detalles que podrían tener que ajustarse más, en todo caso, haz la correcciones, me avisas y seguimos "retocando".

Responder
Bad to the bone  

A ver, échale un vistazo cuando puedas. No es por echarme flores pero creo que me ha quedado de rechupete:

http://malotodabone.blogspot.com

En realidad quería que me quedara parecido, o lo más parecido a esto:

http://elartedelaguerra.freehostia.com

Aunque bajo mi punto de vista creo que me ha quedado mucho mejor - salvando el hecho de la falta de calendario, y alguna otra cosilla, que solucionaré poco a poco.

Te agradezco mucho la ayuda y, sino te importa, te linkaré para que los que me leen puedan también aprovecharse de tus conocimientos.

Ôo-~

Responder
JMiur  

Pués, si estás feliz con los resultados, no importa nada más :D

No pude ver el modelo que dices porque freehostia no parece estar funcionando, pero lo intentaré nuevamente.

El link, se agradece :$

Responder
Luis Fernando Montoya  

Hola no se pero se podria crear el mismo pero vertical lo necesito asi gracias

Responder
JMiur  

¿Es posible hacer una barra índice vertical? Sí, la respuesta es sí.

Responder
Anónimo  

Hola :) JMIUR! he seguido los pasos uno por uno pero tengo el problema de que cuando aumento:


li{
display: inline;
}



li a {
float: left;
padding: 10px; /* cuánto se va a separar el texto de los bordes */
text-decoration: none;
color: #FFFFFF;
border-right: 1px solid #FFFFFF; /* raya vertical de separación */
}

li a: hover
{

color: #FFFFFF !important; /* forzamos el cambio de color del texto del vínculo */
background-color: #BF0000; /* cambiamos el color del fondo */

}

ul {
float: left;
width: 100%;
margin: 0;
padding: 0;

}



cosas que no hay en la plantilla Minima pues... pasa que la configuración de mi Archivo (por meses)en el sidebar se desconfigura... y sale con rayas divisorias como las del menú.

Ahora el menú estába bien en FireFox pero en IE me salía desbordado al lado derecho desconfigurando la cabecera ¬¬.

Volví a leer tu post para saber qué había hecho mal y resulta que no tenía el "li, ul, etc etc" declarados... y ahora que los declaro pues la cabecera sale muy bien! junto al menú pero lo del sidebar se desconfigura (Arhivos) de mi blog. Cómo puedo hacer que lo que afecta al menú no afecte a mi sidebar?

Responder
JMiur  

Así como lo cuentas, suena a que ambos elementos (categorías y etiquetas) utilizan las mismas propiedades y eso produce el conflicto.

Por eso es que estoy utilizando una clase específica para el índice. Por ejemplo:

.solapamenu li {display: inline;}

Sería bueno que pusieras la URL de tu blog para ver el problema online, sino, se hace un poco complicado contestarte.

Responder
Anónimo  

Hola! :) te cuento que ya solucione el problema ;)

(div id="menuSolapas" style="width: 100%; height: VALORpx")
[... el código anterior ... ]
(/div)


no puse esta parte jeje y por eso era el problema ;).

Y bueno gracias de todas formas! ahora la parte que no entendi es la de :"URL_BLOG/search/label/ETIQUETA/"

por otro lado quiero hacer los índices, para ello creaste posts con los enlaces de tus otros post ( que pertenecían a las categorías del menú) ?

Responder
Anónimo  

Hola! :'( JMIUR!... jajaja pensé que había solucionado mi problema pero no da... ¬¬ he estado utilizando la misma plantilla que usas y tratando de hacerle cambios... http://g-meyly.blogspot.com/ ese es mi link. haber que me dices =/ lo que es yo es Sábado jajaja y aunque me duela tengo que dejar de seguir analizando lo que hice mal :( sino terminare con la respectiva jaqueca :p.
Espero puedas ayudarme! un beso y mil gracias!

Responder
JMiur  

Esta es la captura de pantalla cuando lo veo en Firefox y esta otra cuando lo veo en Internet Explorer.

1. Por lo que veo, hay algún problema en la parte gráfica, falta ubicarlo correctamente. Esto es debido al tipo de header que utilizas, la solución para esto es modificar un par de propiedades CSS:

En #header-inner dice padding:10px, cambiarla por padding:0px;, es una propiedad que controla los textos del título y descripciòn de tu blog en el header pero, que ahora no tiene utilidad porque usas una imagen.

Luego, en .solidblockmenu, deberías colocar margin-top:340px porque tu imagen es más alta que la que uso yo y hay que "bajar" la solapa con los índices.

El resultado se vería así.

2. Las direcciones que utilizas, apuntan todas a mi blog, lo que debes hacer es cambiarlas por direcciones a tu gusto, por ejemplo:
<li><a title="blablabla" href="http://g-meyly.blogspot.com/2007/04/conversacion.html">BlaBla</a></li>
esta te enviaría a ese post.

Parece que no tienes agregadas etiquetas a los posts, podrías poner alguna para hacer pruebas. Supongamos que a cualquier post le colocas la etiqueta ETCETERA. Luego, podrías poner en una de los vínculos:
<li><a title="blablabla" href="http://g-meyly.blogspot.com/search/label/ETCETERA/">BlaBla</a></li>
y, al hacer click, se abriría una página con todos los post que tuvieran esa etiqueta.

También puedes poner una dirección externa:
<li><a title="blablabla" href="http://www.google.es/">Google</a></li>
abriría la página de Google.

3. El tema de los archivos en la sidebar. Ahora dice:

li a {
border-right:1px solid #FFFFFF;
color:#FFFFFF;
float:left;
padding:10px;
text-decoration:none;
}

simplemente, eliminar todo. Debe ser algo que quedó de alguna prueba y ahora está perturbando.

Espero que esto ayude. Cualquier problema, te recomiendo que me envies un mail a vagabundia@gmail.com para que la cumuncación resulte más simple.

Responder
Luciano  

Hoa Jimiur , te cuento que uso otra modificacion del tema Beckett, y quiero agregarle el menu CSS que citas, (entiendo poco de CSS) para adaptarlo al template que estoy usando .
Supongo que en "Editar plantilla" ahi tengo que insertar ambos codigos pero no encuentro el lugar aun expandiendo artilugios..



Me refiero a los codigos que pusiste..

...creamos las clases CSS necesarias y las colocamos en la sección de estilo de la plantilla:

.solapamenu {
float: left;
width: 100%;
margin: 0;
padding: 0;
.................etc...

y el otro codigo..

...ul class='solapamenu'>
... [... tantas etiquetas LI como vínculos se quieran poner ... ]
..ul>
... br style='clear: left'/>

Tal vez puedas ayudarme Gracias! y felicitaciones por el blog

Responder
JMiur  

Los códigos CSS se pueden poner de dos maneras.

1. Buscas la etiqueta </b:skin> y justo antes de esa etiqueta, copias y pegas los códigos. Todo lo que está entre <b:skin> y </b:skin> son las propiedades de estilo de tu blog. Quedaría algo así:
<b:skin>
................ lo que hay ahora
................ los códigos nuevos
</b:skin>


2. También puedes buscar </head> e inmediatamente antes, crear una sección de estilo:
<style type="text/css">
................ los códigos
</style>
</head>


El otro codigo: <ul class='solapamenu'> ... etc
debe ir en el header, que parece que en tu caso tiene como id "banner", No puedo guiarte con exactitud porque veo el código resultante pero no la plantilla.
En este momento es algo así:
<div id="banner">
<div id="banner-inner" class="pkg">
<div id="header" class="header section">
</div>
</div>
.................. yo pondría el código acá
</div>


Es probable que, una vez colocado, requiera algún ajuste de márgenes pero eso se soluciona fácil y lo vemos cuando el código esté colocado.

Cualquier problema, podés mandarme un mail a vagabundia@gmail.com para que las explicaciones sean más fáciles de escribir.

Responder
Luciano  

Gracias!!!!
Despues de unas horas pude terminar al menos como modo de prueba el primer menu, el unico inconveniente es con el explorer 7 la barra se sale del margen a la derecha unos centimetros ..

busque en dynamicdrive encontre esto nose si tiene que ver

!--[if IE]>
..!style type="text/css">

*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/....


saludos!

Responder
JMiur  

La solución que encontraste es la correcta. Si no hay más remedio, se utilizan hacks para encuadrar las cosas:
<!--[if IE]>
<style type="text/css">
.... aqui van las propiedades sólo para IE
</style>
<![endif]-->

Pero en tu caso, yo probaría modificar una propiedad en .solapamenu en lugar de poner width:0, probá poner width:760px

Lamentablemente, es algo que no puedo probar desde aquí pero me parece que debería funcionar.

Responder
Anónimo  

Hola! ya está resuelto el problemita, muchas gracias! ;)
Y sí, cambiare las direcciones de los botones, asi que no te preocupes ;).
Ahora aparece otro problema... cuando paso el mouse por encima del menú pues la solapa no cambia de color sino hasta tocar la parte superior de la misma... :s No sé qué es lo que pueda ser... bueno, ya tienes la dirección de mi página para ver a lo que me refiero :)
Gracias por toda la ayuda!

Besos!

Responder
JMiur  

Por las direcciones no te preocupes, la advertencia no era para que las quitaras porque me molestaran :D

Para que los links funcionen: en #header-wrapper cambia la propiedad height por este valor:

height:403px;

Responder
Heber Arroyo Arce  

Hola Jmiur, me podrias ayudar, he creado el menu horizontal copiando uno de dynamic drive y todo anda bien, pero lo unico que falta es que salgan las imagenes de solapa, la de fondo y la del rollover, he hecho de todo y no salen, que podría ser?

Responder
JMiur  

Heber:

La imagen que has colocado no es la imagen:
http://img206.imageshack.us/my.php?image=chromebg2ia9.gif

En ImageShack hay varios enlaces que pueden copiarse, la imagen real está en el último, el que dice Direct Link to Image.

Es fácil de comprobar, copia y pega la direccion URL en la barra de direcciones del navegador y verás que se abre una página web y no la imagen. Ahora, simplemente copia el enlace de la imagen que se muestra y colócalo en la plantilla, reemplazando lo que tienes puesto:

http://img206.imageshack.us/img206/3104/chromebg2ia9.gif

Probablemente, si hay otra imagen en el menú, debe pasar lo mismo.

Responder
Anónimo  

Hola, quería hacerte una pregunta sobre los menús...
Yo uso una plantilla andreas02 y, tal y como dices en el tema Blogger: Plantilla, elementos y secciones (1) mi menú nada más muestra como solapa activa la principal y no va cambiando, ¿esto se puede resolver de alguna forma? Es que leyéndote y comparando con el código de mi blog muchas cosas no las encuentro (tampoco tengo mucho dominio en esto jeje)...
Bueno, muchas gracias ante todo, ¡adiós!

Responder
JMiur  

Si te refieres a que quede marcada la solapa activa cuando estás en una página, si estás en HOME que se resalte HOME, por ejemplo; eso no está contemplado porque en Blogger habría que resolverlo de alguna otra manera y no sería automático, habría que hacerlo manualmente.

Responder
Anónimo  

Sí, me refería a eso, pero si ya hay que hacerlo manualmente está más complicao :s.... Bueno, ¡adiós y gracias!

Responder
j a v i e r . g m  

Hola JMiur, este hack me funciona a la perfección, pero sólo en Firefox. Hace poco estaba probando los blogs (Mandarina Mecánica FC) en IE y me di cuenta de errores que no sé como solucionar.
La imagen de fondo no aparece en IE, sino que aparece el bottom del header, lo que genera un efecto bastante feo. Ojalá me puedas ayudar con eso..

Muchas gracias de antemano
Saludos.

Responder
JMiur  

Lo que ocurre en tu blog es que la imagen del fondo del header está repetida, está en dos partes. Primero, como fondo del DIV HEADER y luego, como enlace como etiqueta IMG.

Lo razonable, sería quitarla del DIV ya que eso hace que se repita y se muestre en el menú cuando lo muestras en IE:

Ahora dice esto:
#header {
background:#FF8833 url(http://mandarinafc.googlepages.com/header.jpg) repeat-x scroll left bottom;
}

simplemente quita esa imagen repetida:

#header {
background:#FF8833 url() repeat-x scroll left bottom;
}

Responder
j a v i e r . g m  

Muchas gracias.. ahora funciona perfecto =)

Saludos

Responder
Anónimo  

Esto si que es ¡¡¡¡sumamente dificil!!!!!

:( :(

Responder
Anónimo  

Carmen,

Para un inexperto como yo -si me paro al lado de JMiur si que lo soy-, puedo decirte que esto sólo tiene una regla:

Intentalo y ya.
Poco a poco sale. JMiur lo ha explicado muy bien y si yo lo entendí, es cuestión de seguirle la palabra y luego dejar correr la imaginación.

^^

Responder
HaCk CrAcK  

Hola, yo en mi blog principal, como queria hacer submenus en cada menu, ocea yo entraba por el blog principal y a la derecha tenia todo el menu de lo que contenia este, pero al hacer click en el menu de juegos que me cambie el menu de la derecha por cosas sobre juegos (ejem. arcade, capcom, etc) pero como no pude tube que crear un blog diferente para cada categoria.
Se podra hacer lo que digo pero si hacer un blog nuevo.
Si no entiendes lo que te explico fijate en mi blog que es www.algoquenosabias.blog... y anda al menu de arriba ocea el vertical que ese serian los diferentes blog

Responder
JMiur  

Creo que lo que quieres hacer es un menu con submenues o algo así. Poder ... casi todo es posible pero requiere diseñar y desarrollar cada cosa. Eso, no es sencillo y excede las posibilidades de este blog.

Responder
HaCk CrAcK  

Ok, gracias igua

Responder
Shark_Bloody  

hola, como hisiste para que el menu te quede pegado al banner?

Responder
JMiur  

Ubicándolo en el Header de la plantilla y pondiéndo las propeidades CSS correctas. Depende mucho del blog en particular.

Responder
Shark_Bloody  

che no quiero abusar de tu amabilidad, si no lo he hecho ya, pero si no te fuese demasiada molestia revisar mi blog, el menu ya esta en el header, pero queda una horrenda separacion, supondo que para ti debe ser una pabada, pero no hace mucho que empese a toquetear el codigo del blog y mis conocimientos no son lo que podria decirse extensos, muchisimas grasias de antemano, sin tu blog, no habria hecho ni la mitad de las cosas.

Responder
Shark_Bloody  

ha, el menu es el que tu diseñaste, no pretendo robar tu diseo, sino que esta de prueba(y con eso no quiero desmerecerlo), bueno aclarado el tema. suerte

Responder
Shark_Bloody  

otra vez yo, no te habia dejado la direccion del blog: http://matacerebro.blogspot.com/

Responder
JMiur  

Sharck_Bloody: No es un problema de usar este u otro diseño sino de las caracteristicas del blog, de como esta colocado el código y de las propiedades CSS de todo el blog. Por ejmeplo, de donde estan las imágenes de fondo.

Por que, en realidad, no hay separación sino que casi esta pegado y lo que ves como separacion es la imagen de fondo.

Me explico con pequelos detalles que pueden cambiarse y usr la vista previa para chequearlos:

Busca esto y agrega color al fondo del elemento header. eso, te mostrará su tamaño real:

#header-wrapper {
background-color:#000000;

en ese mismo lugar, hay una propiedad de margen que separa el header del área de post:
margin:0 auto 80px;

Ese valor de 80 pixeles puede modificarse.

En este otro:
#header {
height:300px;

le das 300 pixxeles de alto pero, sólo la imagen mide más. Simplemente, elimina eso y deja que el navegador calcule la altura total.

Por último, así hasta ahora, una cosa queda debajo de la otra la separcion que ve es porque la imagen de fondo tiene mucho espacio. Podría subirse el menú si colocas un margen superior negativo.

<ul class="demoS2" style="...........

Busca esa parte y en lugar de margin: 0 0 0 0; coloca

margin-top:-20px 0 0 0;

Responder
Shark_Bloody  

Gracias loco sos un capo!!!

PD: lo unico que tuve que poner: "margin-top:-20px;" solamente porque con los demas valores no funcionaba.

Responder
Blogz  

Y después que tengo la barra de Menú...donde y cómo hago las secciones?

Gracias!

Responder
JMiur  

Fíjate en el post:

"Dependiendo de la estructura de cada plantilla, la barra puede ubicarse como parte del header o debajo de este ..."

Responder
Shark_Bloody  

Hola, tengo un par de preguntas:

-¿El menu que tenes en bolsanegra.net se puede implementar en blogger?

Si se puede, tengo otra pregunta:

-¿Pone automaticamente los ultimos 3 post de cada categoria o es un trabajo manual?

Y finalmente si las respuestas anteriores son afirmativas, ¿me ayudas a hacer uno?

Responder
JMiur  

No, Sharck, ese modelo no puede implementarse porque no podemos leer los datos de Blogger. En el caso de WP, eso puede hacerse mediante código ya que tenemos la posibilidad de acceder a la base de datos y manipularla.

Responder
Shark_Bloody  

Bueno, antes de darme por vensido, se me ocurre una ultima opcion , utilizar un feed para mostrar los ultimos post de cada etiqueta(http://tublog.blogspot.com/feeds/posts/default/-/nombre-de-la-etiqueta) y hacer lo mismo que se hace para mostrar los ultimos comentarios en tu blog(el que tenes en el sidebar), lo que habria que hacer es ponerlo dentro de otro bloque para poder agregar cosas, como por ejemplo un enlase que diga: ver mas, y que enlase a la dirreccion de la etiqueta que corresponda, claro que habria que ocultarlos con algun scrip, de todos modos, no creo que se carguen lento ya que solo estarian ocultos, finalmente darle forma de menu con css... nose si sera mucho trabajo, pero quedaria genial en blogger y con las limitaciones que tiene seria un gran logro, solo es una idea, que solo no llevare a cabo, por mis propias limitaciones de conociminto, pero tu eres el maestro y si te interesa estoy a tu disposision para aclarar cualquier punto que no se entienda del todo.

Responder
JMiur  

Eso requiere una serie de scripts para leer los títulos de los posts cosa que no es tan sencilla. Lo pensaré :D

De todas formas, una aclaración importante. Si lo que se agrega en la página está oculto o visible es irrelevante, en ambos casos, se carga igual, no se ve pero se carga así que eso es fundamental a la hora de evaluar la demora.

No hay en Blogger nada que permita leer la lista de posts y a la que podamos acceder, se utilza JSON que es un script "lento" y basatante engorroso.

Tal vez, una alternativa, sería usar Yahoo Pipes pero, habrá que ver la velocidad pero, en cualquier caso, el tiempo de carga será mayor.

Responder
David  

Hola JMiur. Aquí estoy vagabundeando un poco por tu blog ;)

Verás, quiero poner esta barra de menú porque creo que le da un toque profesional al blog, y lo he intentado, pero me he quedado atascado en el paso en el que al elemento LI {} se le cambia la propiedad display por inline, ya que no he encontrado en la plantilla dicho código.

Mil gracias y disculpa mi torpeza, (o más bien mi ignorancia) Veo que de estas materias aun me queda mucho por aprender :D

(PD Este es mi blog de prueba, donde he creado la lista: http://davidtroyagalvez.blogspot.com)

Responder
JMiur  

Efectivamente, esas propeidades no están definidas, se agregan, por ejemplo, antes de <b:/skin>

Ahora bien, lo que veo en tu blog es que estás usando un elemento TextList así que ahí el tema será diferente. No sé si será una buena idea usar ese elemento.

De todas maneras, por ejemplo, si agregas esto:

#TextList1 li {display:inline;margin-left:10px;}

verás la diferencia entre la lista que ahora muestras y la misma lista pero, una al lado de la otra, como un menú.

Responder
atajar  

hola JMIUR gracias a tu excelente ayuda he podido configurar mi blog ,la plantilla Blogger Theme Beckett la pude poner y el menu este acabo de ponerlo una pasada de bonito como ya te he dicho estoy mas tiempo aqui que en mi blogger, pero aun me faltan muchas cosas por arreglar asi que estoy en ello un saludo

Responder
JMiur  

Saludos, Lstg-atajar; me alegro que te fuera útil :)

Responder
Luxuria  

Hola!! Muy bueno este blog, y sobretodo muy útil. Gracias a este tutorial he conseguido modificar el menú que venía con mi plantilla pero aún así tengo dudas(mi blog es http://dolce-inferno.blogspot.com/) :
-Cuando pincho en "comentarios" me sale una página con todos ellos(al igual que si le doy a menú) pero con un formato muy raro, no parece de blogger , ¿cómo puedo cambiar esto?
-Lo de las etiquetas no me quedó claro, las otras 2 pestañas que venían vacías las he dado 1 título pero quiero que cuando pinche en "leer la historia" me salgan los posts en los que escribí un capítulo y si le doy a 2 reportajes", igual con sus respectivos post(para q sea más práctico tendría q crear un post que hiciese de índice y cambiarle la fecha para que apareciese 1º). Para ello tengo que escribir lo que pusiste de las etiquetas pero no entiendo exactamente a qué te refieres con lo que marcas en amarillo. ¿Dónde pone VINCULO tengo que poner la etiqueta que quiera?¿entonces qué URL tengo que dar?

Siento enrollarme tanto para 1 pregunta tan sencilla. Gracias de antemano

Responder
JMiur  

En el menú que tienes, "Comentarios" lo que hace es abrir la página de feeds de comentarios:
http://dolce-inferno.blogspot.com/feeds/comments/default
tienes razón, no es una página de Blogger sino del mismo navegador, sea cual sea el que uses. Es similar a tener un enlace que diga "Suscribirse a comentarios". Algo similar ocurre con "Menú", abrirá una direccion similar paero para siscribirse a los posts. Lo que no sé es que quieres que ocurra al hacer click en ellas.

Si etiquetas los posts, esos dos enlaces que quieres en el menú, podrían resolverse fácilmente; por ejemplo si todos los posts que tuvieran un capitulo tuvieran la etiqueta "capitulo", bastaría poner este enlace:

http://dolce-inferno.blogspot.com/search/label/capitulo

para que te los mostrara.

Todos los enlaces a las etiquetas son iguales y lo único que cambia es la ultima palabra que es el nombre que le has dado a la etiqueta. Eso es justamente la URL.

Espero que la explicación se entienda :)

Responder
Luxuria  

Se entiende perfectamente. Muchas gracias por la aclaración :D. Lo que no me gusta de cuando pincho en comentarios es porque el formato es totalmente distinto y descoloca un poco pero bueno,mejor eso que nada porque si hay muchas entradas es útil darle para ver el último comentario. Lo de las etiquetas parece muy fácil, es que me parecía demasiado sencillo que poniendo capítulo ya bastara pero me alegra saber que no es tan complicado.
A ver que tal se me da el cambio de fecha de las entradas

gracias por todo!!(y por responder tan deprisa)

Responder
JMiur  

Me alegro que se entendiera.

Para los comentarios, tal vez sería mejor usar algún otro tipo de modelo y que se mostraran con algún script o widget.

Responder
│░ leinaD ░│  

Se viene la navidad!!:P Saludos mi querido JMiur.
Quise probar esta barra, la probé en mi borrador y todo normal, pues copie tu mismo código para luego editarlo a mi modo:$ Pero resulta que en mi plantilla se muestra una imagen de un círculo pequeño amarillo, y justo cuando coloco el segundo menú interfiere y no sé como sacarla. Creo que es algo de la plantilla ya que en el borrador no me dio ese problema. ¿Qué será? :O

Responder
JMiur  

Eso es porque las listas del blog tienen establecida una imagen como decoración. Lo que debes hacer es quitarla del menú de este modo:

.solidblockmenu li {
background:none;
display:inline;
}

Responder
│░ leinaD ░│  

Done it! Gracias

Responder
│░ leinaD ░│  

Saludos mi estimado JMiur. Que te sigan los exitos este nuevo año, no habia tenido oportunidad de saludarte :(
Te tengo una consulta para variar :$ ... respecto a esta barra de menu, en mi plantilla vista en IE7 no hay problema, pero en el Firefox se ven como uno desnivelado al otro y se ve un espacio encima del bloque. Puedes darle una miradita. Gracias

Responder
JMiur  

Como la etiqueta LI tiene un definicion global en tu plantilla, deberás sobrescibirle dos propeidades al menú:

.solidblockmenu li {
background:transparent none repeat scroll 0 0;
display:inline;
margin:0 !important;
padding:0 !important;
}

Responder
│░ leinaD ░│  

Gracias JMiur.

Responder
Usuario10  

Saludos JMiur,
Logre poner un menu de los que comentas en "Dynamic Drive" y logre ponerlo debajo de la imagen, solo tengo 2 consultas:

1.- como coloco un buscador en la parte derecha del este menu horizontal (pero que quede centrado a este menu)?
2.- Es posible agregar colocar alguna imagen, TEXTO, o codigo HTML arriba de "b:includable", que quede por arriba de la imagen? como seria el codigo?

entiendo que tendria que jugar con el padding y margin, hize una prueba pero me movia el menu horizontal.

Gracias man Mira como me quedo BLOG DE PRUEBAS

Que tengas buen fin de semana man.

Responder
JMiur  

Hay muchas alternativas y es un poco difídil enumerlas en abstracto, debería estar colocado el buscador para poder verlo onnline.

Por ejemplo, podría agregarse como otro item de la lista, flotando y luego acomodarlo con padding:

<li style="margin:VALORES;float:right;"> el buscador </li>

Podría establecerse:
#header-wrapper {
position:relative;
......
}
y el div del buscador, ubicarse de manera abslota con respecto al header:
#buscador {
position:aboslute;
left:VALORpx;
top;VALORpx;
......
}

Podría colocarse como elemento de la sidebar y darle un margen negativo para que suba.

Lo otro, la respuesta es no. no pueden colocarse códigos fuera de un includable. El espacio apra textos es el que creo que ocultasete anteriormente, ese H1 que contiene el título está encima de la imagen.

En realidad, cualquier bloque puede colcoarse dentro del header y luego ser posicionado en un lugar exacto usando float y position.

Responder
Anónimo  

He conseguido poner el menú superior, que queda muy del estilo de la anterior navbar, pero mi idea era también colocarlo pegado al banner. El problema es que, al hacerlo, la imagen del header se desplazaba a la derecha y en su lugar aparecía un recuadro negro, descolocando la página y creando un efecto horrible, aunque el menú sí se bajaba. No sé si eso tendría solución, imagino que sí, pero no quiero explitarle. ^^

Responder
JMiur  

Seguramente tiene solución pero debería verlo online para decirte. Probablemente sólo se trata de agregar o modificar alguna propiedad CSS del header o bien del menú.

Responder
Anónimo  

¿Espero entonces respuesta o propone Vd. que deje un rato «mal» la plantilla para que compruebe qué es exactamente lo que ha sucedido? Gracias por molestarse en ayudar. Disposición así da gusto.

Responder
JMiur  

Exacto, esa es la idea. Si eso es muy complicado podrías intentar hacerlo en un blog temporal, copiando la plantilla.

Responder
velloa  

Hola JMiur te felicito esta muy bien explicado tu tutorial y quiciera preguntarte una pregunta si no te molesto mucho se puede poner un menu hecho por mi con photoshop ya que yo he hecho mis propios botones para mi menu y pues no tengo idea de como ponerle a la plantilla esos botones ya que lo estoy intentando pero la mera verdad no se ya como hacerle espero que me puedas ayudar con este problema te lo agradeceria mucho
Saludos..

Responder
JMiur  

velloa: Seguramente se puede. Son imágnes así que deberás subirlas a alguna parte o a Blogger como cualquier otra imagen y usar esas URLs. No sé exactamente que quieres hacer ni cómo es, por eso no puedo darte muchos detalles.

Responder
mr x  

hola entre a la pagina de dynamic drive y encontre una barra de menu muy buena que cuando apoyas el mouse en una opcion te aparecen mas opciones.
El problema que esas otras opciones no me aparecen cuando pongo la barra.
Por favor ayudame, aca te dejo el link para ver la barra de menu a ver si vos le encontras algun error en el codigo.

LINK:http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/

Responder
JMiur  

Más allá de los detalles graficos, no veo que tenga problemas y funciona perfectamente. Sólo debes tener en cuenta que el script debe colocarse de este modo:

<script type='text/javascript'>
//<![CDATA[

y aqui va el código del script

//]]>
</script>

Responder
Anónimo  

Hola que tal, despues de leer y re-leer y volver a leer pues nomas no lo puedo conseguir, no logro poner la barra del menu, le he intentado de todo jaja pero ya el mensaje que me dice es:

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: Element type "a" must be followed by either attribute specifications, ">" or "/>".

ya no se que mas hacer estoy un poco desesperado!! nececito tu ayuda!!

te mando mi codigo para que me lo cheques!! pero a que correo!!
el mio es pepe_cn@hotmail.com

de antemano gracias!!

Responder
JMiur  

Por ahora no he visto el mail pero, lo miraré cuando llegue.

Responder
Anónimo  

Ok lo he mandado ya, es que no habia visto que tu correo estaba en la parte de arriva, lo mande a vagabundia@gmail.com gracias!!

Responder
JMiur  

OK Joshua, recién lo veo :D

Responder
BANDA PELAYEROS DEL PALMAR  

Lo que andaba buscando, realmente sus investigaciones nos fortalecen en los diseños gracias VAGABUNCIA es la universidad en blog de la super Autopistya de la informacion.

Responder
Knijo  

Una ayudita a un novato.Me he bajado un menu horizontal para mi bog recien abierto de dynamic drive.Trae dos codigos;el css y el htlm.Pero no tengo ni idea de donde ponerlos y me cansé de probar,borrar,y volver a probar.Gracias

Responder
JMiur  

El CSS va en la plantilla, antes de </head> Lo otro, no sabría decirte proque ahy decenas de mençis y cada uno tiene sus propais instrucciones. Las páginas de DynamicDrive suelen tener esas instrucciones.

Responder
dario  

como estar jmiur
mi problema es como hacer para que al darle click a los botones baya a la otra pagina ya que la plantilla que tengo ya tiene las barras pero no se como hacer par usarlas

Responder
JMiur  

dario:
Tienes que editar la pantilla. Si expandes los artilugios, ahí deverías ver algo llamado navigation. Allí están los enlaces así que sólo debes cambiar las direcciones y poner las que quieras.

Responder
dario  

la decir expandir te refieres a la edicion en diseño/edicion de html donde estan lo codigos es que soy muy novato en esto y me cuesta entender
desde ya gracias

Responder
JMiur  

Si, me refiero a eso, marca la opción Expandir los artilugios en esa pantalla.

Responder
Unknown  

HOLA QUISIERA SABER SI TE PUEDO DAR mis datos entras a mi blog y me lo puedes modificar tu mismo pues ya voy como un mes en esto y nada...espero tu respuesta muchas gracias de antemano

Responder
JMiur  

No, de ninguna manera. No entro en blogs ajenos; es una responsabilidad que no estoy dispuesto a asumir.

Responder
Ivoc  

hola

puse un menu y se desborda

como puedo arreglar eso

Gracias

Responder
Ivoc  

y otra cosa... no se q fue lo q movi... pero la sidebar y el post.. se me rejuntaron... casi se sube uno encima del otro

que hago?

Responder
JMiur  

Para que no se desborde, cambia la propeidad width que ahora dice 100%. Debe ser menor al 100% porque hay que descontarle los márgenes así que sería algo así:

solidblockmenu {
...........
width:960px;
}

Lo de los posts y la sidebar no sabría que responderte porque no sé como se veian antes ¿Qué quieres separar?

Responder
Ivoc  

la margen o la separación que hay entre los posts y la sidebar... q qde un espacio... porq no hay ninguno

Responder
Ivoc  

si ves aqui
http://tetrardus.blogspot.com/2008/11/quiero-que-sepas-que-si-te-gusta-el.html

vas a ver el texto super pegado a la sidebar... espero q me entiendas ya

saludos

Responder
JMiur  

Si. En esa entrada se ve con más claridad.

Lo que no sé es que puedes haber cambiado. Una posibilidad de arreglar eso es reducir el tamaño de main-wrapper que ahora dice width:560px; por ejemplo, puedes poner width:530px; o cualquier valor similar para ver si de ese modo queda como estaba antes, sino, dime cuál es la diferencia con lo anterior porque hay varias formas de separar esas dos partes y, aparentemente, la sidebar está bien y allí nada puede tocarse así que hay que concentrarse en al columna izquierda.

Lo que te digo, hará que toda esa columna sea más angosta y por lo tanto, se separará de las sidebars.

Responder
Ivoc  

cambie eso y seguia igual... pero con la parte de "contenedores"

cambie
#outer-wrapper {
...
width:980px;}

que estaba a 970... y como q funciono...

y otra cosita... la ultima ya, como hago para quitar el espacio q hay en la parte superior del blog... arriba de la imagen donde dice el nombre del blog

Gracias J

Responder
JMiur  

Por l oque veo en el código fuente, tienes dos DIVS de header, ambos con el mismo ID:
id='header-wrapper'

El primero, parece vacio pero tiene márgenes, el segundo es donde está el menú y la imagen del header mismo. Deberías eliminar el primero de ellos.

Pero, recuerda que no veo la plantilla sino el código fuente, hazlo con cuidado, elimina eso y antes de guardar, mira el blog con Vista Previa ... por las dudas :)

Responder
Ivoc  

uy Gracias...

todo esta bn ya

Responder
JMiur  

Perfecto :D

Responder
Prof. Cesar S.  

:D Saludos JMiur mira por donde ando, por esto de las barras, ya tengo una muy simple pero me gusta, y su estilo transparente y su color se modifican con las opciones de la plantilla en editar diceño del blog. La verda no hay problema solo que tengo algunas paginas y notas que me gustaria mostrar su enlace como submenu, es decir noticias:noticias recientes, noticias viejas por decir algo, que la barra sea plegable, como puedo crear esta funcion y estos submenu? y que al colocar el mouse se muestren los sub menus o que tenga una flechita que al presionarla se abre el sub menu. Amigo gracias la verda que ayudas amuchos con tus conociemientos, y eso hara que siempre tengas, porque el que da siempre tiene. Avisame...

Responder
JMiur  

Para eso hay muchas alternativas y todas son diferente; esta es una lista de algunas de las publicadas en este blog pero hay muchas otras. Ninguna es sencilla, todas son relativamente engorrosas.

Responder
.Sm4C.  

uhmm y si quiero agregar un buscador dentro del mismo
menu??
seria algo asi?

--------------------------------------------
Home - Rss - About [Aquí un buscador]
--------------------------------------------

como haría??

Responder
JMiur  

Deberías colocar el código del buscador dentro de la etiqueta LI:

<li> ....... acá ........ </li>

y seguramente, habría que agregarle propiedades específicas para que se muestre alineado correctamente.

Responder
Anónimo  

Hola, una pregunta...
Es posible centrar el menu ??

Lo intente cambiando el "float:left;" por "float:center;", pero nada cambia, y no tengo idea de como mas podria ser.

Espero que me ayudes. Gracias

Responder
JMiur  

No existe una propeidad tal como float:center. Las flotaciones sólo son a la izquierda y a la derecha.

Depende del contexto. Una forma es lo que has hecho en tu blog http://addicted-music.blogspot.com/
allí, agreags un DIV que contemga el menú y centras eso.

Otra forma es quitar el width de menuSolapas y poner allí text-align:center

Responder
kunzuilh  

Muy bueno. Me ha venido muy bien tu explicación.

Gracias!!!!

Responder
alan  

hola como estan todos... estoy empesando en esto de crear un blog.... necesito bastante de su ayuda, pues no entiendo muy bien, si me ayudan estare muy agradecido. ;)

Responder
MyM  

Hola JM. Tengo una duda aunque no estoy segura de que sea el tema indicado para hacerla. Sabes que yo tenía una Lista de Etiquetas que da Blogger pero me ocupaba demasiado espacio en la sidebar y la he reemplazado por una con Menú desplegable donde figuran todos los Temas del Blog. Necesito si me podés decir si eso puede ocasionar una disminución del tráfico a mi Blog a la corta o a la larga, no porque los visitantes no puedan encontrar los temas, sino por los robots o google o algo que yo desconozca.

Desde ya, muy agradecida por tu respuesta.

Responder
JMiur  

Desde el punto de vista de los buscadores no debería afectar en nada porque en un sitio web, las direcciones URL de las etiquetas no se indexn o no deberían ser indexadas.

Responder
MyM  

Muchas gracias JM, me quedo más tranquila. Un cordial saludo.

Responder
Unknown  

¡Hola, JMiur!
He puesto la barra de menú y ha quedado perfecta, según mis expectativas. Ahora me gustaría que algunas de las pestañas fueran desplegables, que se extendiesen hacia abajo para mostrar nuevas opciones. Si ya posteaste algo sobre ese tema, pasame el link por favor.
Por último, quisiera que me dijeras si es posible quitar ese espacio con rayas grises que hay debajo de la barra de menú, y que llegan hasta el cuerpo mismo del blog. De ser posible quisiera quitarlo también de encima de la cabecera.
Desde ya muchas gracias.
Saludos.

Responder
JMiur  

Para lo primero, necesitas de algún tipo de menú deplegable. Hay varios publicados y en al web hay muchos más.

El esapcio que queda debajo es porque le estás dando esa altura de 180 pixeles:
<div id='menuSolapas' style='width: 100%; height: 180px;'>

El de arriba es porque acá hay definido un margen de 20 pixeles:
.content-outer { ........ }
porque se ve en la esquina superior unos caracteres erróenos que dicen -->
y porque hay 30 pixeles de la NavBar que está oculta pero haces visibile cuando colocas el cursor encima.

Responder
Unknown  

¡Muchas gracias, JMiur!
Ya puse la barra junto al cuerpo del blog y eliminé el problema de los caracteres erróneos (-->).
No sé si entendí bien lo anterior: ¿querés decir que esta barra no puede hacerse desplegable; es decir, que el CSS es otro completamente distinto?
Si es así, es una pena, porque me gustaba mucho cómo había quedado. Pensé que sólo había que cambiar algo en la parte de "ul" y "li". :( Y bueh. Mañana sigo investigando.
Saludos, y mil gracias.

Responder
JMiur  

Todo menú desplegable es relativamente complejo. Puede adaptarse pero, no es siencillo.

Responder
Unknown  

Sí, ya estoy viendo que no es fácil. Sigo haciendo pruebas. Espero no estropear nada :D
Saludos,
Daniel

Responder
Claublog  

Hola JMiur,

He empezado a construir un menú horizontal en mi blog, pero por culpa de las nuevas plantillas de blogger, mi menú aparece desbordado de la anchura del blog. Me gustaría saber qué tengo que cambiar de la plantilla.

Mi intención final son botones individuales como éste blog de aquí.
De todas formas, sólo que me digas lo primero ya estaría encantado :D

Un saludote.

JMiur  

Si te refieres a que no ocupe todo el ancho, tal vez, eliminado las propiedades de color de fondo y borde de ese DIV:

.tabs-outer {background:transparent;}
.tabs-cap-top, .tabs-cap-bottom {border:none;}}

y usando los DIVs internos para colocar el color de fondo, cualquiera de ellos
#crosscol {}
#HTML1 {}

Claublog  

Muchas gracias. Ahora ya no hay fondo. Sólo hay los bordes y los márgenes.
¿Se supone que ahora ya puedo empezar a trabajar con lo que has publicado en ésta entrada?

JMiur  

En principio, si, basta que coloques tu menú en el elemento HTML1 y allí ya puedes darle als propiedades que quieras.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR