Ahora, les enseñare como crear uno, incluso les daré la barra de color rojo para que ustedes puedan usarla en cualquier diseño.
Este código funciona en cualquier plataforma que funcione con
HTML y
CSS sin embargo ahora les mostrare donde tienen que colocar este código en
Blogger, antes que nada.
Código Base: Este código es lo que necesitaran poner en cualquier parte del blog que ustedes deseen, ahora les enseñare como ponerlo en la parte de abajo del titulo de Blogger, si lo quieren usar en otra Plataforma como Wordpress simplemente tomen este código y el CSS que encontrarán más adelante.
<div id='menu'>
<ul>
<li id='current'><a href='http://TuBlogEnlace0'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace1'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace2'><span>Titulo</span></a></li>
<li><a href='http://TuBlogEnlace3'><span>Titulo</span></a></li>
</ul>
</div>
Simplemente Cambia el texto en Negritas por los Enlaces a tu Blog y los Titulos que quieres que tengan las pestañas.
Ahora, si estamos usando Blogger tendremos que ir a Plantilla > Edición HTML y seleccionar la casilla Expandir plantillas de artilugios , ahora buscaremos el siguiente Texto, y antes de eso pegaremos el Código Base.
<div id='content-wrapper'>
Si no lo encuentran, pueden hacerlo de otra forma, colocarlo en un gadget html/java, bajo la cabecera del blog.
Ahora, simplemente tenemos que seleccionar el Código CSS, si no usan Blogger simplemente tienen que implementarlo como cualquier otro elemento CSS, ahora si están usando Blogger tendrán que buscar:
]]></b:skin>
Ahora, simplemente tienen que poner este código antes del código dicho:
/*Rojo ////////////////////*/
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://i60.servimg.com/u/f60/13/20/23/83/redlhh11.gif) no-repeat left top;margin:0 1.5px 0 25px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(http://i60.servimg.com/u/f60/13/20/23/83/redrme12.gif) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#faf4d0; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
#menu #current a {background-position:0% -27px;}
#menu #current a span {background-position:100% -27px;color:#fff}
.clear {clear:left}
/* Fin de Barra */
