Menú con bordes redondeados

Artículo publicado en el balcón de Jaime.

Menú horizontal para tu blog con bordes redondeados

Los menús o barras de navegación facilitan el acceso a los apartados de un blog o web y normalmente se instalan con facilidad. Ya he presentado varios modelos en El Balcón que pueden aplicarse al blog con rapidez, pero aún no he explicado la manera de crear tu propio menú, de utilizar los colores que más te gusten o imágenes de fondo atractivas.

Diseño>Edición de HTML>expandimos artilugios

Busca esta línea en tu plantilla:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ahora debes editarla de manera que obtengas esto:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Una vez lo hayas hecho, encuentra esta etiqueta:

<b:include data='blog' name='all-head-content'/>

Y añade este script justo debajo:

<!--[if IE]>
<script type="text/javascript" src="http://sites.google.com/site/scriptsbalcon/b/blbrdIE.js"></script>
<![endif]-->

Guarda la plantilla.

Dirígete al apartado de Diseño>Elementos de la página y añade el gadget Lista de enlaces:



Añade los enlaces que llevará el menú. No hace falta que los introduzcas todos pero si es posible házlo.

Intenta también que el título o texto de los enlaces no sea demasiado extenso: ten en cuenta que el menú tendrá el mismo ancho que la cabecera de tu blog por lo que si te extiendes demasiado se visualizará mal.

Guardar el gadget y arrástralo hasta el recuadro que hay debajo de la cabecera o título del blog, de manera que el menú aparezca encima o debajo de ésta.

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]></b:skin> y añade estos bloques de CSS encima:

#LinkList1 li {border-right:1px solid #BFC4C6; float:left; font-size: 13px; font-family:Arial,Helvetica,sans-serif; font-weight:bold; height:24px;letter-spacing:0; list-style:none outside none; padding-left:10px; padding-right:10px; padding-top:8px; text-align:center;}
#LinkList1 li:hover {background: #717C81;
color:#000000;}
#LinkList1 a{color: white;} #LinkList1 a:hover{
color: white; text-decoration: none;}
#LinkList1 {
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
-goog-ms-border-radius:7px;
border-radius: 7px; background:#95A0A7; height:32px; margin-bottom:12px;
}

Haciendo uso de la tabla de colores puede editar por completo el aspecto de tu menú:

#95A0A7 es el color de fondo del menú. Si deseas utilizar una imagen de fondo, deja un comentario y te explicaré lo que debes hacer.

#717C81 es el color de cada enlace al pasar el cursor o ratón por encima. Al principio de la entrada, en las imágenes puedes ver como el enlace El Balcón aparece con un fondo claro: el cursor está encima.

#BFC4C6 es el color del borde que separa los enlaces. Su grosor es personalizable (1px).

Guarda la plantilla una vez hayas acabado y dispondrás finalmente del menú.

Nota:

- El borde redondeado de los menús también puede visualizarse usando Internet Explorer, cosa que antes no era posible. Todo es gracias al nuevo script que ofrece Blogger en sus nuevas plantillas.

Tutorial por Jaime Trujillo Escobedo.