Menú CSS en Blogger

En esta nueva entrada de El Blog de la Informática 10 os explicaré cómo crear un menú CSS en Blogger con los enlaces o categorías del blog que queráis.

En primer lugar y dado que vamos a realizar cambios en la plantilla, lo más normal será hacer una copia de seguridad de la misma por si surge algún problema podamos restaurarla al estado actual.

Una vez realizada la copia de seguridad de la plantilla, accedemos a la opción para modificarla. Esta opción la podemos encontrar haciendo clic en Plantilla –> Editar HTML.

En la plantilla del blog buscaremos el código ]]></b:skin> y antes de él pegaremos lo siguiente:

/* Menu principal  - El Blog de la informática 10
----------------------------------------------- */
.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}
.menu ul{float:left;padding:3px;}
.menu li{display:inline;font-weight:bold;float:left;}
.menu li ul{display:none;}
.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}
.menu li a:hover{background:#446666;color:#fff;text-decoration:none;}

En el código anterior podemos modificar algunos detalles sencillos del menú para que lo podáis adaptar cada uno a vuestro blog:

Anchura del menú

.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}

Color de fondo del menú

.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}

Tipo de borde, por este orden, ancho – tipo – color

.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}

Radio de las esquinas exteriores del menú

.menu{width:1014px;background:#99BB55;border:4px solid #446666;overflow:hidden;border-radius:10px;}

Color del texto del menú

.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}

Radio de las esquinas del cuadro que aparecerá al pasar por encima el puntero de ratón

.menu li a{color:#fff;padding:5px 10px 5px 10px;display:block;margin-right:4px;float:left;border-radius:5px;text-decoration:none;}

Color del cuadro que aparecerá al pasar por encima el puntero de ratón

.menu li a:hover{background:#446666;color:#fff;text-decoration:none;}

Una vez hayamos dejado el código CSS a nuestro gusto, tendremos que añadir un gadget de tipo HTML/Javascript en la categoría Diseño de la administración de nuestro blog.

Como código de ese gadget pegaremos lo siguiente:

<div class='menu'>
<ul>
<li><a href='http://elblogdelainformatica10.blogspot.com'>Inicio</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/utilidades%20blogs'>Utilidades Blogs</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/redes%20sociales'>Redes Sociales</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/photoshop'>Photoshop</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/facebook'>Facebook</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/twitter'>Twitter</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/dise%C3%B1o%20gr%C3%A1fico'>Diseño Gráfico</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/dise%C3%B1o%20web'>Diseño Web</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/cinema%204D'>Cinema 4D</a></li>
<li><a href='http://elblogdelainformatica10.blogspot.com.es/search/label/p%C3%A1ginas%20web%20interesantes'>Webs interesantes</a></li>
</ul>
</div>

En el código anterior tendréis que modificar tanto el enlace como el texto a mostrar dado que es el menú de este blog.

Hecho esto sólo necesitaréis guardar los cambios y comprobar el correcto funcionamiento de este menú CSS en Blogger.

José M. García
@josem2112
El Blog de la Informática 10