Menú superior con imágenes en blogger

¡Menú animado en blogger, con imágenes y totalmente fácil de incrustar al blog! 
  Errores Corregidos!

.

Sobre el menú: es un menú muy sencillo y de gran utilidad le da una gran vista al blog, ya que posee imágenes y una interfaz animada, se carga rápido y es editable, ademas le hice algunas mejoras en el color, por ser de color negro combina con la mayoría de los blog. Fuente A, Fuente B
 

Paso 1: Iniciamos sesion en nuestro blog, hacemos clic en diseño y luego en edición de HTML, colocamos el siguiente código antes de ]]></b:skin>

}
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_15 */
.preload15
{background: url(http://img838.imageshack.us/img838/1863/imagen1pr.png);
}
.pro15 {
padding:0 0 0 20px;
margin:0;
list-style:none;
height:30px;
background:#1841c8 url(http://img178.imageshack.us/img178/4539/imagen2x.png);
}
.pro15 li {
float:left;
}
.pro15 li a {
display:block;
float:left;
height:30px;
line-height:30px; background:url(http://img178.imageshack.us/img178/4539/imagen2x.png); color:#fff;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
cursor:pointer;
font-size:11px;
}
.pro15 li a b {
float:left;
display:block; background:url(http://img178.imageshack.us/img178/4539/imagen2x.png) right top;
padding:0 16px 0 8px;
color:#fff;
}
.pro15 li.current a {
color:#fff;
background:url(http://img838.imageshack.us/img838/1863/imagen1pr.png);
}
.pro15 li.current a b {
background:url(http://img838.imageshack.us/img838/1863/imagen1pr.png) no-repeat right top;
color:#fff;
}
.pro15 li a:hover {
color:#fff;
background: url(http://img838.imageshack.us/img838/1863/imagen1pr.png);
}
.pro15 li a:hover b {background:url(http://img838.imageshack.us/img838/1863/imagen1pr.png) no-repeat right top; color:#fff;
}
.pro15 li.current a:hover {
color:#fff;
background: url(http://img838.imageshack.us/img838/1863/imagen1pr.png);
cursor:default;
}
.pro15 li.current a:hover b {
background:url(http://img838.imageshack.us/img838/1863/imagen1pr.png) no-repeat right top;
color:#fff;
}
.pro15 li a em {
display:block;
float:left;
width:16px; height:30px;
}
.pro15 li a em.home {
background:url(http://img177.imageshack.us/img177/2789/1inicio.gif) no-repeat center center;
}
.pro15 li a em.calendar {
background:url(http://img12.imageshack.us/img12/3230/2paginaactual.gif) no-repeat center center;
}
.pro15 li a em.camera {
background:url(http://img38.imageshack.us/img38/236/3alta.png) no-repeat center center;
}
.pro15 li a em.find {
background:url(http://img16.imageshack.us/img16/2530/4recientes.png) no-repeat center center;
}
.pro15 li a em.contact {
background:url(http://img199.imageshack.us/img199/8147/5recomendar.png) no-repeat center center;
}
.pro15 li a em.search {
background:url(http://img522.imageshack.us/img522/2582/6acercade.png) no-repeat center center; }


Paso 2: Luego justo debajo de </b:section> </div> colocamos el siguiente código Guardamos los cambios y listo!:

<ul class='pro15'>
<li><a href='http://josemanuel8924.blogspot.com/'><em class='home'/><b>Página Principal</b></a></li>
<li class='current'><a href='#'><em class='calendar'/><b>Página Actual</b></a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=Josemanuel8924'><em class='camera'/><b>Darme de alta</b></a></li>
<li><a href='http://josemanuel8924.blogspot.com/2009/08/post-recientes.html'><em class='find'/><b>Post Recientes</b></a></li>
<li><a href='http://recomienda.miarroba.com/refer.php?url=http://www.josemanuel8924.blogspot.com'><em class='contact'/><b>Recomendar Blog</b></a></li>
<li><a href='http://josemanuel8924.blogspot.com/2009/03/introduce-tu-correo-electronico-para.html'><em class='search'/><b>Acerca de</b></a></li>
</ul>

Editar lo resaltado en rojo de acuerdo a tus intereses
Se pueden cambiar las imágenes de las pestañas, para hacerlo debes editarlas en el Paso 1 (están en negritas). las imágenes deben ser 16*16 pixeles.

Descargar Pack de Imágenes 16*16 (+56): Clic aquí
Site: JoseManuel8924.BlogSpot.Com