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):
BARRA SUPERIOR CON MENÚ E ICONOS SOCIALES
El proceso es igual que el de antes, pero primero debemos instalar una fuente
<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:
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.
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]
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]
#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.
Bueno habéis visto que es muy fácil pero algo lioso cuando queremos poner los iconos
Vamos a esta página y lo primero de todo, nos descargamos el paquete de la fuente
de iconos sociales pinchando en download.
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!!)
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:
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
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
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:
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.
¿Quieres aprender a poner también el buscador en la barra? → Click aquí!
exactamente el mismo que en el primer caso.
¿Quieres aprender a poner también el buscador en la barra? → Click aquí!
Así que, ya tenemos nuestra barra con menú e iconos sociales :D:D
Bueno habéis visto que es muy fácil pero algo lioso cuando queremos poner los iconos
¿verdad?
¿Qué os ha parecido? ¿Fácil? ¿Díficil? ¿Os ha sido útil?
Si os ha gustado, ya sabéis que me hacéis un favor enorme compartiéndolo por
vuestras redes. Además así me motivo mucho más y pienso en más cosas chachis :D
Y anunciar que hoy termina la temporada normal en Miss Lavanda para dar paso a la veraniega,
de la que os hablaré más el próximo día :D
¿Qué os ha parecido? ¿Fácil? ¿Díficil? ¿Os ha sido útil?
Si os ha gustado, ya sabéis que me hacéis un favor enorme compartiéndolo por
vuestras redes. Además así me motivo mucho más y pienso en más cosas chachis :D
Y anunciar que hoy termina la temporada normal en Miss Lavanda para dar paso a la veraniega,
de la que os hablaré más el próximo día :D
No hay comentarios: