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.

Menú CSS en Blogger - imagen principal del post

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.

Menú CSS en Blogger - opción Editar HTML de la plantilla

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.

Menú CSS en Blogger - gadget HTML/Javascript

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

5 comentarios:

Jaime Floes dijo...

hola y gracias por la información es muy buena probare el código.

José M García dijo...

gracias a ti Jaime, un saludo

Juan B dijo...

no explicas bien, no me salio ponerlo ._.

Juan B dijo...

retiro lo dicho, funciono pero apareció muy abajo xD que hago?

José M García dijo...

Hola Juan B

acabo de visitar tu blog y yo lo veo en el sitio correcto.

Publicar un comentario

Cualquier comentario que incluya en su contenido la dirección URL de una web o blog será reportado inmediatamente por spam y no será publicado.