Ciudad Blogger

Inicio » Archivos de junio 2009

Cómo cambiar el cursor de tu blog

Poner íconos en etiquetas y otros gadgets

Faviconeras con espacios disponibles

A principios de año la fiebre de La Faviconera nos llegó y fueron muchos quienes se unieron a este movimiento.
Ya han pasado varios meses y he visto muchas faviconeras vacías. Incluso Oloblogger se cuestionaba el por qué esa iniciativa no tuvo tanto éxito como se esperaba.
Ya todos conocen los beneficios de la faviconera, promoción, tráfico, visitas, bla, bla, bla. ¿Pero entonces por qué la mayoría no ha llenado su faviconera?

Empecé a buscar en Google la palabra 'faviconera' para recolectar sitios que tuvieran implementada esta campaña y ¡voilà! Nico aparecía en casi todas las páginas de resultados, incluso yo que no tengo faviconera aparezco en varios resultados ¿hay algún truco de magia?
No, lo que hábilmente sucedió fue que Nico no sólo abrió su faviconera, sino que se dedicó a buscar sitios que igual la tuvieran para solicitar su espacio, es decir se dedicó a promoverse. Y lo que yo hice fue más simple, sólo quité el No Follow y algunos comentarios con la palabra 'faviconera' o 'favicon' hicieron que me posicionara en algunos resultados de la búsqueda (esto también lo hizo él).

El error de muchos fue abrir su faviconera y sentarse a esperar a que se llene sola...bueno, ahora ya sabemos que esto no funciona así.
Así que si tienes una faviconera no desperdicies ese buen espacio, promociónala, comenta en otros blogs, invita, y sobre todo facilítales la forma de pertenecer a ella, no les pongas muchas trabas haciéndolos escribir tantos posts y enlaces, mucho menos si tu blog tiene un Page Rank bajo. Se trata pues de ayudarnos entre todos a promover nuestros blogs de una forma simple y estéticamente agradable.

En esta entrada estaré publicando los blogs que tengan espacios disponibles en su faviconera, los que se vayan llenando los quitaré (para darle lugar a los disponibles) a menos claro que vayan abriendo más lugares en su faviconera. Así que si tú tienes una faviconera deja un mensaje para agregarla a este directorio, o sí conoces a alguien que aun tenga espacios háznoslo saber.

Y aprovechando, si alguien desea agregarme a su faviconera estos son los datos:
URL del favicon: http://dl.dropbox.com/u/647003/favicon.GIF
URL del enlace: http://ciudadblogger.com
Título: Ciudad Blogger | Trucos y tutoriales para tu blog

NOTA: Las webs que cobran por incluir faviconos en sus sitios no han sido publicadas. Periódicamente se revisan los enlaces para verificar que los sitios sigan en funcionamiento o que continúen con la faviconera, los que no cumplen lo anterior son eliminados de la entrada.

Reloj de cuenta regresiva

Poner marcadores sociales en Blogger

108 iconos bookmark estilo dibujo

Crear un rotador de banners al azar

Contador de visitas para entradas

Cómo crear vinculos dentro de la misma entrada

Efecto de arcoiris en links al pasar el mouse

Con un script vamos a dar un efecto de arcoiris al pasar el mouse sobre los links.
Este efecto se aplica para todos los links que tengas en el blog.

Sólo entra a Plantilla | Edición de HTML y pega antes de </head> esto:

<script>
//<![CDATA[
/************************************************************************/
/* Rainbow Links Version 1.03 (2003.9.20) */
/* Script updated by Dynamicdrive.com for IE6 */
/* Copyright (C) 1999-2001 TAKANASHI Mizuki */
/* takanasi@hamal.freemail.ne.jp */
/************************************************************************/

var rate = 20; // Increase amount(The degree of the transmutation)
if (document.getElementById)
window.onerror=new Function("return true")

var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj){
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow(){
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor(){
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor(){
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e){
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e){
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}}
function ChangeColor(){
objActive.style.color = makeColor();
}
function makeColor(){
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}

elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}
//]]>
</script>

Así de fácil tendrás un efecto animado en tus links del blog. Puedes ver el resultado pasando el cursor por cualquier enlace o título en este blog de pruebas.

Ocultar o eliminar el título y la descripción del blog

Contador de descargas de archivos

Respuestas a preguntas curiosas

Filtrar IP en Google Analytics

Los resultados de visitas diarias de los contadores web siempre tienen un margen de error. En la mayoría ese margen es muy alto, tanto, que las estadísticas que muestran no se acercan ni un poco a las visitas reales que tenemos. Google Analytics tiene un margen de error muy corto, lo cual lo hace más fiable, de tal modo que tenemos una idea más clara sobre el número de personas que nos visitan.

Sin embargo, si tú visitas tu propia página, ya sea para ver si todo funciona bien, para revisar comentarios, para contestarlos, para ver si hay alguien en línea, o simplemente porque quieres entrar, entonces tu visita también la está resgistrando el contador. Lo que implica que el margen de error se vuelva más grande, pues esas visitas tuyas no son visitas reales, es decir, no nos importa saber cuántas visitas nuestras hacemos, sino cuánta gente de otras partes entra a nuestro sitio.
Mucha gente presume de tener miles de páginas vistas diariamente y son capaces de mostrarnos las estadísticas de Google Analytics con tal de que les creamos, pero ¿cuántas de esas visitas son de ellos mismos? Yo estoy seguro que un gran un de esas visitas número de esas páginas vistas las hicieron ellos, lo cual baja drásticamente los números.

Por ello lo que podemos hacer es filtrar nuestra IP para que nuestra visita no se cuente en las estadícticas y de este modo tengamos resultados más "limpios" sobre el número de visitas totales y páginas vistas.

Lo primero es saber cuál es tu IP, si no la conoces puedes usar algún servicio en línea que te muestre tu IP. Hay muchos de estos sitios, uno de ellos es CuálEsMiIP.net, sólo entra al sitio y automáticamente verás tu IP.
Ahora entra a Google Analytics y haz click en Editar situando en el extremo derecho del nombre de tu sitio.
Casi hasta abajo hay una tabla llamada Filtros aplicados al perfil, ahí haz click en Añadir filtro.
Asigna un nombre al filtro y selecciona Excluir todo el tráfico procedente de una dirección IP específica.
Escribe tu IP usando puntos y diagolanes invertidas, por ejemplo:

190\.212\.31\.39
Guarda los cambios y listo.

Puedes agregar tantas IP como quieras, dependiendo del número de computadoras distintas usas para entrar a tu sitio.
De este modo los resultados (aunque bajarán) serán más cercanos y tendrás una idea más clara de cuánta gente te visita.

Últimas entradas con gadget en flash

Crear un formulario de contacto para el blog

Tener un formulario de contacto en el blog puede ser de mucha ayuda, ya sea para que el usuario se ponga en contacto con el administrador, para envío de sugerencias, encuestas, registros, etc.
Vamos a ver cómo crear un formulario a través de un sitio externo, en este caso de EmailMeForm. Es un servicio gratuito para crear formularios de contacto bastante completos y totalmente personalizables. No necesitas saber de programación y lo puedes implementar dentro de tu blog sin complicaciones.

Primero debes ingresar a EmailMeForm y registrarte (te toma dos minutos).
Ya que has ingresado a tu cuenta selecciona
Aparecerá un mensaje, para que sea más sencillo haz click en la primera opción que dice Go to the Template section. I'd like to choose from a list of pre-made forms.
Ahí aparecerá un formulario base que puedes modificar, sólo haz click en el botón que dice Customize
Del lado izquierdo aparecerá un área color gris, es ahí donde haremos las modificaciones: en Form title escribe el título del formulario, en Description un texto que irá arriba del formulario, puede ser las instrucciones o algo explicativo; en Confirmation Options elige si quieres que al enviar el formulario aparezca un texto o reenvíe a una página Web, en Label Placement puedes elegir de qué manera se mostrarán los campos a rellenar, en Styling Options puedes poner el código de una imagen si lo deseas así como otras opciones para usuarios que conocen más sobre CSS.
Ya que lo has personalizado de modo general ve a la parte superior del área gris y selecciona Field Settings, haz click sobre un campo y te aparecerán las opciones que puedes modificar, ahí cambia el nombre de la celda así como el resto de opciones que quieras agregar.
Haz lo mismo para todos los campos.
Si quisieras agregar más campos haz click en donde dice Add field y elige el tipo de campo que quieres agregar y configuralo a tu gusto.
Cuando hayas finalizado con el formulario haz click en el botón que se encuentra en la parte de abajo.

Aparecerá un mensaje, elige la opción 3 que dice Take me back to the Form Manager, ahí aparecerá otro mensaje para seleccionar opciones de correo, como si se le enviará una copia del formulario a la persona entre otras cosas. Guarda los cambios.
Para finalizar veremos que aparece el nombre del formulario y debajo unas opciones, haz click en Code y copia el código que dice 'HTML with Javascript/CSS', ese código lo puedes pegar dentro de una entrada o una página estática procurando no dejar espacios entre cada línea. Se recomienda que cada línea del código vaya pegada una detrás de otra sin dar saltos de línea (ENTER), eso evitará que se formen espacios y que aparezca la etiqueta <br /> dentro de los campos.

Como ven los pasos son muy simples, y aunque está en inglés no es complicado entenderle. El resultado se verá más o menos así:

Enlace | EmailMeForm

Gadget de slideshow con fotos propias

Como muchos saben, Blogger dentro de los gadgets que ofrece tiene uno de presentación de fotos; estas fotos son recopiladas de Picasa, Flickr y Photobucket. El problema es que casi nadie lo usa debido a que sólo muestra fotos de una palabra clave. Por ejemplo, si seleccionas Picasa como fuente deberás escribir una palabra clave para que la presentación de fotos incluya todas las imágenes que encuentre con esa palabra clave.
¿Pero qué pasa si quiero usar fotos mías y no fotos que Picasa recopila de la web?
Entonces vamos a ver cómo crear una presentación de fotos usando sólo las fotos que quieras.
Hay dos formas de hacerlo, una es creando un álbum público y otra es creando un álbum (aunque no sea público) y mostrando las fotos a través de un feed.

A través de un feed

Primero entra a Picasaweb y crea un nuevo álbum de fotos, ahí debes subir todas las fotos que quieras que se muestren en el slideshow.
En el lado derecho verás los datos del álbum incluyendo un enlace que dice RSS, con el botón derecho del mouse selecciona Copiar la ruta del enlace.
Ahora entra a Diseño | Añadir un gadget y elige Presentación.
En la Fuente selecciona Otros y en la URL del feed pega el link que copiaste de Picasa.
Ya sólo escoge las opciones de velocidad y presentación aleatoria.

Con un álbum de fotos público

Entra a Picasaweb y crea un álbum nuevo.
En Editar selecciona Propiedades del álbum y marca la casilla Público.
Ahí agrega todas las fotos que quieras para tu slideshow.
Ahora entra a Diseño | Añadir un gadget y elige Presentación.
En la Fuente selecciona Álbumes de Picasa y marca la casilla Álbum.
En Nombre de usuario pon tu dirección de correo electronico con la que te registras en Picasa o Blogger, y selecciona el álbum público que creaste.
Escoge las opciones que quieras y guarda los cambios.

De este modo tendrás una presentación de fotos (slideshow) con las imágenes que tú has elegido mostrar.
Cuando quieras agregar o eliminar más fotos sólo entra a Picasaweb y realiza los cambios. Blogger actualizará las fotos automáticamente.

Dominios .tk

Crear 2 columnas de texto con letra capital

ener dos columnas de texto dentro de una entrada da cierta formalidad al contenido del blog.
Quizá es porque estamos acostumbrados a leer los periódicos y los libros a dos columnas y regularmente estos tienden a ser informativos y veraces. Pero no sólo eso, la letra capital le da más estilo al contenido y más aun cuando la letra capital tiene ornamentas como los libros antiguos.

Vamos entonces a ver cómo crear dos columnas dentro de una entrada sin necesidad de tocar la plantilla; lo que significa que podrás adaptar las columnas cuando quieras y esto no afectará a tus demás post.
Lo mismo con la letra capital, aunque ya se explicó antes cómo poner la letra capital en Blogger, ahora veremos cómo hacerlo sin editar nada, sólo usando unas imágenes dentro del post. La idea es hacerlo sencillo para no tener que alterar la plantilla.

Para usar la doble columna sólo debes poner el siguiente código dentro del post y escribir tu texto donde se indica:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;">Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Ahora sólo falta la letra capital; esta la puedes poner como se explica en este artículo. O bien puedes usar una imagen como yo lo he hecho. Sólo debes poner después del primer <div style="padding: 10px; float: left; width: 45%; text-align: justify;"> esta línea:

<img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />

Sólo cambia la URL de la imagen por la dirección donde esté alojada la imagen de la letra. El código completo sería este:

<div style="padding: 10px; float: left; width: 45%; text-align: justify;"><img style="margin: 0px; float: left;" src="URL de la imagen" alt="letra capital" border="0" />Texto de la columna (lado izquierdo)</div><div style="padding: 10px; float: right; width: 45%; text-align: justify;">Texto de la columna (lado derecho)</div>

Yo he tomado unas fuentes y las he convertido a imagen para que puedas usarlas. Sólo descarga la carpeta con los archivos y súbelos a un servidor. Puedes dercargárlas aquí.
Y así de simple puedes darle más estilo a tus entradas del blog.

Crea tu banner de 125 x 125

Mensaje con efecto arcoiris

Publica tu blog en Facebook

Cabecera del blog en flash

Ganador del Primer Concurso para Ciudadanos 2009

Agrandar imagen al pasar el mouse

Nube de etiquetas estatica

Anteriormente vimos cómo crear una nube de etiquetas en movimiento, ahora vamos a hacerlo pero que quede de forma estática.

Primero verifica que ya tengas un gadget de etiquetas, si aún no lo tienes agrega uno desde Elementos de la página.

Luego entra a Diseño | Edición de HTML y SIN expandir artilugios pega lo siguiente antes de ]]></b:skin>

/* Estilos de la nube de etiquetas
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{} #labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Ahora antes de </head> pega esto:

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Después busca esta línea:

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Nota: Es posible que en la id= diga Label2 o label3, y que el title= diga Etiquetas u otro nombre, pero la forma más fácil de reconocer esta línea es guiándote por esto último: type='Label'/>

Ya que lo has localizado sustitúyelo por esto:

<b:widget id='Label1' locked='false' title='Nube de etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Guarda los cambios y listo.
También puedes personalizar los colores y tamaño de las letras, para ello en el segundo código modifica lo que desees:

var maxFontSize = 20; tamaño máximo de la letra más grande
var maxColor = [0,0,255]; color del texto de la letra más grande
var minFontSize = 10; tamaño mínimo de la letra más pequeña
var minColor = [0,0,0]; color del texto de la letra más pequeña

Eliminar enlace de la imagen

Abrir lista de links en ventana aparte

Si tienes una lista de enlaces en tu blog te darás cuenta que cuando pinchas sobre un link el enlace se carga en la misma ventana haciendo que el usuario abandone tu sitio.
Si quieres que esto no suceda y que el enlace se abra en otra pestaña entonces haz lo siguiente:

Entra a Diseño > Edición de HTML y marcando la casilla Expandir artilugios busca este código

type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='blank'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sólo debes agregar lo que está en rojo y listo. Con esta modificación todos los enlaces que estén en tu Lista de Enlaces se abrirán en una pestaña aparte.

En el caso de la Lista de Blogs (blogroll) los nuevos gadgets ya tienen esa función, sin embargo si tú agregaste el gadget hace tiempo seguro que también carga los enlaces en la misma página.
Para modificarlo haz lo mismo, busca este código y agrega lo que está en color rojo:

type='BlogList'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>

<div class='widget-content'>
<div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
<ul expr:id='data:widget.instanceId + "_blogs"'>
<b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
<div class='blog-icon'>
<b:if cond='data:showIcon == "true"'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if>
</div>
<div class='blog-content'>
<div class='blog-title'>
<a expr:href='data:item.blogUrl' target='_blank'>
<data:item.blogTitle/></a>
</div>

Si te parece muy complicado esto último otra opción es que elimines el Blogroll viejo y lo agregues nuevamente para que se instale con esta característica.

IMPORTANTE: Recuerda dejar un espacio en blanco antes de target.

Menu horizontal de pestañas

Una pregunta muy recurrente es cómo crear un menú horizontal en Blogger. Si bien hay varios tipos de menú que podemos emplear este me parece muy sencillo de instalar y muy vistoso pues da un efecto de resaltado al pasar el mouse sobre el menú.

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

Primero entra a Plantilla | Edición de HTML y pega antes de ]]></b:skin> lo siguiente:

/* Menú horizontal
----------------------------------------------- */
#menu ul { margin:0; list-style:none;}
#menu li {display:inline;margin:0;padding:0;}
#menu a { float:left;background:url(http://lh5.ggpht.com/_qgZA1ny_dAs/SlimLLGQf4I/AAAAAAAAB-g/YKI9AdhUdng/lefttabbed.png) no-repeat left top;margin:0 1.5px 0 1.5px;padding:0 0 0 4px;text-decoration:none;}
#menu a span {float:left;display:block; background: url(https://lh6.googleusercontent.com/--GO1_O0J58s/TeUuqqN2R-I/AAAAAAAABdA/dDziUaN3MYQ/tabbedlarge.png) no-repeat right top;padding:5px 12px 4px 12px;color:#fff;}
#menu a span {font: bold 12px Arial, Helvetica, sans-serif; color:#000; float:none;}
#menu a:hover span {color:#fff;}
#menu a:hover {background-position:0% -27px;}
#menu a:hover span {background-position:100% -27px;}
.clear {clear:left}

Ahora entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pega esto:

<div id='menu'>
<ul>
<li><a href='URL del enlace'><span>Título 1</span></a></li>
<li><a href='URL del enlace'><span>Título 2</span></a></li>
<li><a href='URL del enlace'><span>Título 3</span></a></li>
<li><a href='URL del enlace'><span>Título 4</span></a></li>
</ul>
</div>

Ahora arrastra el gadget debajo de la cabecera y cambia los datos que están en color rojo por los tuyos. Puedes agregar las pestañas que quieras, sólo añádelas antes de </ul>.
Las pestañas que he hecho son de color gris, si no te gustan puedes quitar las dos URL que están dentro de #menu a y #menu a span y usar el color de fondo que quieras.
El color y tamaño de la letra lo puedes cambiar dentro de #menu a span {font:

Para ver el ejemplo funcionando haz click aquí.
Para obtener botones de otros colores visita este post.

Eliminar el título del blog

Eliminar la descripción del blog

Ocultar el título del blog

Ocultar la descripción del blog

A través de un feed

Con un álbum de fotos público

Últimos artículos

Artículos más visitados

Blogs de ayuda

Únete en Facebook

Ciudadanos

Agréganos en Google+

Archivo del blog