El indagador nubero (12) Menú horizontal para el blog

Sección original del blog que consiste en mostrar aspectos literarios de esta, La Soñadora, o aspectos interesantes en general. Todo un despliegue de investigación para llegar al fondo de los más curiosos asuntos, desde ¿por qué registrarse en Google para seguir un blog? a ¿Cómo empezó la que escribe a reseñar libros?



Muchos de vosotros me habíais preguntado por cuestiones de diseño como las que dejé en la entrada anterior para aprender a poner una blockquote curiosa. Esta vez rescato uno de los tutoriales que tenía en mi blog personal para presentároslo en esta sección. El tutorial está sacado del maravilloso site El escaparate de rosa, un templo del saber para el diseño de Blogger, vaya.

Se trata del tutorial para aprender a poner un menú horizontal en vuestro blog desde cero, muy fácil si seguís todos estos pasos:




1.Vais a www.blogger.com > Escritorio > Diseño > Editar HTML.
2. Una vez en vuestra plantilla, deberéis buscar en ella lo siguiente: está a simple vista y todas las plantillas lo tienen, así que paciencia :)
3. Una vez encontrado, pegaréis antes de el siguiente código:

#navcontainer ul

{

text-align: center;

padding-bottom: 5px;

padding-top: 5px;

padding-left: 0;

margin-top: 0;

/* cancels gap caused by top padding in Opera 7.54 */

margin-left: 0;

background-color: #C0C0C0;

color: white;

width: 100%;

font-family: Arial,Helvetica,sans-serif;

line-height: 18px;

/* fixes Firefox 0.9.3 */



}



#navcontainer ul li

{

display: inline;

padding-left: 0;

padding-right: 0;

padding-bottom: 5px;

/* matches link padding except for left and right */

padding-top: 5px;

background-color: #333399;

}



#navcontainer ul li a

{

padding-left: 10px;

padding-right: 10px;

padding-bottom: 5px;

padding-top: 5px;

color: white;

text-decoration: none;

border-right: 1px solid #fff;

}



#navcontainer ul li a:hover

{

background-color: #CC3300;

color: white;



}



#navcontainer #active { border-left: 1px solid #fff;

}

Este código es el que sirve para cambiar los colores de vuestro menú, los colores de la fuente, el tipo de fuente etc.

4. Una vez tengáis eso, seguid vagando por vuestra plantilla hasta encontrar: y justo a continuación pegáis este otro código:




Como véis está configurado según Rosa, la dueña del tutorial, lo puso. Deberéis cambiar los links que tiene ella a sus páginas, por los links a vuestras entradas o páginas y los títulos de ella (Cosas mías, botón de enlace...etc), por las palabras que vosotros queráis poner: Reseñas, Curiosidades, etc.

Cualquier otra pregunta que tengáis acerca del tutorial o si queréis sugerir los siguientes, ¡no dudéis en dejarlo en los comentarios!


Comparte en Google Plus

Sobre - Bella -

En la red me conocen como La Soñadora y administro Soñadores de Libros desde 2009. Trabajo en marketing digital en la editorial SM y estudio idiomas. Creé Las Reglas del Lector y soy una de las organizadoras y creadoras de la Blogger Lit Con. Me encantan las distopías, los buenos debates, el chocolate y hacer nuevos amigos lectores.

7 nubes :

  1. Hola! Muchas gracias por el tutorial, me lo guardo para cuando me haga falta ;) Un beso!

    ResponderEliminar
  2. Gracias por el tutorial, hacía mucho tiempo que no veía a alguien citando El escaparate de Rosa, me ha hecho ilusión por alguna razón. Grandes tutoriales los suyos.
    Espero que nos volvemos a leer pronto ~

    ResponderEliminar
  3. ¡Hola! hace tiempo que busco un tutorial así, gracias compartirlo ^^
    un beso.

    ResponderEliminar