Con este sencillo truco podremos poner las secciones del blog en una barra que se mantendrá en la parte superior (en la navbar de Blogger) aún cuando bajemos el scroll. Se trata de una barra normal y corriente, sin buscador ni iconos sociales, sólo con las secciones.
1º - Buscamos esta línea <body expr:class='"loading" + data:blog.mobileClass'> y justo debajo pegamos este 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>
Reemplazamos URL por la dirección de las páginas, y Nombre 1, 2... por los nombres de las secciones. Si queremos añadir más secciones copiaremos la línea <li><a href='URL X'>Nombre X</a></li> justo debajo de la última. Nos aseguraremos que el código completo acaba con estas tres líneas:
</ul>
</div>
</div>
Una vez hecho esto, guardamos plantilla.
2º - Debemos copiar el siguiente código CSS en Plantilla → Personalizar → Avanzado → Añadir CSS y editar a gusto personal los parámetros que se quieran:
#barra-superior {
background: #B54B01; /*Color de la barra*/
width:100%;
height:40px; /*Anchura de la barra*/
border-bottom: 5px solid #f0a28a; /*Línea de debajo del menú, si no queréis borrad esta línea*/
margin:2;
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;
}
|
|
¡Y listo! El resultado sería este (clic en la imagen para agrandarla). Si bajamos en el blog, la barra seguirá viéndose arriba de la página:
