PONER UNA BARRA ARRIBA DEL TODO EN EL BLOG

Hoy voy a enseñaros como puse la barrita de arriba del blog. Es una cosa muy facilita y no se tarda nada de nada. Eso sí, estad bien atentos de copiar todo el código correctamente y reemplazar bien.



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='&quot;loading&quot; + 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>

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>

→ 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]

#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*/ 
}
#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;
}
#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

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 barraEl 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>
<li><a href='URL RED SOCIAL 3'><span class='socicon'>Nombre red social 3</span></a></li>
</ul>
</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í!

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

Firma Post

No hay comentarios:

ir arriba