Bien antes de empezar, contaros que tenéis dos opciones a la hora de usar la barra:
• Menú normal y corriente
• Menú con iconos sociales incorporados
En ambos el proceso es bastante similar, sin embargo lo voy a dividir en dos, en el primero os explico cómo poner la barra normal, y en el segundo cómo poner también los iconos.
BARRA SUPERIOR CON MENÚ NORMAL
Primero, vamos a instalar el menú en la plantilla de blogger, para ello vamos a Plantilla → Editar HTML(recordad hacer una copia de seguridad!) y buscamos lo siguiente (para buscar en la plantilla pinchamos en cualquier lugar de la misma y pulsamos CTRL + F):
<body
Os saldrá como resultado esta línea:
<body expr:class='"loading" + data:blog.mobileClass'>
Justo debajo de ella pegamos el siguiente código:
<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>
<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>
Donde tenemos que reemplazar:
• Las URL que queremos poner
• El nombre que va a llevar cada pestaña del menú
Si tenéis más de cuatro secciones, vais añadiendo líneas debajo de <li><a href='URL 4'>Nombre 4</a></li>, que van a ser exactamente igual:
<li><a href='URL X'>Nombre X</a></li>
Vamos que tened cuidado de que siempre se queden estas tres líneas las últimas:
</ul>
</div>
</div>
</div>
</div>
→ Una vez está hecho esto, guardamos la plantilla y vamos a pasar a darle forma mediante CSS. Si veis el blog, queda todo descuadrado, pero no os preocupéis, porque ahora lo solucinamos.
Lo dicho, vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código. Oshe marcado con color todo lo que debéis cambiar y al lado está el comentario de lo que es cada cosa.
[ACTUALIZO: debido a todas las peticiones que me habéis hecho para que se queda fija, he añadido el código las líneas correspondientes para que esto ocurra, si preferís que no se quede fija, las borráis y listo :D]
[ACTUALIZO: debido a todas las peticiones que me habéis hecho para que se queda fija, he añadido el código las líneas correspondientes para que esto ocurra, si preferís que no se quede fija, las borráis y listo :D]
#barra-superior {
background: #000000; /*Color de la barra*/
width:100%;
height:40px; /*Alto de la barra*/
margin:0;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
background: #000000; /*Color de la barra*/
width:100%;
height:40px; /*Alto de la barra*/
margin:0;
position:fixed; /*Para que la barra se quede fija*/
z-index:101; /*Para que la barra se quede fija*/
}
#menu{
margin:0 auto;
width:920px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}
#menu ul li{
display:block;
float:left;
height:30px;
margin:0 auto;
width:920px; /*Ancho del menú dentro de la barra, con este valor sobra*/
height:30px;
}
#menu ul{
float:left; /*Donde queréis que quede alineado el menú, right (a la derecha)*/
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:#ffffff; /* Color del texto */
#menu ul li a{
display:block;
float:left;
color:#ffffff; /* Color del texto */
font: 12px 'Arial'; /* Tamaño del texto y tipografía que queráis usar*/
text-decoration:none;padding:12px 20px 0 20px;
}
#menu ul li a:hover{
background:#000000; /* 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:#ffd0c2; /* Color del texto al pasar el ratón por encima*/
height:20px;
}
Guardamos y ya tenemos nuestra barra menú lista :D
BARRA SUPERIOR CON MENÚ E ICONOS SOCIALES
El proceso es igual que el de antes, pero primero debemos instalar una fuente de iconos sociales. Esto es un poco engorroso, así que hacedlo con calma y leed bien todo.
Vamos a esta página y lo primero de todo, nos descargamos el paquete de la fuente de iconos sociales pinchando en download.
Abrimos el zip y vamos a descomprimir la carpeta que pone font, que es la que nos interesa.
A continuación, subimos los cuatro ficheros (el de .empty lo podemos borrar) a nuestro sitio. Para esto os recomiendo que uséis dropbox (lo debéis subir a la carpeta public!!)
Ahora vamos a definir esta fuente en nuestra plantilla para que la reconozca, para ello vamos a Plantilla → Personalizar → Avanzado → Añadir CSS y pegamos el siguiente código:
@font-face {
font-family: 'socicon';
src: url('URL acabada en.eot');
src: url('URL acabada en.eot?#iefix') format('embedded-opentype'),
url('URL acabada en.woff') format('woff'),
url('URL acabada en.ttf') format('truetype'),
url('URL acabada en.svg#sociconregular') format('svg');
font-weight: normal;
font-style: normal;
}
Y aquí debéis reemplazar las URL por las que obtenéis de dropbox (pincháis en el archivo con el botón derecho → copiar enlace público). Veréis que estos enlaces acaban con la extensión de cada archivo anterior: .eot, .woff, .ttf y .svg
[Actualizo: si no conseguís de ninguna manera poner bien los enlaces, a continuación os facilito los míos, no los voy a eliminar jamás de los jamases así que no preocuparse :D]
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.eot
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.woff
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.ttf
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.svg
[Actualizo: si no conseguís de ninguna manera poner bien los enlaces, a continuación os facilito los míos, no los voy a eliminar jamás de los jamases así que no preocuparse :D]
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.eot
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.woff
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.ttf
• https://dl.dropboxusercontent.com/u/49376985/socicon-webfont.svg
Y a continuación pegamos este otro código también en añadir CSS:
.socicon {
font-family: 'socicon' !important;
}
.socicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'socicon';
font-style: normal;
font-size: 15px; /* Tamaño que van a tener los iconos, cambiadlo una vez hayáis instalado la barra*/
line-height: 1;
-webkit-font-smoothing: antialiased;
}
Y ya por último, vamos a instalar la barra. El proceso es igual que antes, pero el código HTML de la plantilla cambia un poco:
<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 RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li>
<li><a href='URL RED SOCIAL 2'><span class='socicon'>Nombre red social 2</span></a></li>
<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 RED SOCIAL 1'><span class='socicon'>Nombre red social 1</span></a></li>
<li><a href='URL RED SOCIAL 2'><span class='socicon'>Nombre red social 2</span></a></li>
<li><a href='URL RED SOCIAL 3'><span class='socicon'>Nombre red social 3</span></a></li>
</ul>
</div>
</div>
</div>
</div>
También podéis añadir tantas líneas cómo queráis. El código CSS que debéis poner es exactamente el mismo que en el primer caso.
No hay comentarios: