Barra superior simple en Blogger

Barra superior simple en Blogger

En esta oportunidad y a petición de un usuario anónimo enseñaré a situar un menú en la parte superior del blog. Advierto que el menú es bastante simple, pero se puede personalizar a criterio del que lo requiera.


El menú es el siguiente:


Este menú se situará en la zona superior del blog.

Advierto que es muy similar al menú anterior que había puesto en el blog anteriormente, pero este está mejor estructurado para que no tengan problemas.

¿Cómo Añadirlo a Blogger?

Paso 1: Añadiendo la sección:

En ''Diseño | Edición HTML'' buscaremos la siguiente sección:
<body>
Debajo de esta pegaremos el siguiente código:
<div id='barratop'>
<div id='menu_navegador'>
<ul>
<li><a href='url 1' title='titulo al pasar el mouse'>Enlace 1</a></li>
<li><a href='url 2' title='titulo al pasar el mouse'>Enlace 2</a></li>
<li><a href='url 3' title='titulo al pasar el mouse'>Enlace 3</a></li>
<li><a href='url 4' title='titulo al pasar el mouse'>Enlace 4</a></li>
<li><a href='url 5' title='titulo al pasar el mouse'>Enlace 5</a></li>
<li><a href='url 6' title='titulo al pasar el mouse'>Enlace 6</a></li>
<li><a href='url 7' title='titulo al pasar el mouse'>Enlace 7</a></li>
</ul>
</div>
</div>

Paso 2: Los estilos:

Busca la siguiente sección:
]]></b:skin>
Arriba de esta pega el siguiente código:

#barratop {
background: #000; /* color del menú*/
width:100%; /* Menú al ancho de la página*/
height:42px; /*Alto del menú*/
margin:0;
}

#menu_navegador{
margin:0 auto;
width:920px;
height:30px;
}
#menu_navegador ul{
float:left;
background:none;
margin:0px;
padding:0;
list-style-type:none;
height:25px;
}

#menu_navegador ul li{
display:block;
float:left;
height:30px;}

#menu_navegador ul li a {
display:block; 
float:left; 
color:#fff;/* Color del enlace */
font-family:'Trebuchet MS', Trebuchet, Arial, Verdana;
font-size: 12px;
text-decoration:none;
padding:12px 20px 0 20px;
}

#menu_navegador ul li a:hover{ 
background:#c0c0c0; /* Color del fondo al pasar el mouse en un enlace*/
color:#fff; /* Color del enlace al pasar el mouse*/
height:30px;
}


Guarda los cambios y listo.
Artículo aleatorio
BuySellAds
BuySellAds
BuySellAds
BuySellAds
BuySellAds
Artículos destacados
Botones para subir y bajar en Blogger # - Botones para subir y bajar en Blogger
Marca de agua en las imágenes con CSS # - Marca de agua en las imágenes con CSS
Efecto de desenfoque con CSS # - Efecto de desenfoque con CSS
Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger # - Vídeotutorial: Crear plantilla para Blogger: Introducción a los códigos esenciales de Blogger
Insertar una página externa en una entrada en Blogger # - Insertar una página externa en una entrada en Blogger