CSSplay (Menu numero 4)

A petición de Pizca paso a explicaros como colocar el menú "Professional #4" de CSSplay.


[1] Colocamos el CSS necesario antes de la etiqueta ]]></b:skin> de nuestra plantilla:

/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_four */
.preload4 {background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(http://img132.imageshack.us/img132/53/profour0tc2.gif);}
.menu4 li {float:left;}
.menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}
.menu4 li a b {float:left; display:block; padding:0 28px 0 14px; color:#aaa;}
.menu4 li.current a {color:#fff; background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif);}
.menu4 li.current a b {background:url(http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}
.menu4 li a:hover {color:#fff; background: url(http://img361.imageshack.us/img361/9697/profour1bu6.gif);}
.menu4 li a:hover b {background:url(http://img361.imageshack.us/img361/9697/profour1bu6.gif) no-repeat right top; color:#fff;}
.menu4 li.current a:hover {color:#fff; background: url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif); cursor:default;}
.menu4 li.current a:hover b {background:url(
http://img132.imageshack.us/img132/7898/profour2rq7.gif) no-repeat right top; color:#fff;}

El código ya está armado con las imágenes necesarias incluidas, las he subido a ImageShak.

[2] El siguiente paso será colocar el código del menú en un nuevo elemento HTML y arrastrar el elemento a debajo del header, una vez añadidos nuestros enlaces:

<ul class="menu4">
<li><a href="URL_DEL_BLOG"><b>Inicio</b></a></li>
<li><a href="URL_PAG_DEL_PERFIL"><b>Sobre mi</b></a></li>
<li><a href="URL_DEL_FEED"><b>Suscribe</b></a></li>
<li><a href="http://blogger.com"><b>Blogger</b></a></li>
<li class="current"><a href="mailto:AQUI_DIRECCION_DE_CORREO"><b>Contacto</b></a></li>
<li><a href="URL_DEL_BLOG"><b>Mi otro blog</b></a></li>
</ul>

He armado los enlaces de ejemplo lo más claramente que he podido, no será demasiado difícil entender como sustituirlos por los vuestros

Nota:
A menudo al intentar arrastrar el elemento debajo de la cabecera, vemos que ahí no hay espacio para más elementos. Para solucionarlo tenemos que localizar esta línea en nuestra plantilla sin expandir artilugios:

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

Y modificar algunos valores para que se vea como esta:

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

¡Suerte Pizca!