Leche psicodélica

LECHE PSICODÉLICA

La leche psicodélica es un curioso experimento en el que los colores huyen del jabón.

Necesitaremos:

  - Un plato.

  - Leche.

  - Jabón/Detergente.

  - Colorantes.

  - Bastoncillo de oídos (esto es opcional).

  - Cuentagotas (esto es opcional).

Cómo hacerlo:

Verteremos cuidadosamente la leche en el plato, con el cuentagotas o sin el él echamos los colorantes. Fíjate que los colorantes hacen curiosas formas y no rompen la tensión superficial; pero al coger el bastoncillo y untarlo en el jabón o detergente y tocar con él la mezcla los colores huyen del jabón, esto pasa porque el jabón o el detergente rompen esa tensión superficial y los colores se van hacia donde hay más tensión superficial.

Read More

Cómo hacer un slider para tu blog

CÓMO HACER UN SLIDER PARA TÚ BLOG

Para hacerlo iremos al siguiente enlace y nos registraremos, una vez que estemos registrados elegiremos la plantilla (template) y subiremos las imagenes o videos que queramos que pasen al cabo de un cierto tiempo. Luego podemos elegir el tamaño en pixeles (px) cambiando el ancho (width)  y la altura (height), tambén podemos cambiar el tiempo de transición y los efectos de transicion en la opción transition.
Cuando ya lo tengamos a nuestro gusto solo tenemos que copiar el código html que nos sale abajo y pegarlo en un gadget html/javascript.



Este es mi ejemplo:

Read More

Como poner un foro en tu blog

CÓMO PONER UN FORO EN TU BLOG

Muchos queremos poner un foro en nuestro blog para que la gente comente, ponga sus dudas, ... etc. Hoy vamos a ver como hacerlo, podéis hacerlo con google groups o podéis hacerlo de la maner que más me gusta, que es ir a la siguiente página web y hacer y personalizar vosotros el vuestro. Cuando lo tengáis copiáis el código y lo pegáis en la página, entrada o gadget html/java script en el que queréia que salga.

Este es un ejemplo que he hecho yo:

Get your own Chat Box! Go Large!

Read More

Cómo hacer una imagen que te sigue y te dirige a otra página

CÓMO HACER UNA IMAGEN QUE TE SIGUE Y TE DIRIGE A OTRA PÁGINA

A muchos nos pasa que queremos poner una imagen que nos siga y al darle clic nos dirija a otra página, pues aquí te dejo el código para que lo hagas.

El primer código hay que pegarlo antes de la etiqueta </body>

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBrxKf_kDTiv8ToNOCTv5-HbPypzNmMMoy8sGkIp4D6tJFpcXkUYR9BwRINxLDczy8u10i3z1LRfO2fDfdmNBdj589DfnqL-EN9Dbj9pqvbdkylapQzbwcbtge6z6N8JFgLiraABf8c-U/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>

El segundo código hay que pegarlo antes de la etiqueta </head>

<style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 150px;
visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

Read More

Botones para compartir para tu blog

BOTONES PARA COMPARTIR PARA TU BLOG
¡NUEVOS BOTONES KAWAII!

                                                      
  

Aquí os dejo varios botones para compartir en vuestro blog. Esta entrada estará sujeta a varias actualizaciones. El código hay que pegarlo en un gadget html/javascript.

Facebook (2)

<a href="URL-FACEBOOK" target="_blank"><img alt="siguenos en facebook" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpPlAW_OaCtly6uknn8Pxe2ob7tMwk0zKTTUT125pZGBQUMCPWvWzapIm_6xmo6GEjCRwwksHZkGu0Lhwx6dMOBuapVz_Y39ZerR9FaqJp3PqR7rfK4gZqpzkIJO6VXUDmVISCX8IsssqN/s1600/face.png" title="siguenos en facebook" width="40" /></a>

Kawaii:
<a href="URL-FACEBOOK" target="_blank"><img alt="siguenos en facebook" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU4AM2-7vBupZCcxP0Cr1D0TMS7f8oe2uEHUyphAUC98pAClqjpi6S_Rg92vOqEzwZwgCxLjd8AXyCsK7-cmouk4s5qpvtZHstFX7pw8cP0b6_K6X6wO6cPR3vqGIpphXlD24mck0KDww/s1600/facebook+kawai.JPG" title="siguenos en facebook" width="48" /></a>

Twitter (3) 

 <a href="URL-Twitter" target="_blank"><img alt="Siguenos en Twitter" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmms6eY6E9ytDJHMAP9GX4hjiX8bqlt09JHzMIZZhU3RXUumt-wqVvNH-DgYx3vpJmFBkR19zMQ2V_e7nJdeG_J9ftV_MEZ8RvLT9c_qJ3djseO2rStteFf1TJhPE8W2fckv5OFRIMcSZ/s1600/Twitter+NEW.png" title="siguenos en Twitter" width="40" /></a>

<a href="URL-Twitter" target="_blank"><img alt="siguenos en Twitter" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqqSjFSWD6yH38Z61Z_u2NOZ1CrO5wwtVL_rIO2j6y9I5I0PGqVxknupV1g_FpF3zDjvEsHTsDmJAWrUx1QLNCQLvPVgO7bko5851lml_dd4J3HGQyujLWuUOfK4kiY1P9BjvyflphVzyQ/s1600/Twitter+alt+4.png" title="siguenos en Twitter" width="40" /></a>

Kawaii:
<a href="URL-Twitter" target="_blank"><img alt="siguenos en Twitter" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFucMFdVDhcqeOsGp5iObjJPA8OW0s_f4UIl5sGCJfMluVI4w0muKcaE-1mPdEC-I0W1cJ-vmgmoTo2zmSoyr4gDTB2shNoxj_0XxGkcZ5n8DpbRaXc4emyyHxnvNaZLT_EsSYi2f_YOM/s1600/twitter+kawai.JPG" title="siguenos en Twitter" width="48" /></a>

Google + o plus (2)

<a href="URL-Google+" target="_blank"><img alt="siguenos en Google+" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqPIDVRwilqj3ZT3AopdoamlcbAcIA69wKnLajIOBqt2SZ3JpBZ_8dlinqq2gIce-acXLU9ttaqahJgdCXFGAg4HpXnlYhaxqtQQowvkjRqDFBzJH3DwlGo7B92JXz_4tmKHKqI2ggnpHE/s1600/Google%252B+alt.png" title="siguenos en Google+" width="40" /></a>

<a href="URL-Google+" target="_blank"><img alt="siguenos en Google+" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwpFIdlmStva-WfdYKAH096M9V92C71Ry2R9oh5ZJIfsVo0RBobP70uI4XhvHlzzg1tjHyJdyypB5pFnFbxhZuiMdRw6bYhNpmBLhHeHHrE8VC6m_7oePhiFYeIDsGQRaFPb6ex-nkv9Z/s1600/plusone.png" title="siguenos en Google+" width="40" /></a>

Kawaii:

<a href="URL-Google+" target="_blank"><img alt="siguenos en Google+" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK3sFN4apapWgXKH61b9WRLHcxImA8vghhwWczNsZRQfp8jlUIlqMcOfwYa7t_Fj9uMGphe_8jJsM8Zfc2YKxm8Xu7WFANAHa3FMeAVipKG4pQjuudaN71yjmoWwrjdqWIz4B_BgOs1CM/s1600/google+kawai.JPG" title="siguenos en Google+" width="48" /></a>

Youtube (4)

<a href="URL-youtube" target="_blank"><img alt="Canal de youtube" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZT2BVbGKGxtfiCx3WrOtoYlnjqiKHQL_gVcd3q1MCYkOXgTTR7QhGK4ajBmiegw10XVz7bcV2go1ZV-w4ih7s9w5o4mTxqrbUxd4bQUqvy81Zt3bRaeaHvvpUruPcdMhGwGvB98eyfho2/s1600/YouTube+alt+1.png" title="Canal de youtube" width="40" /></a>


<a href="URL-youtube" target="_blank"><img alt="Canal de youtube" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7C6TQRpDxduSYwq0HaADOtoOENTngBtZta3DgcC7uXGHPrtcAX-7e5lgkaAcQFcH7g6EV-2GRfOLY7wThS6PLHWV8w43efHLlwn7XPhV2hMmIPelhAnmTinVkhLLHDMtkfIVgrqk-73Tw/s1600/Youtube+alt+2.png" title="Canal de youtube" width="40" /></a>

<a href="URL-youtube" target="_blank"><img alt="Canal de youtube" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuUKGktLdlCX41YXVySG5_CfWLdevaNn_z4CAOzIDtm7eUZvBN7Yk6jyCmXg7xP1RrwZe2Q0s8JKVWHd5zzJo4x0kB8yg2dJhMYIgE4jZcgAOzJz86HwluvBsdwBFDA0bNtGv0K_YY2f1c/s1600/youtube2.png" title="Canal de youtube" width="40" /></a>

Kawaii:

<a href="URL-youtube" target="_blank"><img alt="Canal de youtube" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcgVsoL-tgZsZ4IgBAa0QcCptTBmWtd5Ho3GuhEHbOb_BgQ2Nu78EmCej7kG7IaUEkEEnLEKhbaS6HmGcZjn_kCAtVlcppshrqUBiA5xb3c_nAvGxw6N1-Eo-gk4o6U92wo0xZ3Z-7Qew/s1600/Youtube+kawai.JPG" title="Canal de youtube" width="48" /></a>

Tumblr (1)

<a href="URL-Tumblr" target="_blank"><img alt="sígueme en Tumblr" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj65UN-HVhAjrzB85AZ-tZpaSclzmdapRxlmATWxWAaGvJqc9MoHtks0JQYcSYSkqMTDOHbbAUeRg_dq_JD9GDi-XDJHVqGKgV5JzT_p-ZWyDl9cnlWAu-THwN2Kxr_HwY4hlzdZ8mhp9rY/s1600/Tumblr+alt.png" title="sígueme en Tumblr" width="40" /></a>

Blogger (2)

<a href="URL-Blogger" target="_blank"><img alt="sígueme en Blogger" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5DmNhdezBSo2pI2di8KmLwimLdhXEM97gOyvqycARPpEH1cWhpgEe1tpVZAo3y67g3_gDX9vjje_lFY05WQTIulfiuECrEt_mchkOOHCs7wTBSHLi6eAcE_rWSTLoaVE7FB5SJCMBTMpX/s1600/Google+Blogger.png" title="sígueme en Blogger" width="40" /></a>

<a href="URL-Blogger" target="_blank"><img alt="sígueme en Blogger" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgdEnSr2SvILC6bKvrEYCwCIfMGNOFR09wwRtSamnEewJN2YpkhzA5At-Sv9TQo97wCu4kizJ-H_cwhwqBaDTFF1vGE8pGaYeoAuanzsaZPK2trkqJmiiHf_x0-RvBDJLEFvQa1yDomznO/s1600/blogger2.png" title="sígueme en Blogger" width="40" /></a>

Instagram (2)
<a href="URL-Instagram" target="_blank"><img alt="sígueme en Instagram" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXXRirVJQ1yKNDmqWFwr1DScSUaIgtoFljL__E5iOG4ropzLdEiMFkXHAcCpmRAN71a_Y0M7K2cSi0Lilycd8Z-ZLd9NI5f4oTBJ10G_0w04ewCW4xE4c6pEqNujDZQZ-NTVb7muglFG39/s1600/instagram2.png" title="sígueme en Instagram" width="40" /></a>

Kawaii:

<a href="URL-Instagram" target="_blank"><img alt="sígueme en Instagram" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtL9T4AnFs1hHVvHUso6zPKOG3qHbSrnH9U7GQeiLY4N9TfFT8ip2We-JJkK-1HiZWXR3XCVx0pAX-wgClJf1Z-Vz4Y3ClaQ29IbQ05oU9GsUh0tZTOsZnGnn3uvN2eJ4gkUBWN-1yxxQ/s1600/instagram+kawai.JPG" title="sígueme en Instagram" width="48" /></a>

Pinterest (2)
<a href="URL-Pinterest" target="_blank"><img alt="Sígueme en Pinterest" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEHpfLaTV8pZSilagNjoOIkYMrjmzb6-d_s87QpDbQfI6F5ZvNkVKSQ1mP2mwVNPlCe9gYJjJPpocUPEB2dbkEzk5WH5f4z6R34xzBWrtcbP5adWy0Zdxmb6dvm-w_Jelw7tGdIZ4yt2H4/s1600/Pinterest+alt.png" title="Sígueme en Pinterest" width="40" /></a>

Kawaii:
<a href="URL-Pinterest" target="_blank"><img alt="Sígueme en Pinterest" height="48" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0roPRbM3WRXWev476P1r_aLCHFmZ8Uu-rOE6hD0eJybMva0t2BXMEmEfNNnmgQa2ieCIcGh30ZiB7gjlQkDg4D3b8qVm1c1JGKCXH5Rd7vXw253pznTvxONU29-kTJl2zy2m3FtqxkJM/s1600/pinterest+kawai.JPG" title="Sígueme en Pinterest" width="48" /></a>

Picasa (1)
<a href="URL-Picasa" target="_blank"><img alt="sígueme en Picasa" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNKn4VuTpo4xv8dT_ug170pVo_cvhbQdV4f2S1WGDvTnvUS-cKqhAorS1R4iuCuuSR962HK1ICoRlCneS1Q9KHYamKlZm_EuqTlPNANcVulPxc1DpFy0cXL_cLgH0Z22TDHkEgqxTM-IR/s1600/picasa2.png" title="sígueme en Picasa" width="40" /></a>

Skype (2)
<a href="URL-Skype" target="_blank"><img alt="sígueme en Skype" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirUD2oaDzwHiOeUMdrFICXbl27DK_I1edhu3LUCdw8Nz6vD234lPGzoRxyPvo1rR359bFgSHE7zVUAOICzv6KAI3-UBxspMn_PvQj5Va4wHmZzhBghDx8Y7Z6COQCRz7Zj7MhS18YQU-yL/s1600/Skype.png" title="sígueme en Skype" width="40" /></a>

<a href="URL-Skype" target="_blank"><img alt="sígueme en Skype" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5dqSNttGwlq_H5qiEZo6QrQpzmrPdOjjJWnYhVVxp7M9ZI4cn_7utdMDAY1mJSK2L5hsRQKtei5zna5RgwExRCItiicuqL0ma506aCBEUFogM1riJZ2sBBlkNnsUqtse_mjeHew0bwj3l/s1600/skype2.png" title="sígueme en Skype" width="40" /></a>

Read More

Cómo mostrar gadgets solo en la portada

CÓMO MOSTRAR GADGETS SOLO EN LA PORTADA

A muchos nos pasa que queremos que un gadget solo aparezaca en la página principal poer el motivo que sea, suele ser normalmente porque se carga mal.

Lo primero es localizar el gadget en la plantilla expandida, en mi caso es el HTML1, cuando lo tengáis copiáis y pegáis la parte en rojo.

<b:widget id='HTML1' locked='false' title='Gadget' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

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

La primera parte que agregamos va después del <b:includable id='main'> y la segunda va antes del </b:includable>

Read More

Cómo crear un reloj con cuenta atrás para tu blog

CÓMO HACER UN RELOJ CON CUENTA ATRÁS PARA TU BLOG

A muchos nos pasa que queremos señalar una fecha importante en nuestro blog, y para hacerlo lo mejor que se puede hacer es poner una cuenta atrás hasta la fecha señalada.

El siguiente código sólo tienes que pegarlo en un gadget html/javascript y aparecerá en tú blog. "12/24/2013 11:59 PM" lo tienes que cambiar por la fecha señalada. 

<script language="JavaScript">

TargetDate = "12/24/2013 11:59 PM";

BackColor = "white";

ForeColor = "black";

CountActive = true;

CountStepper = -1;

LeadingZero = true;

DisplayFormat = "%%D%% Días, %%H%% Horas, %%M%% Minutos, %%S%% Segundos.";

FinishMessage = "AQUÍ VA EL MENSAJE QUE QUIERAS PONER";

</script>

<script language="JavaScript" src="http://ciudad-blogger.googlecode.com/files/countdown.js"></script>

Otra opción es que vayas al siguiente enlace y crees tú propio reloj con cuenta atrás, con el código obtenido solo tienes que pegarlo en gadget html/javascript.

Read More

El chocolate infinito

EL CHOCOLATE INFINITO

Seguro que te ha pasado que has querido una onza de chocolate más, pues aquí tienes un truco para hacerlo.

Necesitarás:
-Tableta de chocolate
-Un cuchillo

Cómo hacerlo:

Corta tu tableta de chocolate como se muestra en la foto, y mueve las piezas como se muestra en la imagen animada.

Read More

Premios best blog

PREMIOS BEST BLOG

Reglas para recibir el premio:

1- Nombrar a quien te ha nominado. Hoy he visto el blog de consejos para novatos animaba

 a todos a participar en estos premios.
2- Visitar el blog de quien te ha nominado. Lo he visitado y me ha gustado mucho
3- Contestar preguntas que te hace el que te nomina.
4- Nominar a otros 11 blogs y avisarles que les has nominado. Si queréis que os nomine ponedlo en los comentarios.

Preguntas:
- ¿De que hablas en tu blog? Hablo de mis intereses y comparto mis conocimientos.

- ¿Que te hizo crear tu blog? Me hizo crear mi blog el querer compartir mis conocimientos con el mundo

- ¿Cuáles son los tres adjetivos con los que te describes? Símpático, cabezota y trabajador.

- ¿Cuál es el objeto más raro de tu habitación? Un bote de humos.

- ¿Cuál fue el último libro que te leíste? El último libro que leí fue El quijote de la Mancha

- ¿Cuál es tu refrán o frase favorita? Calla, haz y triunfarás.

- ¿Qué canción elegirías para ponerle banda sonora a tu vida? Buff ... muy complicado. No se contestar a esta pregunta.

- ¿Cuál es tu postre favorito? Las fresas con nata.

- Un sueño por cumplir. Llegar a ser un científico.

- Tus aficiones. Hacer experimentos y manualidades. Hacer alguna cosa con el ordenador.

NOMINADOS:

- http://consejosdeeljoanini.blogspot.com.es/2016/03/premios-best-blog_9.html

Read More

El fluido no newtoniano

FLUIDO NO NEWTONIANO

Hoy te voy a enseñar a hacer este curioso fluido, que al aplicarle una fuerza se vuelve sólido y si no le aplicas una fuerza es líquido.

Necesitarás:

-Maizena (Harina o almidón de maíz, existen    más polvos para hacer este experimento)

-Agua (Para hacer el fluido)

-Colorantes, tónica (con quinina), ... (Esto es  opcional)

Cómo hacerlo:

 Lo primero hay que mezclar la maizena con el agua poco a poco haste que gane la    consistencia que se dice en la definición, luego (esto es opcional) se pueden añadir  colorantes o tónica (la tónica tiene que contener quinina, la cuál brilla en la oscuridad)

Read More

Menu y submenus

CÓMO PONER MENÚS Y SUBMENÚS EN BLOGGER

A muchos nos pasa que en nuestro blog de blogger queremos poner un menú con submenús para nuestras páginas, aquí te dejo un menú con submenús para que pongas en tu blog.

1

Lo primero que tienes que hacer es copiar el código de abajo y pegarlo antes de la etiqueta </head> o ir a plantilla y a la opción personalizar, cuando ya estés en personalizar busca avanzado y allí ve a la opción de css y pega el código, al código le puedes cambiar los colores. Ej. color #e7e5e5 .
  
<style type="text/css">#cssmenu2 ul {margin: 0; padding: 7px 6px 0; background: #7d7d7d url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -110px; line-height: 100%; border-radius: 1em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);}

#cssmenu2 li {margin: 0 5px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
#cssmenu2 a,
#cssmenu2 a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding:  8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;  text-shadow: 0 1px 1px rgba(0,0,0, .3); }
#cssmenu2 a:hover {background: #000; color: #fff;}
#cssmenu2 .active a, 
#cssmenu2 li:hover > a {background: #666 url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); box-shadow: 0 1px 1px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
#cssmenu2 ul ul li:hover a,
#cssmenu2 li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
#cssmenu2 ul ul a:hover {background: #8f8f8f url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
#cssmenu2 li:hover > ul {display: block;}
#cssmenu2 ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(http://cssmenumaker.com/sites/default/files/menu/96/overlay.png) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3);}
#cssmenu2 ul ul li {float: none; margin: 0; padding: 3px; }
#cssmenu2 ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
#cssmenu2 ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
* html #cssmenu2  ul {height: 1%;}</style>

2

Ahora solo tienes que ir diseño y añade un gadget de html/javascript, dentro de ese gadget pon el siguiente código, puedes cambiar el nombre de las pestañas, duplicarlas para tener más,... etc.

<div id="cssmenu2">

<ul>

<li><a href="http://LA_URL_PRINCIPAL/index.html">Nombre</a></li>

<li class="has-sub "><a href="LA_URL_A_CATEGORÍA1">Nombre</a>

<ul>

<li><a href="LA_URL_A_SUBCATEGORÍA1">Nombre</a></li>

<li><a href="LA_URL_A_SUBCATEGORÍA2">Nombre</a></li>

</ul>

</li>

<li><a href="LA_URL_A_CATEGORÍA2">Nombre</a></li>

<li><a href="LA_URL_A_CATEGORÍA3">Nombre</a></li>

</ul>

Se trata de un menú de la web cssmenumaker.com

Read More