?Qu� es un feed?

La mayor?a ya debe saber qu� es un feed y c?mo funciona, pero para los que apenas est?n comenzando con un blog o reci�n se adentran al mundo de la informaci?n electr?nica, y no saben qu� es el feed y para qu� sirve, vamos a explicarlo con esta entrada.

?Qu� es un feed?

Un feed es un medio por el cual los usuarios pueden leer las entradas de un sitio Web o parte de ellas; el feed en s? es un archivo que contiene la informaci?n del contenido del blog y que se actualiza de forma autom?tica.

Esto significa que cuando est�s interesado en un blog puedes suscribirte a su feed y de esta forma sabr?s cuando haya un contenido nuevo el cual podr?s leerlo desde tu lector de feeds.

Seguro te preguntar?s si existe una ventaja al suscribirse a un feed, y la respuesta es s?; supongamos que te gustan 50 blogs que lees regularmente, ?te imaginas tener que estar entrando a esos 50 blogs a cada rato para saber si han escrito algo nuevo? Podr?as perder mucho pero mucho valioso tiempo. En cambio si te suscribes al feed de esos blogs sabr?s cuando haya una nueva entrada en alguno de ellos sin haber tenido que ir hasta cada uno de esos sitios para averiguarlo.

En palabras m?s cortas, suscribirte a un feed hace que en lugar de que t? vayas a la informaci?n sea la informaci?n la que vaya hacia a ti.

?C?mo me suscribo al feed de un blog?

Cuando te interese estar al tanto de las actualizaciones de un blog puedes suscribirte al feed de �ste. En la mayor?a de los casos ver?s este icono y haciendo click en �l o en el enlace que est� junto a �l podr?s conseguir la suscripci?n a ese blog.
O bien, si ya usas un lector de feeds s?lo necesitas agregar en �l la URL del blog y el lector de feeds se encargar? de buscar el feed por ti.

?C?mo puedo leer los feeds a los que me suscribo?

Cuando te suscribes a un feed necesitas elegir un lector de feeds que es el lugar donde se almacenar?n todos los feeds a los que te suscribas y ser? �ste lector quien visite de forma peri?dica esos blogs que te gustan para informarte cuando haya contenido nuevo; �ste lector puede ser una aplicaci?n para tu computadora, un sitio online como Google Reader, o desde tu correo electr?nico.

En cualquiera de los dos primeros casos necesitas entrar cuando lo desees para revisar si hay alg?n art?culo nuevo en cualquiera de todos los sitios donde est?s suscrito; en el caso de la suscripci?n por correo no necesitar?s hacerlo pues cuando haya un nuevo art?culo en alguno de los blogs a los que est?s suscrito te llegar? un correo con la informaci?n respectiva.

?C?mo activo el feed de mi blog para que la gente se suscriba?

Si tienes un blog de Blogger entonces ya tienes un feed de forma autom?tica y por defecto est? activado para que tus lectores puedan suscribirse a �l.

Para verificar que tu feed est? activado entra en Configuraci?n | Feed del sitio | Permitir feeds del blog, ah? puedes seleccionar Completo si es que quieres que aparezca todo el contenido de la entrada en los feeds, o Corto si quieres que s?lo se vea el t?tulo del post.

La URL del feed de tu blog es en todos los casos as?:

http://nombre-de-mi-blog.blogspot.com/feeds/posts/default

?Qu� es un gestor de feeds?

Un gestor de feeds se encarga de administrar los feeds de los blogs que posees. Estos gestores se ocupan de distribuir a los suscriptores las actualizaciones del contenido de tu blog, y en la mayor?a de los casos te muestran estad?sticas de tus feeds tales como el n?mero de suscriptores. El m?s popular, reconocido por las distintas herramientas que tiene, es Feedburner, que adem?s es un producto de Google. En la pr?xima entrada veremos c?mo crear un feed ah?.

Y ya que estamos con este tema recuerda que puedes suscribirte a nuestro feed para leernos deste tu lector o tambi�n puedes suscribirte por correo electr?nico.

Gadget de etiquetas en forma de men? desplegable

Ya que seguimos con el tema de ahorrar espacio en el blog veamos c?mo podemos mostrar las etiquetas en forma de men? desplegable, esto ser? para ahorrar espacio y para tener las etiquetas con otro estilo diferente al tradicional.

Cuando usamos el gadget de etiquetas �stas se muestran en forma de lista ordenada:

Lo que haremos ser? que se muestren de esta forma:



Selecciona una categor?a
- - - - - - - - - -
Cuadros
C?rculos
Hex?gonos
Rect?ngulos
Trapecios
Tri?ngulos



S?lo necesitas entrar en Dise?o | Edici?n de HTML, marcar la casilla Expandir plantillas de artilugios y buscar este c?digo:

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>

Elim?nalo y en su lugar pega esto:

<br/>
<select class='menu-etiquetas' onchange='location=this.options[this.selectedIndex].value;'>
<option>Selecciona una categor?a</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>

Con eso ser? suficiente. Puedes cambiar el texto Selecciona una categor?a donde se indica. Si quieres que no se muestren el n?mero de entradas que tiene cada etiqueta elimina lo que est? en color azul.

Tambi�n puedes darle un poco de color para que se vea m?s o menos de esta forma:


Selecciona una categor?a
- - - - - - - - - -
Cuadros
C?rculos
Hex?gonos
Rect?ngulos
Trapecios
Tri?ngulos


Si lo quieres as? sigue el mismo procedimiento pero adicionalmente deber?s pegar antes de
]]></b:skin> este c?digo:

.menu-etiquetas {
background-color: #CEE3F6; /* Color de fondo */
color: #000000; /* Color del texto */
}

Ah? puedes cambiar los colores donde se indica.
No est? de m?s decir que primero necesitas tener el gadget de Etiquetas... digo, por si alguien busca el c?digo y no lo encuentra.

Expandir y contraer gadgets con efecto deslizante

Muchas veces algunos gadgets se vuelven muy largos con el paso de tiempo, como el de Etiquetas, Archivo del blog, Lista de enlaces, etc. y estos comienzan a ocupar demasiado espacio en la sidebar, as? que una buena forma de ahorrarnos ese espacio es contraer los gadgets para que se expandan s?lo cuando el lector quiera verlos, y adem?s de eso con un efecto deslizante. 

Puedes ver un ejemplo en este blog de pruebas.

Para hacer esto en los gadgets vamos a usar Scriptaculous que es el que le dar? el efecto deslizante.

S?lo vamos a Dise?o | Edici?n de HTML y marcamos la casilla Expandir plantillas de artilugios.

Agrega antes de </head> lo siguiente:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>
<!-- Prototype y Scriptaculous-->

Ahora localizamos el gadget al que queremos aplicarle el truco, por ejemplo, un gadget HTML/Javascript ser?a m?s o menos as?:

<b:widget id='HTML1' locked='false' title='T?tulo del gadget' type='HTML'>
<b:includable id='main'>
<a href='#' onclick='Effect.toggle(&quot;ExpandGadget1&quot;,&quot;slide&quot;); return false'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>&#9660;&#9650; <data:title/></h2>
</b:if>
</a><div align='center' id='ExpandGadget1' style='display: none; text-align:left;'>
<div class='widget-content'>
<data:content/>
</div>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que est? en color rojo y listo. Aqu? lo que se debe tomar en cuenta es que cada vez que se ponga en un gadget se debe cambiar lo que est? en color azul por otro nombre, por ejemplo ExpandGadget2, ExpandGadget3, etc. o cualquier otro nombre pero nunca debe ser igual a otro que ya tengamos.

Es seguro que la estructura de algunos gadgets no se vean como el del ejemplo pues �stos var?an seg?n el tipo de gadget que sean, pero para saber d?nde debemos poner el c?digo s?lo hay que guiarnos por los c?digos que est?n en color gris, as? que s?lo localiza la primera l?nea gris y debajo pega el primer c?digo en rojo, luego localiza la segunda parte gris y ah? deber?s pegar alrededor lo otro en color rojo, y por ?ltimo busca la ?ltima l?nea gris y arriba de ella pega el ?ltimo c?digo rojo.

No est? de m?s recordarles que se usa Scriptaculous y que no es compatible con jQuery, as? que si usas jQuery entonces deber?s realizar el hack para que puedan funcionar las dos librer?as juntas.

Spoiler para ocultar y mostrar contenido en una entrada

Algunas veces tenemos mucho contenido que agregar en una entrada pero no queremos mostrarlo todo de un solo golpe, ya sea porque no queremos que la entrada se haga demasiado larga o porque queremos que el contenido se vaya descubriendo poco a poco.
Y s?, ya antes hab?amos visto c?mo expandir y contraer partes de una entrada usando Scriptaculous y que le da un efecto deslizante, pero como a muchos no les gusta usar Scriptaculous vamos a ver otra forma de hacerlo usando un simple javascript que aunque no tendr? efecto alguno cumple su funci?n muy bien, que ser? la de mostrar y ocultar contenido.

Puedes ver un ejemplo haciendo click en el siguiente bot?n.

Este es un contenido que permanecer? oculto hasta que el lector quiera verlo, y podr? esconderlo nuevamente presionando otra vez el bot?n.

Podemos incluir dentro cualquier cosa que se nos ocurra, ya sea una tabla, una imagen, un reproductor de audio, un video, etc.

Para usarlo en tu blog s?lo basta con poner este c?digo en una entrada cada vez que lo quieras usar:

<div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

Ah? s?lo tienes que agregar donde se indica el contenido que quieres ocultar. Si el bot?n no te gusta mucho puedes leer esta entrada para saber c?mo personalizar los botones.
O bien, puedes usar un enlace de texto en lugar de un bot?n

Mostrar / Ocultar ▼▲

En ese caso el c?digo a usar es este:

<div class="divspoiler">
<a href="javascript:void(0);" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" >Mostrar / Ocultar &#9660;&#9650;</a>
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

O si lo prefieres tambi�n puedes usar una imagen.

?Qu� significa SOS?
Save Our Souls
Save Our Ship
No significa nada
Socorro Oh Socorro

Ah? el c?digo ser?a este:

<div class="divspoiler">
<img src="URL de la imagen" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none';}" />
</div><div><div class="spoiler" style="display: none;">
Aqu? el contenido que queremos ocultar
</div></div>

Bastante pr?ctico y f?cil de usar ?no? Puedes agregar varios en la misma entrada sin necesidad de cambiar alguna ID ni nada de eso. S?lo procura no cambiar a la pesta?a Redactar una vez que lo pongas y no modifiques los espacios del c?digo para que funcione correctamente.

Ganadores del concurso para seguidores de Facebook

Despu�s de que algunos se aguantaron las ganas de comer e incluso de ir al ba?o con tal de estar atentos a las preguntas del concurso, ya tenemos ganadores.

Definitivamente los concursos cada vez se ponen m?s buenos, pero no porque se hagan aqu? sino porque la participaci?n de todos es incre?ble, hab?a nervios, risas, enojo y hasta varios aprovecharon la oportunidad de hacer amigos y ayudarse en los temas del blog, ese es el carisma que tienen los bloggers hispanos ?s? se?or!

Y bueno, al final y para sorpresa de muchos no fueron tres premios los que se entregaron sino cuatro :)

As? es, al final se regalo 1 dominio m?s!

Los ganadores del Concurso para los seguidores de Facebook son los siguientes:

Concursante	Premio
Spikcity Friend	1 eBook "El Nuevo Libro de Cocina Dietetica del Dr. Atkins"
David Luviano	1 eBook "C?mo ser altamente atractivo con las mujeres"
Mois�s Reyes	1 dominio por un a?o
Nicolas Fidalgo	1 dominio por un a?o

Estas fueron las preguntas:

Nuevamente gracias a todos por la participaci?n siempre tan positiva con los concursos, y por supuesto gracias a los patrocinadores pues sin ellos no habr?a presupuesto para entregar estos premios.

Si a?n no has ganado no te desanimes que nos veremos pronto para seguir repartiendo m?s premios :)

Concurso para los seguidores de Facebook

Como reci�n acabamos de llegar a los 7000 seguidores en Facebook se me ha ocurrido hacer un concurso express para entregar unos regalitos a manera de agradecimiento por acompa?arnos tambi�n en las redes sociales pues la respuesta que hemos tenido por parte de ustedes ha sido b?rbara.

En esta ocasi?n ser? un concurso r?pido para que los seguidores de Facebook puedan ganarse uno de los tres excelentes premios que se entregar?n.

PREMIOS

El concurso tendr? tres ganadores y cada uno de ellos podr? llevarse uno de los siguientes premios:

1 dominio por un a?o

El ganador podr? elegir un dominio con extensi?n .com o .net con duraci?n de un a?o.
El dominio incluye autoria legal del dominio durante el tiempo de contrataci?n, una cuenta de Google Apps y manejo total de DNS.

1 ejemplar del eBook "C?mo ser altamente atractivo con las mujeres"

Este interesante libro electr?nico del autor Luis Kasanova nos explica los secretos para ser altamente seductivos con el sexo femenino.

En el libro encontrar?s una serie de consejos y estrategias que te guiar?n para saber c?mo convertirte en un exitoso seductor y conseguir tus objetivos en las artes del amor, adem?s incluye 5 art?culos exclusivos que te dir?n c?mo atraer a una mujer.

Autor: Luis Kazanova | Formato: PDF | P?ginas: 90 | A?o: 2010 | Software requerido: Adobe Reader
M?s informaci?n...

1 ejemplar del eBook "El Nuevo Libro de Cocina Dietetica del Dr. Atkins"

El famoso doctor Robert Atkins autor de la mundialmente conocida dieta Atkins expone en esta edici?n electr?nica, suculentas comidas nutritivas bajas en carbohidratos que puedes servir en la mesa en diez minutos, los cuales incluyen desayunos, sopas, aperitivos, platos principales, panes, postres, meriendas y delicias culinarias que dar?n un buen gusto y adem?s te har?n bajar de peso.

Autor: Dr. Robert Atkins y Veronica Atkins | Formato: EPUB | P?ginas: 224 | A?o: 2010 | Software requerido: Adobe Digital Editions
M?s informaci?n...

MEC?NICA DEL CONCURSO

Durante el transcurso del d?a mi�rcoles 13 de abril se har?n 3 preguntas en nuestra p?gina de Facebook, en cada pregunta se dir? cu?l es el premio a ganar, y la primera persona en responder correctamente a la pregunta se har? acreedor al premio por el que el concursante haya participado. S?lo puede haber un ganador por pregunta, as? que ese d?a deber?n estar muy atentos a nuestra p?gina de Facebook.

BASES DEL CONCURSO

Podr? participar cualquier persona que tenga una cuenta en Facebook y que sea seguidor de Ciudad Blogger en Facebook, si a?n no lo has hecho puedes entrar a nuestra p?gina y dar click en Me gusta.

S?lo podr? haber un premio por ganador, por lo que un ganador no podr? participar en las otras preguntas ni podr? concursar con diferentes cuentas pertenecientes al mismo usuario.

Para conocer todos los t�rminos y condiciones del concurso visita este enlace.

As? que prep?rate este mi�rcoles para responder y ganarte uno de los tres premios y si a?n no eres seguidor de Ciudad Blogger en Facebook??qu� esperas?!

AVISO: Los libros en formato electr?nico que se entregar?n son copias originales y cuentan con licencia, �stos ser?n entregados a trav�s de los sitios autorizados para su distribuci?n.

Men? horizontal con subpesta?as hecho con CSS

El siguiente men? es un men? horizontal con subpesta?as llamado Professional dropdown y es creado por Stu nicholls. Est? hecho a base de CSS y tiene un aire de elegancia y profesionalismo con la posibilidad de agregar subpesta?as dentro de las subpesta?as por lo que lo hace un men? de multiniveles bastante pr?ctico.
Puedes verlo funcionando en el ejemplo de abajo.

• Pesta?a 1
• Pesta?a 2
  • Pesta?a 2.1
    • Pesta?a 2.1.1
    • Pesta?a 2.1.2
    • Pesta?a 2.1.3
  • Pesta?a 2.2
    
    • Pesta?a 2.2.1
    • Pesta?a 2.2.2
    • Pesta?a 2.2.3
    • Pesta?a 2.2.4
      
      • Pesta?a 2.2.4.1
      • Pesta?a 2.2.4.2
      • Pesta?a 2.2.4.3
    • Pesta?a 2.2.5
    • Pesta?a 2.2.6
      
      • Pesta?a 2.2.6.1
      • Pesta?a 2.2.6.2
  • Pesta?a 2.3
  • Pesta?a 2.4
  • Pesta?a 2.5
• Pesta?a 3
  
  • Pesta?a 3.1
  • Pesta?a 3.2
  • Pesta?a 3.3
  • Pesta?a 3.4
• Pesta?a 4
  
  • Pesta?a 4.1
  • Pesta?a 4.2
    
    • Pesta?a 4.2.1
    • Pesta?a 4.2.2
    • Pesta?a 4.2.3
    • Pesta?a 4.2.4
    • Pesta?a 4.2.5
    • Pesta?a 4.2.6
  • Pesta?a 4.3
  • Pesta?a 4.4
  • Pesta?a 4.5
  • Pesta?a 4.6
• Pesta?a 5
  
  • Pesta?a 5.1
  • Pesta?a 5.2
  • Pesta?a 5.3

Aunque agregarlo al blog pueda parecer complicado la verdad es que es bastante sencillo, as? que empecemos y veamos c?mo se hace.

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 entramos en Dise?o | Edici?n de HTML y antes de ]]></b:skin> pega los estilos:

#nav {
padding:0;
margin:0;
list-style:none;
height:28px;
position:relative;
z-index:500;
font-family:arial, verdana, sans-serif;
}
#nav li.top {display:block; float:left;}
#nav li a.top_link {
display:block;
float:left;
height:28px;
line-height:27px;
color:#ccc;
text-decoration:none;
font-size:11px;
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/);
}
#nav li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp3lHWIVZoUfMifFildx28JhXif1B5fUUEx-JGcu6TU9Ph1M6zgvpiD7vGzls6EEIdu5wLKZiRpjJ593j0YQJbtn5nI_9F-m2VYBsWzQtJgXo7E9EypOZZDYq60Wv5qtzaX19hitxoqpJo/) right top;
}
#nav li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:28px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78Y9xGD4xg3IIlafOigM86RwDzkmdTIqwgUY-d5P67fAj1RE4rbw_ljRpNVYNilkJwN7sE_98yGeTWtqn-WeCSGxPwujVWfArWJ_ue6vjDTr7UyMOXuvsw4s1J53jiO-kGtBgxO99BdR-/) no-repeat right top;
}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1HWhGL4HvdZ3ACsv_L_a8K0Ru2FTO-3cUyuHr-hgNHFWiseFJr5m-f5k2oaiJaap_B-T8dT57vTcVfZ1b4bFGSb73if93mIXighnhIwjyD9LhQEWCh6BYEzUm6fa7GnBrY0CCLaS0DUbH/) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWQ723pFbm8kK4YDvdKDdGSCZKIWIS5UFExFnJctZ_3ST_0CKvh7w-gRV05B3SVXgFdHC_zmH1WNY0DOS_qdTI4irl0wn12vWz48XxzlT9bcUYBX8DnPhPzAHPrHLDuzo-y0rUMrQ5Usk/) no-repeat right top;}

#nav li:hover {position:relative; z-index:200;}
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub{
left:0;
top:28px;
background: #fff;
padding:3px;
border:1px solid #3a93d2;
white-space:nowrap;
width:90px;
height:auto;
z-index:300;
}
#nav li:hover ul.sub li{
display:block;
height:20px;
position:relative;
float:left;
width:90px;
font-weight:normal;
}
#nav li:hover ul.sub li a{
display:block;
font-size:11px;
height:20px;
width:90px;
line-height:20px;
text-indent:5px;
color:#000;
text-decoration:none;
}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuF77fGGhxThBZbFWhOiVv9HlZmcoPxnEGVu1aJ4aT-D5LYnoisED5hvMZg0QcvK6U6GDF62a0lrdmeyIP1AfAMRmOuXKUvSSzKyQgHS0BzS4qw0WOeNAgmx2nCsVp6jKK9hQ3PBVVmOZN/) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMm7zw3hlo7y1sEwwLMtLoEL2he_0GreEeUCP7VneK8uDymrHleg_dE8_CHvuZC7YwYiLP4no2dKXiTKNiiObED27xe0pY1rGUGHzgNjwDSyRqWnpTYUuGlh5BluHw8wHsie6D0yPwifN/) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

Ahora entra en Dise?o | Elementos de la p?gina | A?adir un gadget | HTML/Javascript y ah? pega lo siguiente:

<ul id="nav">
<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 1</span></a></li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 2</span></a><ul class="sub"><li><a href="#" class="fly">Pestaña 2.1</a><ul>
<li><a href="URL del enlace">Pestaña 2.1.1</a></li>
<li><a href="URL del enlace">Pestaña 2.1.2</a></li>
<li><a href="URL del enlace">Pestaña 2.1.3</a></li>
</ul>
</li>
<li class="mid"><a href="#" class="fly">Pestaña 2.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.3</a></li>
<li><a href="#" class="fly">Pestaña 2.2.4</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.4.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.2</a></li>
<li><a href="URL del enlace">Pestaña 2.2.4.3</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.2.5</a></li>
<li><a href="#" class="fly">Pestaña 2.2.6</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.2.6.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
<li><a href="URL del enlace">Pestaña 2.4</a></li>
<li><a href="URL del enlace">Pestaña 2.5</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 3</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
<li><a href="URL del enlace">Pestaña 3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 4</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="#" class="fly">Pestaña 4.2</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.2.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2.2</a></li>
<li><a href="URL del enlace">Pestaña 4.2.3</a></li>
<li><a href="URL del enlace">Pestaña 4.2.4</a></li>
<li><a href="URL del enlace">Pestaña 4.2.5</a></li>
<li><a href="URL del enlace">Pestaña 4.2.6</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
<li><a href="URL del enlace">Pestaña 4.4</a></li>
<li><a href="URL del enlace">Pestaña 4.5</a></li>
<li><a href="URL del enlace">Pestaña 4.6</a></li>
</ul>
</li>

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña 5</span></a>
<ul class="sub">
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña 6</span></a></li>

</ul>

Ya s?lo agrega la URL de los enlaces y el nombre de las pesta?as donde se indica.
Si quisieras agregar otra pesta?a simple s?lo a?ade antes del ?ltimo </ul> una l?nea como esta:

<li class="top"><a href="URL del enlace" class="top_link"><span>Pestaña</span></a></li>

Si quisieras agregar una pesta?a con subpesta?as entonces agrega este c?digo:

<li class="top"><a href="#" class="top_link"><span class="down">Pestaña</span></a>
<ul class="sub">
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
<li><a href="URL del enlace">Sub pestaña</a></li>
</ul>
</li>

Y si quisieras que una de las subpesta?as tuviera otras subpesta?as entonces elimina una l?nea como la que est? en color verde y c?mbiala por un c?digo como este:

<li><a href="#" class="fly">Sub pestaña</a>
<ul>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
<li><a href="URL del enlace">Otra Sub pestaña</a></li>
</ul>
</li>

Y eso es todo. Como dije antes, la instalaci?n es sencilla pero puede parecer complicado cuando se quieren agregar las subpesta?as pero una vez entendiendo la estructura del men? ser? pan comido.
?Y el color de fondo? El color del men? as? como de las subpesta?as est? hecho a base de im?genes as? que quien quiera cambiarle de color tendr? que editar todas las URLs de las im?genes que se encuentran en el primer c?digo.