Cómo hacer un Menú de pestañas para Blogger u otras web

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

MANOS A LA OBRA.

1. El código CSS para definir el estilo es el siguiente:

/* === Menu de pestañas  ===  */

/* Fuente */
#TabMenu1
{
   text-align: left;
   float: left;
   margin: 0;
   width: 100%;
   font-family: Arial;
   font-weight: normal;
   font-size: 18px;
   list-style-type: none;
   padding: 15px 0px 4px 10px;
   overflow: hidden;
}

#TabMenu1 li
{
   float: left;
}

#TabMenu1 li a.active, #TabMenu1 li a:hover.active
{
   position: relative;
   font-weight: normal;
   text-decoration: none;
   z-index: 2;
}

/* Márgenes, padding, borde, posición de pestañas  */
#TabMenu1 li a
{
   padding: 5px 14px 8px 14px;
   margin-right: 3px;
   text-decoration: none;
   border-bottom: none;
   position: relative;
   top: 0;
   -webkit-transition: 200ms all linear;
   -moz-transition: 200ms all linear;
   transition: 200ms all linear;
}

/* Animación... Al pasar el mouse sobre pestaña   */
#TabMenu1 li a:hover
{
   font-weight: normal;
   text-decoration: none;
   top: -4px;
}

/* Línea de base (horizontal inferior) */
#TabMenu1
{
   border-bottom: 3px solid #0000ff;
}

/* Pestaña activa */
#TabMenu1 li a.active, #TabMenu1 li a:hover.active
{
   background-color: #FFFFFF;
   color: #666666;
}

/* Sin pasar mouse (vista normal) */
#TabMenu1 li a
{
   border: 1px solid #C0C0C0;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   background-color: #DEB887;
   color:#000000;
}

/* Al pasar el mouse sobre pestaña */
#TabMenu1 li a:hover
{
   background: #ccccff;
   color: #0000ff;
}

1.1 (Si deseas edita el CSS)

Una vez que hayas insertado el código CSS, lo puedes editar a tu gusto, de acuerdo a los colores y fuentes de tu sitio.   Después, podrás utilizarlo cada vez que desees implementar un menú, bastando con solo llamarlo por su  Id.

2. Ahora debes insertar el siguiente código en el lugar donde deseas que aparezca el menú:

<div style="height: 90px; overflow: hidden; position: absolute; width: 100%; z-index: 0;">
<ul id="TabMenu1">
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 1</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 2</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 3</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 4</a></li>
<li><a href="#" target="_blank" title="Texto al pasar el mouse">Item 5</a></li>
</ul>
</div>

En este punto ya podrías pre-visualizar como quedará el menú en su estilo predefinido o según hayas editado el CSS.

Ahora, solo bastará que configures los vínculos (#), los títulos al pasar el mouse sobre las pestañas, los items y si deseas puedes eliminar  target=”_blank”  para que no se abra el enlace en una pestaña nueva.

<li><a href=”#” title=”Texto al pasar el mouse” target=”_blank”>Item 1</a></li>

Pero,… ¿Qué sucede si deseas el menú dentro de una entrada?  

1. Lógicamente, el código del menú primero lo  insertas en modo Vista HTML, pero…
2. Al editar en modo “Vista de Redacción”, verás que solo aparece como un listado con viñetas. 
3. Sin embargo, eso no quiere decir que al presentarlo (vista previa o publicarlo) no puedas verlo con su forma real de pestañas.

Lo mejor de este código es que no necesitas usar librerías guardadas en sitios externos. Así, todo lo puedes tener dentro del sitio y lógicamente puedes crear los menues que requieras basándote en el estilo (CSS) que previamente definas.