BARRA SUPERIOR
Es algo que muchos blogueros (entre los que me incluyo) tienen este tipo de menú. ¿Por que? Bueno en primer lugar tiene muchas ventajas, como por ejemplo, que aporta una visión mas profesional al blog, le da un toque diferente, y ademas despeja mucho el área de los posts.
Hoy vamos a aprender a hacer nuestra propia barra superior.
Lo primero que vamos a hacer hoy es meternos con el HTML, si, se que todos lo odias, pero no sera mucho.
Lo primero que vamos a hacer es dirigirnos a la Plantilla--> Editar HTML.
Yo recomiendo guardar antes una copia de seguridad de la plantilla por si acaso, ya que es muy común chafarla con los códigos.
Bueno una vez que estamos en nuestro magnifico código HTML abrimos el buscador, pinchando dentro de la cajita donde aparece el código y pulsando al mismo tiempo CTRL+F.
Dentro del buscador vamos a escribir <body y pulsamos enter, de esta manera nos saldría algo así:
Buen, pues justo debajo de la linea <body expr:class='"loading" + data:blog.mobileClass'> pegamos este codiguito:
<div id='barra-superior'>
<div id='menu'>
<ul>
<li><a href='URL 1'>Nombre 1</a></li>
<li><a href='URL 2'>Nombre 2</a></li>
<li><a href='URL 3'>Nombre 3</a></li>
<li><a href='URL 4'>Nombre 4</a></li>
</ul>
</div>
</div>
*Nota: Si necesitáis más secciones en vuestro menú superior solo tenéis que ir añadiendo esta linea antes del </ul> : <li><a href='URL'>Nombre </a></li>
Ahora os explico como personalizar el código:
- Lo morado es donde tenéis que escribir el link a la sección que queráis enlazar. (Puede ser una etiqueta, o una pagina estática, o incluso una pagina de fuera del blog.)
- Lo azul es donde tenéis que escribir el nombre de dicha sección/pagina.
Como siempre nos vamos a Plantilla-->Personalizar-->Avanzado-->Añadir CSS.
Y usamos este código de aquí:
#barra-superior {background: #eee; /*Color de la barra*/width:100%; height:45px; /*Alto de la barra*/margin:0;border-bottom: 2px solid #333; /*Borde del menú, como el que tengo yo, si no lo quieres, borrar esta linea*/}#menu{margin:0 auto;width:920px; /*Ancho del menú dentro de la barra, con este valor sobra*/height:30px;}#menu ul{float:right; /*Donde queréis que quede alineado el menú, right (a la derecha), center (en medio) left( a la izquierda)*/background:none;margin:0px;padding:0;list-style-type:none;height:25px;}#menu ul li{display:block; float:left; height:30px;}#menu ul li a{ display:block; float:center; color:#333; /* Color del texto */font: 11px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/text-decoration:none;padding:15px 20px 5px 20px;}#menu ul li a:hover{ background:#eee; /* Color del fondo al pasar el ratón por encima de cada pestaña, yo no quiero que sea diferente, por eso lo tengo del mismo color que la barra*/color:#AC8BAF; /* Color del texto al pasar el ratón por encima*/height:20px;}
Y listo, ya sabéis, podéis personalizarlo a vuestro entero gusto, y jugar con los margenes, y el "padding" para que se quede centrado, alineado y puesto a vuestro gusto, como siempre los colores que usamos son colores HTML, y para que los podáis elegir adecuadamente os dejo un link a una pagina para elegir los colores, y automáticamente os da el código que debéis pegar.Colores HTMLY bueno, otra cosa más, algunos colores muy útiles y que todos debéis aprender son estos, ya que son muy sufridos y os ayudaran en mas de una ocasión:
#eeeeee;--> Gris clarito#333333;-->Gris oscuro#ffffff;-->Blanco#000000;-->Negro
Y bueno, eso ha sido todo por hoy, espero que os halla gustado mucho el tutorial. Un beso a todos.
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure