#1 Primero vamos a poner el código HTML.
Para ello nos vamos a Plantilla ➡ Editar HTML. Dentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: <body
Nos aparecerá esto:
<body expr:class='"loading" + data:blog.mobileClass'>
Justo debajo de ésta línea de código pegamos:
<!--Empieza el menú superior -->
<div id="menu-superior">
<div id="menu">
<ul>
<li><a title="TÍTULO 1" href="URL 1">TÍTULO 1</a></li>
<li><a title="TÍTULO 2" href="URL 2">TÍTULO 2</a></li>
<li><a title="TÍTULO 3" href="URL 3">TÍTULO 3</a></li>
   
<a href="URL DE RED SOCIAL 1" target="_blank"> <img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 1" width='30'/></a>  
<a href="URL DE RED SOCIAL 2" target="_blank"><img height='30' src="URL DE IMÁGEN DE RED SOCIAL 2" width='30'/></a>  
<a href="URL DE RED SOCIAL 2" target="_blank"><img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 3" width='30'/></a></ul></div></div>
<!-- Acaba el menú superior -->
<div id="menu-superior">
<div id="menu">
<ul>
<li><a title="TÍTULO 1" href="URL 1">TÍTULO 1</a></li>
<li><a title="TÍTULO 2" href="URL 2">TÍTULO 2</a></li>
<li><a title="TÍTULO 3" href="URL 3">TÍTULO 3</a></li>
   
<a href="URL DE RED SOCIAL 1" target="_blank"> <img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 1" width='30'/></a>  
<a href="URL DE RED SOCIAL 2" target="_blank"><img height='30' src="URL DE IMÁGEN DE RED SOCIAL 2" width='30'/></a>  
<a href="URL DE RED SOCIAL 2" target="_blank"><img border='0' height='30' src="URL DE IMÁGEN DE RED SOCIAL 3" width='30'/></a></ul></div></div>
<!-- Acaba el menú superior -->
Ahora tenéis que cambiar lo que está en color:
- En TÍTULO tenéis que poner el nombre de la página dónde queréis que se dirija al clicar, por ejemplo INICIO o SOBRE MI. Los títulos que tienen el mismo número tenéis que ponerle el mismo nombre.
- En URL tenéis que poner la URL de la página dónde queréis que se dirija al clicar.
- En URL DE RED SOCIAL poned la dirección de la red social que queráis poner, por ejemplo la dirección de vuestra página de Facebook.
- En URL DE IMÁGEN DE RED SOCIAL poned la URL de la imágen que os guste para el icono de la red social que corresponda. Si no tienes claro cómo conseguir la URL de las imágenes que quieres poner al menú, échale un ojo a este tutorial.
#2 Solo falta añadir el código CSS para dar formato a nuestro menú.
Queremos agradecer a Miss Lavanda que facilitara el código para implementar un menú en su post. Aquí lo hemos adaptado conforme al diseño de nuestro blog.
Nos iremos a Plantilla ➡ Editar HTML. Dentro del recuadro de código debes pulsar CTRL+F (en caso de que tengas Windows) o CMD + F (en caso de que tengas un Mac) para que se te abra el buscador. En él buscamos: </b:skin>
Justo antes de éste código pegamos lo siguiente:
#menu-superior {
background: #c7eff2; /*Color de la barra, nosotros la tenemos de color azul, pero puedes poner el color que quieras*/
width:100%;
height:40px; /*Alto de la barra*/
padding: 7px 0 0;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
letter-spacing:2px; /*Espacio entre las letras, para que se vean más separadas*/
}
#menu{
margin:0 auto;
width:920px;
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, 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:left;
color:#666666; /* Color del texto */
font: 12px "Arial"; /* Tamaño y tipografia del texto*/
text-decoration:none;
padding:10px 10px 0 10px;
}
#menu ul li a:hover{
background:#c7eff2; /* Color del fondo al pasar el ratón por encima de cada pestaña, nosotros lo hemos puesto del mismo color para que no cambie*/
color:#27a7b1; /* Color del texto al pasar el ratón por encima*/
height:20px;
background: #c7eff2; /*Color de la barra, nosotros la tenemos de color azul, pero puedes poner el color que quieras*/
width:100%;
height:40px; /*Alto de la barra*/
padding: 7px 0 0;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
letter-spacing:2px; /*Espacio entre las letras, para que se vean más separadas*/
}
#menu{
margin:0 auto;
width:920px;
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, 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:left;
color:#666666; /* Color del texto */
font: 12px "Arial"; /* Tamaño y tipografia del texto*/
text-decoration:none;
padding:10px 10px 0 10px;
}
#menu ul li a:hover{
background:#c7eff2; /* Color del fondo al pasar el ratón por encima de cada pestaña, nosotros lo hemos puesto del mismo color para que no cambie*/
color:#27a7b1; /* Color del texto al pasar el ratón por encima*/
height:20px;
Todo lo que está en color azul lo podéis cambiar por los valores que queráis. Podéis ir probando hasta que déis con el diseño que más os guste. Si queréis cambiar la tipografia del menú por una fuente deGoogle Fonts y no sabéis cómo hacerlo, mirad este tutorial dónde os lo explico paso a paso y de manera sencilla.
No hay comentarios: