SERVICIOS - DISEÑO - FREEBIES - MEJORA TU BLOG -

11 dic. 2013

Menú horizontal para tu Blog!

Lo primero que debemos de hacer es tener una idea clara del tipo de menú que queremos y asegurarnos de que tenemos todas las entradas bien etiquetadas y  las etiquetas puestas en las entradas deben estar en consonancia con el tipo de menú que queremos hacer.

Por ejemplo este es mi menú:
Al clickar en Tutoriales nos llevará a todas las entradas etiquetadas con Tutoriales (o palomitas, gallinas da igual) lo que cuenta es que sea la MISMA etiqueta para todas las entradas que englobará Tutoriales.

Para más información sobre las etiquetas podéis mirar este otro tutorial.

Una vez organizadas las entradas, cada una con su correspondiente etiqueta para ser agrupada en la sección que queremos y que se mostrará en el menú, vamos a buscar las URL(direcciones) de cada entrada.

Es algo rudimentario y si tienes muchas entradas, te llevará un rato. Solamente tienes que abrir en pestañas nuevas todas y cada una de las entradas de tu blog. Hazlo por tongadas, sección a sección, es decir, haremos primero la sección Tutoriales, pues bien, yo soy la autora del blog y sé perfectamente dónde está cada entrada, rápidamente las encontraré y las abriré.

Copiamos la dirección de cada una en un bloc de notas mismamente y al ladito, para no despistarnos de cuál es cuál, el título de la entrada.

Tal que así:
http://lireth.blogspot.com.es/p/tutoriales-blogger.html----> Tutoriales
(Si os dais cuenta, entre *.com.es y tutoriales-bloguer hay una P)

http://lireth.blogspot.com.es/search/label/blogging----> Blogging
(Si os dais cuenta, entre *.com.es y blogging no hay una P)
 
Una vez tengamos las direcciones iremos al apartado de Diseño de blogger. Pulsaremos añadir gadget y seleccionamos el gadget Páginas, luego seleccionamos Editar.


Nos aparecerá una ventanita, en la que haremos click en +Añadir páginas con enlace.


Por último, se nos abrirá una pequeña ventana donde escribiremos el nombre de la sección (Tutoriales) y la url (dirección que hemos apuntado en el bloc de notas).
Haremos esto para cada sección que queramos tener en el menú de nuestro blog.

Si miráis cómo tengo la mía en la foto os doy una idea de cómo podéis hacerlo. Como veis en lugar de tener página principal pues yo tengo una página con enlace donde el título que puse es Inicio con las florecitas, y en la URL puse la dirección de mi blog.


Pulsamos Guardar y también, que no se nos olvide, pulsamos el botón situado en la esquina superior derecha Guardar disposición.

Bueno, ahora viene una explicación sencilla, pero IMPORTANTÍSIMA.
¿Os acordáis que os decía más arriba esto?:
http://lireth.blogspot.com.es/p/tutoriales-blogger.html----> Tutoriales
(Si os dais cuenta, entre *.com.es y tutoriales--bloguer hay una P)

http://lireth.blogspot.com.es/search/label/blogging----> Blogging
(Si os dais cuenta, entre *.com.es y blogging--bloguer no hay una P)

Bueno, eso es porque en las URL que aparece una p, significa que a donde te llevará al hacer click es una página.
Las URL que dicen search/label significan que al hacer click en ellas, lo que nos mostrará es todas las entradas que hacen referencia a una etiqueta. Por eso es tan importante etiquetar bien las entradas.

Si os fijáis, yo, en el apartado de Tutoriales, tengo hecha una Página, en la sección de Páginas en la administración de nuestro blog, justo debajo de Entradas.
En esa página hice un recopilatorio con todas las URL de cada tutorial (claro, cada vez que saco alguno tengo que añadirlo a manita, pero no cuesta nada se edita la página y listo).

Apunté la URL de esa página (una vez publicada, le di a ver y apunté la url) y luego en Diseño, gadget de Páginas, editar, añadir página con enlace, rellene con la URL y el título y ya tenía la sección hecha.
 
Para que se vea el VER ¡¡tienes que pasar el ratón por encima de la entrada!!!

Y así con cada sección menos con las que son por etiquetas.

A ver las de etiquetas SIEMPRE son iguales fijaros:

http://PericaysusCosas.blogspot.com.es/search/label/Ollas

En esta dirección nos mostraría todas las entradas etiquetadas con Ollas.

Si tú en tu blog quieres hacer una sección con todos los posts que tienes etiquetados con Crochet, pues en Título pondrás Crochet y en la dirección:

http://TU-BLOG.blogspot.com.es/search/label/Crochet

O sea, cambiarás solamente, las partes de color rosa, una por la Url de tu blog y la última por la etiqueta que quieras.

Es muy facilito, un poco lioso pero facilito.
Pues de esta manera tendremos un menú horizontal en el blog. Repreciosísimo.

¡¡¡OJO!!!: Resulta que en la vida de la programación y la informática, las cosas no tienden a ser tan sencillas como parecen sobre la pantalla jijiji.

Seguramente os habrá salido el menú si pero alineado a la izquierda ¿verdad?

Bueno pues vamos a hacer algo muy sencillito para que se centre ^^

Es muy sencillito, solamente tendremos que:

Ir al Diseñador de Plantillas (que está dándole a Diseño y arriba a la derecha os sale un link para ir al diseñador de plantillas)

Avanzado

Añadir CSS

Y pegamos este código:

.PageList {text-aling:center !important;}

.PageList li {display:inline !important; float:none !important;}
Aplicamos al blog

Y…Voilá, ya tenemos las páginas centradas.

¿No se han centrado? Malditas variables... Bueno veo que a muchas os da problemas este temita así que os explico un poco más en profundidad.
Si no se os ha centrado poned este código:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important; text-align:center !important;}
div#PageList1 div.widget-content > ul > li > a {
text-transform:none;
}

Si insertándolo con el Diseñador de plantillas no os hace caso, hacéis una copia de seguridad y luego vais a Plantilla y editar HTML.
Una vez ahí desplegáis artilugios y buscáis esto:
.Tabs

Abajo de todo de ese apartadito, después de la última } pegáis el código que os he puesto antes y guardáis. Y ahora ya sí que os tiene que salir centrado a narices ajajajaja.

Si tampoco os sale oye...me mandáis la plantilla por correo y os lo centro yo! ajajajaj

Truco y aprendemos Código de paso: si lo queréis alineado a la derecha el cachito de código donde dice: text-aling:center; lo cambiáis por text-aling:right; , que lo queréis a la izquierda pues en lugar de right poned left.
Donde veis text-transform:none; si queréis que las letras, ellas solas se pongan en mayúsculas poned text-transform:uppercase;
Es muy fácil cuando se sabe hacer.

Creo que ya está si me dejo algo o no he explicado algo bien me lo haréis saber con un comentario ¡seguro seguro!

Un beso

35 comentarios:

  1. Pero que bien explicado y que todo e cariño ^^ la de cosas que estas aprendiendo cacharreando, y de paso aprenden los demas, esta genial en serio ;) un cheer por ti (k)

    ResponderEliminar
    Respuestas
    1. Pues si, piensa que yo de XML y de CSS no tenia ni idea, sabia mucho HTML, algo de java pero para de contar :-). Aunque no es demasiado difícil parece ser que si sabes html todo lo demás es por el estilo igual.
      Como las lenguas, no se alemán ni se francés pero se indoeuropeo :)) (vaya ejemplos!)
      :k

      Eliminar
  2. Uff me tengo que poner a ello en serio, es lo que me falta para terminar el diseño de mi blog, pero con más de 200 entradas editadas me da muchiiiisima pereza, jejeje
    Ya te contaré qué tal me queda, la verdad es que tú explicación es buenísima y tengo ganas de empezar.
    Gracias y me quedo a seguirte a través de Bloglovin
    Bss desde Baúl Desastre

    ResponderEliminar
    Respuestas
    1. Ya...si desde un principio no etiquetaste bien ahora será un peñazo hacerlo con 200 entradas!!! Pero bueno dedícale un par de tardes y lo tienes seguro, es muy sencillo.
      Voy a pasarme por tu baúl a echar un ojo jijijiji :k

      Eliminar
    2. Bueno, me armé de paciencia y lo tengo... pero...
      1º no consigo centrar las entradas :-(
      2º cómo puedo cambiar el nombre simple por un dibujito como los tuyos??

      Mil besos y mil gracias por tus consejos

      Eliminar
    3. 1º--> Supongo que habrás hecho la segunda parte de este tutorial: o sea este trozo que dice:"Seguramente os habrá salido el menú si pero alineado a la izquierda ¿verdad?
      Bueno pues vamos a hacer algo muy sencillito para que se centre ^^
      Es muy sencillito, solamente tendremos que:
      ❀Ir al Diseñador de Plantillas (que está dándole a Diseño y arriba a la derecha os sale un link para ir al diseñador de plantillas)
      ❀Avanzado
      ❀Añadir CSS bla bla bla...) ¿Así no se ha resuelto?
      He mirado tu blog, el código fuente y veo esto:

      haz click aquí para ver el código

      Todo este código es una LISTA que enumera las categorías de tu blog. Es decir es otra manera de hacer un menú horizontal, pero no es el que explico yo en mi tutorial. Este modo de hacer es un poco más complicado porque si no se hace bien da bastantes problemas.
      Tienes 2 soluciones (bajo mi poco saber claro)
      1-> Busca en tu código HTML en la parte del CSS o sea del estilo, antes de algo que diga: .PageList1 o bien #PageList1 si lo encuentras mándame un correo con lo que ponga e intentare arreglártelo. Si no lo tienes en tu plantilla solo veo la solución 2.
      2->Borra todo rastro de intentos de hacer un menú tanto de código en la plantilla como de gadgets y hazlo otra vez con el método que explico en el tutorial.

      2º-> Estos dibujitos que yo utilizo se llaman código ASCII, son combinaciones de teclas que hacen aparecer dibujitos, hay muchos en google puedes buscarlos y elegir el que más te guste.
      Cuando hago las PÁGINAS (no confundirse con entradas) para enlazarlas con el menú ya lo explique en el tutorial, cuando las nombro en el titulo es donde pongo los dibujitos y así se guardan. Como cuando haces el menú horizontal tan solo alinea los títulos de las páginas que has creado pues aparece el dibujito. Así de fácil.
      Espero que te haya sido útil y que arregles el entuerto lo antes posible un besote! :k

      *Para abrir los links haz click derecho y Abrir enlace en pestaña nueva

      Eliminar
  3. Voy a rehacer el menú que tengo segun lo que dices pq yo tengo todas las paginas estaticas, pero hay una cosa que no entiendo, cuando dices que pogamos el nombre de la sección (Tutoriales) y la url (dirección que hemos apuntado en el block de notas). ¿A qué url te refieres si tenemos muchas entradas tendremos muchas url?, ¿Cuál debo poner?. igual es una tonteria pero me he atascado ahí.

    ResponderEliminar
    Respuestas
    1. Como bien dices si en una categoría, tienes muchas entradas, lo mejor es que cojas y le des a página en blanco (en lugar de dirección web) Se te abrirá como si fueras a hacer una nueva entrada en tu blog. Ahí lo que yo haría es poner un índice de las entradas que tienes en esa categoría con el título y en cada título la url de su entrada. El Título que le pongas a esa entrada, será el título de la sección que aparecerá en el menú de tu blog.
      Exactamente igual que tengo yo los Tutoriales o los cursos. ¿A que cuando le das a Tutoriales o Cursos no salen todas las entradas sino que sale un Índice de las entradas para que elijas cual quieres? (recuerda de poner siempre que se abra en nueva pestaña)
      Eso es lo que yo haría para una categoría que tiene muchas entradas.
      En la entrada explico la manera común de hacer un menú, pero claro si tienes 20 entradas en una categoría es mejor hacer un índice, la forma que explico en el tutorial es muy práctica y sirve para clasificar etiquetas. Por ejemplo si tienes 20 entradas con la etiqueta Maquillaje, al darle a la sección de tu menú Maquillaje se mostraran las 20 entradas una debajo de la otra. Pero si creas un índice podrás ir directamente a la que te interesa.
      Si sigues con dudas, mándame un correo será mas cómodo
      Espero que te haya servido la explicación!!!
      Muah :k

      Eliminar
  4. Muchas gracias voy a ver como lo centro y cuando tenga algo más tiempo crearé los índices :D

    ResponderEliminar
  5. ¡Hola!
    La verdad es que me encantan tus tutoriales, pero con este me ha surgido una duda...
    ¿con este tipo de menú, puedo poner subapartados?

    Un saludo!

    ResponderEliminar
    Respuestas
    1. :) Pues con este en particular tal y como está no. Lo que puedes hacer es lo que hago yo, que la categoría del menú te lleve a una pagina donde indexas el contenido.

      De todos modos, si quieres la semana que viene o la otra te hago un tutorial de como poner un Menú con subapartados.
      ¿Qué te parece?
      :k

      Eliminar
    2. Mira!!
      he encontrado algo mucho mejor, un vídeo tutorial para lo que estás buscando.
      ✿ http://www.youtube.com/watch?v=t_GpL58eStY ✿
      Espero que te sirva.
      :k

      Eliminar
    3. ¡Muchísimas gracias! Eres un amor ^^

      Tengo un menú con subpestañas, pero no me termina de convencer, y la verdad es que este menú me ha gustado mucho. Probaré a hacerlos todos y el que más me guste se queda.
      Gracias de nuevo!!
      Un beso!

      Eliminar
  6. Hola Lireth, una preguntilla, a ver si me sabes decir.
    Tengo un par de blogs privados. Uno de prueba y otros con links que me einteresan. Estaba haciendo pruebas y me he dado cuenta de que en ninguno de los dos, me deja poner más que sola una hilera de etiquetas en el menú éste, el horizontal. No es que no me deje, es que no me salen. Solo las veo desde DISEÑO.
    He probado en el blog de Andairadas, que tengo toda la hilera completa, y he podido crear un para mas de prueba y al GUARDAR CAMBIOS, se me han visto sin problemas. Pero en los otros dos, en los que estaba haciendo pruebas, pues no. A ver, no tiene la más mínima importancia porque los tengo privados, ya te digo, y no pasa nada....pero por qué pudiera ser?...a ver si tú sabes
    Gracias guapa

    ResponderEliminar
    Respuestas
    1. Cuando pasan esas paranormal activits pueden ser muchas cosas, pero seguramente sea lo de siempre, que haya algo que haga conflicto dentro del código, como un menú antiguo o que al crear las paginas (secciones) no se hayan guardado entonces no aparecen...pfff muuchas cosas pueden ser.

      Así a bote pronto no tengo ni flores ajajaja tendría que mirar el código y escudriñar. Cabe decir que Blogger solo deja tener 20 paginas (secciones) como máximo, aunque como siempre eso tiene truqui y se pueden hacer mas.
      Así que ni idea tendría que verlo :P

      Eliminar
    2. Vale, no te preocupes...ya te digo que son en esos dos blogs, en el que me interesaría sí lo necesitara (Andairadas), sí que podría ponerlo...era curiosidad....
      Fíjate tú que en uno de ellos, el que te digo que tengo links, le quité la opción de comentarios (porque no tenía sentido que lo tuviera) y chica, un día quise ponerlos porque necesitaba probar una cosa...y no hubo narices a que aparecieran...lo hice por CONFIGURACIÓN-ENTRADA Y COMENTARIOS, lo miré desde ENTRADAS DEL BLOG-CONFIGURAR ENTRADAS....pues chica ni por esas....lo dejé estar, porque total....yo a mi misma no me comento ☻(que podría darse el caso jajajaja)...así que acabé creándome el de pruebas para eso....solo pruebas y descuajaringues.....

      Bueno reina.....que ná....que no pasa nada
      Besos y gracias por responder

      Eliminar
    3. Lo de los comentarios hecho así es un cagarro, porque luego para activarlo tienes que rehacer la página. O sea borrarla y hacerla de nuevo con la opción puesta. Todo lo que es así de predeterminado de blogger falla más que una escopeta de feria.
      Ná aquí estamos pa lo que sea Muah! :k

      Eliminar
  7. Que bien explicadito todo!!! Eres lo más...voy a ver si consigo hacer algo...
    Besitos

    ResponderEliminar
  8. No consigo ponerlo con ninguna de las formas!!!!! La he liado un poco con html al hacer el menu, pero finalmente lo he conseguido poner bien, quizás es que he borrado o he cambiado algo de html, pero es que he probado con millones de cosas y no consigo centrarlo! Gracias!

    ResponderEliminar
    Respuestas
    1. Ahora mismo acabo de terminar con una plantilla de un lector, si quieres dame permisos de administrador en tu blog y te lo arreglo.

      Tranquil@ no te lo destrozare ajajaj me paso mi tiempo libre arreglando blogs de otra gente

      Eliminar
    2. Me fío totalmente ajajja Pero me tendrás que decir como te añado como administrador! Y no te asustes porque no tengo ni idea de html y puede haber barbaridades! ajajaja Muchas gracias!!

      Eliminar
    3. Vas al panel de administración de tu blog. Abajo de todo dice Configuración, dentro de Lo Básico hay una sección que dice PERMISOS.
      Ahí le das a añadir autores y pones mi mail lirethnotebook@gmail.com.
      Así me mandarás la invitación, cuando yo la acepte (en 2 segundos) tienes que actualizar esa página (aprietas el F5) y apareceré ahí como autora, picas donde dice autor al lado mismo de donde yo aparezca y podrás seleccionar ADMINISTRADOR.

      Esto último es muy importante porque sin los permisos de ADMINISTRADOR no podre tocar nada.
      :)

      Eliminar
    4. Vale acabo de enviar el email!

      Eliminar
    5. Creo que ya está, como lo ves?

      Eliminar
    6. Vale, mil gracias, pero ahora se sale por el lado derecho, si te fijas se ve blanco..! Si me dices como se hace para no molestarte más, lo intento yo!

      Eliminar
    7. No se a que te refieres ajajaj pero si quieres decir que lo que se despliega, el submenú en rojo, esta todo lo centrado que se puede. Ese submenú depende de otro código y no he visto manera de centrarlo más >.<!!

      En cuanto al menú general : Home About Outfits etc.. lo veo perfectamente centrado :)

      Eliminar
    8. Si, está centrado perfectamente, pero si te fijas al bajar hacia abajo en el blog se nota una raya blanca a la altura del menu, es como si el cuadrado "imaginario" (porque donde esta lo de outfits, categorias... lo he puesto en color blanco y sin los bordes) se hubiera salido hacia la derecha, es que con el fondo blanco del blog no se nota, pero cuando le das para bajar se ve más!! No se si me he explicado, perdona eh! No quiero molestarte, además mis explicaciones como no entiendo de esto son malísimas! Pero dale para abajo en el blog y fíjate en el lado derecho a la altura del menú y me entenderás! Mil gracias!

      Eliminar
  9. Muchísimas gracias Lireth!!! Ya lo he hecho!!! esto aún no lo tenía y me apetecía un montón insertarlo.
    Gracias otra vez y un beso, guapiña!!!

    ResponderEliminar
  10. Lireth, no quería molestarte, pero llevo desde el otro día intentando quitar el color gris que tengo en cada ventanita del menú y no doy hecho, estoy probando y buscando información y no lo veo, cuando puedas podrías echarme una mano???
    Muchas gracias por todo, Lireth.

    ResponderEliminar
    Respuestas
    1. Mándame un mail con el link de tu blog y explícame un poco cómo quieres tener el menú y cual es el problemilla exacto y lo solucionamos en cuanto tenga un ratín.
      :k

      Eliminar
    2. Ahora está perfecto!!! muchísimas gracias por tu rapidez, tu tiempo y por tu ayuda desinteresada.
      Un besazo de corazón.

      Eliminar
  11. Tengo una entrada especial en mi blog, para tí, espero te guste. Gracias una vez más.
    Un besiño

    ResponderEliminar
    Respuestas
    1. GRACIAS!!!!! contestada, emocionada y ahora corro a ponerlo en Face.
      :k ois....

      Eliminar
  12. OMG, lo logre; bueno al menos logre crear el menú y la pagina así como tu tienes Tutoriales; lo hice en mi blog de prueba y me funciono super bien ahora me falta la parte del centrado y hacer todos los cambios en mi blog. Mil gracias por este maravilloso tutorial. DTB

    ResponderEliminar