PONER UNA BARRA ARRIBA DEL TODO EN EL BLOG
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 solucionamos.
Lo dicho, vamos a Plantilla → Personalizar → Avanzado → Añadir CSS
y pegamos el siguiente código. Os he 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ú, puede ser center (centrado) 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ú, puede ser center (centrado) 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;
}
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
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:
Publicar un comentario