Tabs Wordpress

Las que tengo, p.e., en este blog, dentro de la cabecera ("Epílogo", "Plantillas", "Contacto").

A mí me resultan muy cómodas para mostrar el Inicio y otros datos que quiero resaltar desde la página principal del blog.

En el caso de "Epílogo" las coloqué de esta forma:

1º.- CSS (dentro del "skin"):

#nav {list-style: none;margin: 0;position: absolute;left: 220px;top: 10px;border-top: 3px solid #810000;}#nav li {float: left;margin-left: 0;}#nav .current_page_item a{color: #ccc;}#nav .page_item a{color: #cc0000;text-decoration: none;background: transparent; padding: 160px 10px;font: bold 14px/100% Arial, Helvetica, sans-serif;border-left: 1px solid #900;display: block;text-transform: uppercase;}#nav .page_item a:hover {color: #fff;background:#900;}#content {padding: 10px 0 5px 13px;float: left;width: 70%;margin:5px 0 0 0;}acronym, abbr, span.caps {font-size: 0.9em;letter-spacing: .07em;}

2º.- HTML (lo he colocado dentro de la sección "header-wrapper"):

<div id='nav'>

<li class='page_item'><a href='http://cafe-junio.blogspot.com/' title='Inicio..'>Epílogo</a></li><li class='page_item'><a href='http://visited-junio.blogspot.com/' title='Epílogo-Plantillas'>Plantillas</a></li>

<li class='page_item'><a href='mailto:llara_5@msn.com' title='Correo'>Contacto</a></li>

</div>

... de manera que esta sección la he dejado así:

<div id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Epílogo (cabecera)' type='Header'>

<b:includable id='main'>

<b:if cond='data:useImage'>

<b:if cond='data:imagePlacement == "REPLACE"'>

<!--Show just the image, no text-->

<div id='header-inner'>

<a expr:href='data:blog.homepageUrl' style='display: block'>

<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>

</a>

</div>

<b:else/>

<!--Show image as background to text-->

<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'>

<div class='titlewrapper' style='background: transparent'>

<h1 class='title' style='background: transparent; border-width: 0px'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

</b:if>

</h1>

</div>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</div>

</b:if>

<b:else/>

<!--No header image -->

<div id='header-inner'>

<div class='titlewrapper'>

<h1 class='title'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<data:title/>

<b:else/>

<a expr:href='data:blog.homepageUrl'><data:title/></a>

</b:if>

</h1>

</div>

<div class='descriptionwrapper'>

<p class='description'><span><data:description/></span></p>

</div>

</div>

</b:if>

</b:includable>

</b:widget>

</b:section>

<div id='nav'><li class='page_item'><a href='http://cafe-junio.blogspot.com/' title='Inicio..'>Epílogo</a></li><li class='page_item'><a href='http://visited-junio.blogspot.com/' title='Epílogo-Plantillas'>Plantillas</a></li>

<li class='page_item'><a href='mailto:llara_5@msn.com' title='Correo'>Contacto</a></li>

</div>

</div>

Cambiad mis URL y demás datos por los vuestros.
Podéis añadir una cuarta tab (o más) con sólo añadir un nuevo <li class='page_item'><a href='URL' title=' '>" "</a></li>


Estas tabs de color rojo quedan muy guapas en blogs con fondo negro. En otro momento comento acerca de las tabs de color negro, como las que tengo en mi blog principal "Main".