Personalizar la cabecera en las Vistas Din?micas de Blogger

Es cierto que las nuevas plantillas de Vistas Din?micas de Blogger han gustado a la mayor?a por los efectos que tienen para mostrar las entradas y la forma como se navega en ellas. Pero tambi�n es cierto que a muchos ha desilusionado el no poder personalizarlas como quisieran.

Por suerte no todo est? perdido, pues aunque no podemos agregar gadgets en ella, s? podemos modificar ciertas ?reas para que tu blog no sea vea igual al de todos. As? pues veremos c?mo ir transformando las partes que se puedan; y empezaremos con esta entrada con la que conseguiremos personalizar la cabecera del blog en las plantillas de Vistas Din?micas.

La cabecera es basicamente lo que define la imagen de todo blog pues ah? se encuentra nuestro logotipo, as? que pasaremos de esto:

A esto: [Ver blog de pruebas]

Lo ?nico que necesitamos es la imagen de nuestra cabecera y nada m?s. Si a?n no tienes una aqu? hay 50 cabeceras de d?nde escoger.
Si usas la nueva interfaz de Blogger entra en Plantilla | Personalizar | Avanzado.
Si usas la vieja interfaz de Blogger entra en Dise?o | Dise?ador de plantillas | Avanzado.

Ahora ah?, donde dice A?adir CSS agrega esto:

.header-bar {
background-color:#738a94 !important; /* Color de fondo */
background-image:url(URL de la imagen) !important; /* Imagen de fondo */
background-repeat:no-repeat; /* Si quieres que la imagen se repita c?mbialo por repeat */
height:149px !important; /* Altura de la cabecera */
border-bottom:25px solid #3b464b; /* Borde inferior */
}
#header .header-bar .title h1, #header .header-bar .title h3 {display:none;}
#header a:hover {text-decoration:none !important;}
#main {margin-top:115px !important;} /* Distancia entre la cabecera y el contenido */

Cambia la URL de la imagen donde se indica y personaliza lo dem?s que se indica en color verde.

Algunas propiedades tendr?s que descubrirlas por ti mismo pues aqu? no hay valores espec?ficos ya que depende de cada caso. Por ejemplo, la altura debe ser aproximadamente 20px menos que la altura de la imagen, pero si la imagen es un pattern peque?o entonces la altura la puedes establecer a la medida que quieras.

Yo le he puesto un borde inferior, pero puedes quitarlo, hacerlo m?s delgado, o m?s grueso, eso ya es cuesti?n de gustos.

Como hemos establecido una altura para la cabecera y le hemos puesto (o no) un borde, entonces es muy probable que las entradas y el peque?o men? se hayan tapado, as? que para que eso no suceda hemos establecido un margen en #main, ah? el valor tambi�n tendr?s que irlo descubriendo, s?lo es cuesti?n de probar varios valores hasta que quede tal como te gusta.

?Sencillo? S?, mucho, pero lo mejor de todo es que con este peque?o cambio el blog comenzar? a verse con identidad propia. Y despu�s... bueno, ya veremos despu�s qu� se nos ocurre para irle dando forma a nuestro blog.

Las Vistas Din?micas ya disponibles en Blogger

Algunos recordar?n que desde finales de marzo Blogger hab?a anunciado las Vistas Din?micas, unas nuevas formas de ver el blog; aunque en ese tiempo no le encontramos sentido ya que s?lo era para verlas, mas no para usarlas en forma aplicada en nuestra plantilla. Ayer, desde Blogger Buzz anunciaron la disponibilidad de estas Vistas Din?micas ahora como plantillas que podemos utilizar.

Seg?n Blogger, la carga del blog con estas plantillas es 40% m?s r?pido, y puede ser, ya que s?lo cargan las entradas, as? que no se muestran gadgets o nada parecido pues de hecho no existe la opci?n de agregar nada m?s.

Ciertamente son dise?os muy atractivos, din?micos e interactivos que a muchos puede gustarles, sobre todo aquellos que quieren s?lo publicar y olvidarse de la personalizaci?n.

Quien quiera empezar a usar alguna de estas siete plantillas puede hacerlo desde la nueva interfaz de Blogger en Plantilla, o en el Dise?ador de plantillas del Blogger antiguo; s?lo hay que tomar en cuenta que, son plantillas, por lo que si eliges una de ellas y la aplicas perder?s tu pantilla actual, adem?s que, al elegir una de estas plantillas de Vistas Din?micas se desactiva la Edici?n de HTML. As? que si te decides a usarlas se recomienda hacer primero un respaldo de la plantilla actual, por si despu�s quisieras regresar a la plantilla que tienes.

Lo dicho, son plantillas muy vistosas y originales, pero exclusivas (por ahora) para quienes no pretendan agregar gadgets, o personalizar nada en su blog.

Si a?n no te decides a usarlas puedes echar un vistazo para ver c?mo se ver?a tu blog con una de estas nuevas plantillas.

.blogspot.com

Botones para compartir deslizantes (Facebook, Twitter, Google+, Taringa, Bit?coras)

Hay muchos sitios para compartir nuestras entradas, y muchos de ellos proveen un bot?n para compartir, lamentablemente a veces tenemos que elegir s?lo un par de ellos pues si ponemos todos, (o la mayor?a de ellos) entonces el blog se ve muy saturado. As? que una opci?n es poder agruparlos en un contenedor que est� invisible y accesible s?lo cuando el lector haga click sobre �l. De esa forma podemos agregar los botones para compartir de habla hispana m?s importantes, como son Facebook, Twitter, Google+, Taringa y Bit?coras.

Lo que haremos entonces ser? mostrar una burbuja (bot?n) al final de las entradas, y cuando el lector de cick sobre �l se abrir? con un efecto deslizante un contenedor que tendr? dentro los botones de las principales redes sociales de habla hispana. Este gadget para promocionar nuestros posts ser? visible s?lo en las entradas individuales.

Puedes ver un ejemplo al final de esta entrada, haciendo click en el bot?n se desplegar?n los botones para compartir.

El efecto deslizante lo haremos con jQuery, y la burbuja con el texto (el bot?n) lo haremos con CSS3.

Empecemos: primero ingresa en la Edici?n HTML de la plantilla, marca la casilla Expandir plantillas de artilugios, y antes de </head> pega el script:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
jQuery(function()
{
jQuery(&quot;#msg-compartir&quot;).click(function(event) {
event.preventDefault();
jQuery(&quot;#btns-compartir&quot;).slideToggle();
});
});
</script>

Ahora antes de ]]></b:skin> agrega los estilos:

/* Botones para compartir
----------------------------------------------- */
.msg-compartir {
width:140px; /* Ancho de la burbuja */
position:relative;
padding:10px;
margin:1em 0 3em;
text-align:center;
color:#000; /* Color del texto */
background:#F3961C; /* Color de fondo de la burbuja en navegadores que no soporten CSS3 */
/* Color de fondo gradiente de la burbuja */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background:-moz-linear-gradient(#f9d835, #f3961c);
background:-o-linear-gradient(#f9d835, #f3961c);
background:linear-gradient(#f9d835, #f3961c);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.msg-compartir::after {
content: "";
position: absolute;
bottom: -15px;
left: 67px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent; /* Color de fondo del tri?ngulo de la burbuja */
display: block;
width: 0;
}
.btns-compartir {
display: none;
margin-top:-10px;
background:#F2F2F2; /* Color de fondo del contenedor de los botones */
border:1px solid #D0C9AF;
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
margin-bottom:20px;
}

Por ?ltimo, busca esta l?nea:

<div class='post-footer'>

Justo arriba de ella coloca el contenedor con los botones:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><a href='#' id='msg-compartir' style='text-decoration:none'><p class='msg-compartir'>Comparte esta entrada</p></a></center>

<center>
<div class='btns-compartir' id='btns-compartir'>
<table border='0' cellpadding='7'>
<tr>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=73&amp;height=63&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:73px; height:63px;'/></td>

<td><a class='twitter-share-button' data-count='vertical' data-lang='es' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>

<td><script type='text/javascript'>(function(){var x=document.createElement(&#39;script&#39;), s=document.getElementsByTagName(&#39;script&#39;)[0];x.async=true;x.src=&#39;http://widgets.itaringa.net/share.js&#39;;s.parentNode.insertBefore(x,s)})()</script>
<t:sharer data-layout='big'/></td>

<td><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='tall'/></td>

<td><a expr:href='&quot;http://bitacoras.com/anotaciones/&quot; + data:post.url'><img alt='votar' expr:src='&quot;http://widgets.bitacoras.com/votar/normal/&quot; + data:post.url' style='vertical-align:middle;border:0;float:right; margin-left:10px;' title='Votar este art?culo en Bitacoras.com'/></a></td>

</tr>
</table>
</div>
</center>
</b:if>

Guarda los cambios y listo. En las anotaciones en color verde he puesto como siempre las ?reas que se pueden personalizar como el color de fondo, de texto, etc. En donde dice cellpadding='7' puedes controlar la distancia entre cada bot?n.

Recuerda que:

• S?lo ser? visible en las entradas individuales, NO en la portada.
• La burbuja est? hecha con CSS3, as? que si usas un navegador viejo como Internet Explorer 8 s?lo ver?s un rect?ngulo.
• En Internet Explorer el bot?n de Facebook no se ver? bien, aunque s? funcionar?.

Comparte esta entrada

Tweet

El nuevo Lightbox de Blogger

Desde hace unos d?as el nuevo juguete de Blogger ten?a a todos como siempre con la especulaci?n de no saber qu� pasaba, y el d?a de hoy desde Blogger Buzz han anunciado de forma oficial el Lightbox de Blogger, un sistema de ventanas modales para las im?genes que hace que estas se muestren en forma de galer?a con un fondo negro.

Ese nuevo sistema funciona de forma autom?tica en todos los blogs, cuando haya una imagen en una entrada �sta podr? verse con ese "nuevo" sistema al hacer click en ella, pero si la imagen tiene un enlace a otro sitio entonces no surgir? efecto.

A muchos ha gustado, a otros no, y para los que no desean tener este Lightbox de Blogger en su blog hay algunos m�todos para sacarlo, o mejor dicho, para que no pueda cumplir su funci?n.

Jmiur public? hace unos d?as un script para que este sistema de ventanas modales no pueda funcionar en el blog. Vku por su parte public? otro c?digo m?s corto que hace algo parecido.

Yo he elegido quitarlo, una porque no me gusta que Blogger decida por m?, y otra porque ya uso Shadowbox que me parece mucho m?s completo.

As? que quien quiera quitarlo ya tienen un par de m�todos para hacerlo, y los que quieran dejarlo, pues no tienen que hacer nada.

Caja de aviso para el blog con opci?n de cerrar

Esta caja de avisos es la que vieron ahora que me ausent� y que muchos me han estado pidiendo. No es nada del otro mundo, de hecho, es una mezcla del mensaje tipo Post-it, y de las etiquetas Fieldset y Legend.

El resultado es una caja de avisos con opci?n de cerrar y como tiene CSS3 se aprecian sombras tanto en la caja como en el texto de Aviso.

No, no intentes cerrarla, esta es una imagen.

Y bueno, la colocaci?n es pr?cticamente s?lo un paso, ?nicamente hay que entrar en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pegar lo siguiente:

<style type="text/css">
#aviso{
width:500px; /* Ancho de la caja */
padding:5px; position:absolute; z-index:5000;}
.caja-aviso{
border:4px double #0080FF; /* Color del borde */
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 8px 8px 6px #808080; -moz-box-shadow: 8px 8px 6px #808080; box-shadow: 8px 8px 6px #808080;
background-color: #CEECF5; /* Color de fondo */
padding: 10px; font-family: Verdana, Geneva, sans-serif;
color: #0B173B; /* Color del texto */
}
.letrero-aviso { /* Estilos de la palabra AVISO */
font-size:18pt;
font-weight:bold;
color:#B4045F;
text-shadow: 0px 0px 10px #BA55D3;}
</style>

<div id="aviso" style="left:300px; top:100px; padding:0;">
<div align="right" style="margin-bottom:-30px;"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[CERRAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQl6_WZycfHNEb292u_GPsAqzE98OJu71sShMcESJPKMKpavn3PzUBAMq3ZPmdOtkJuw5cecSlUReS3z4aSR912GVydF8Aevqq9CzuNppPtI7mabw4EQC47Qk8tCFCFID7UOKW99F11q2/" style="vertical-align:middle;"/></a></b></div>

<br/>
<fieldset class="caja-aviso">
<legend class="letrero-aviso" align="center">AVISO</legend>
...Aqu? va el mensaje...
<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFqBlL6Bqs9eu3ic1Q5LNvwZY7zN-WpuGcdzkdTh8GZF5pHzuVi_trARX7gGQPaGoy4jt-qWtfBc0x1WyD-5VnRHeAev0AXMCsOoPSJrMhR5hg3BJ-6fW5Ye-9OdcvBTZANe97jlcjap3K/" width="26"/></a>
<a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPxbP0zYY78va_C3FnZzMCmqonTd0PiEIiBZtimzfWcVa685ev4eMt0S6zxW8axWFyB_wEuSXcyonhwC2Cz-ziyF3IzmxBAwz0N6UBEhj3kZFBhK52DEItrOQrLxuDLnilepShXOvc0eA3/" width="25"/></a></div>
</fieldset>

<script>
function closeit(){
document.getElementById("aviso").style.visibility = "hidden";
}
</script>

</div><div class="clear"/></div>

S?lo tienes que agregar el mensaje donde se indica, y tu nombre de usuario de Twitter y Facebook (si es que tienes, y quieres) donde se se?ala.

En la primera parte del c?digo he se?alado en color verde los estilos m?s importantes que se pueden personalizar como el color de fondo, tama?o y posici?n de la caja, etc.

En donde dice left:300px; top:100px; se puede controlar la posici?n de la caja de avisos, left es la distancia desde la izquierda, y top la distancia desde arriba.

Y, eso es todo. Disculpen la entrada tan escueta pero mis energ?as se quedaron en la playa...

Yahoo! Web Player: Reproductor de MP3 y videos

Hace poco m?s de un a?o hab?amos visto el Yahoo! Media Player, un reproductor de mp3 bastante original que tiene como caracter?stica detectar cualquier enlace de mp3 y reproducirlo en su peculiar reproductor que se pliega y despliega abajo de la p?gina.

Desde el pasado 4 de agosto se actualiz? el reproductor, que por cierto ahora se llama Yahoo! webplayer, y el cual ahora tiene un aspecto m?s elegante, incorpora una barra de reproducci?n para situarnos en un punto espec?fico de la canci?n, muestra en un icono rojo el n?mero de canciones que hay en la lista de reproducci?n, y adem?s ahora puede reproducir videos incluyendo videos de YouTube, formatos MP4, WMV, etc.

Puedes ver el ejemplo de este reproductor de MP3 y videos haciendo click en alguno de estos links.

Canci?n (This is not a love song)
Video de YouTube (This boots are made for walking)

Para usar este reproductor descarga y descomprime este archivo. S?belo a un hosting y estando en la Edici?n HTML de tu plantilla pega antes de </head> lo siguiente

<script src='URL de tu archivo' type='text/javascript'/>

Ah? agrega la URL del archivo YahooPlayer.js que previamente subiste. Ahora, en tus entradas, o un elemento HTML/Javascript pega las URLs de las canciones o los videos de esta forma:

<a href="URL del archivo MP3 o Video">Nombre de la canci?n</a>

Y listo, de inmediato aparecer? el ?cono de play junto al enlace, indicador de que se puede reproducir en el reproductor.

Por defecto el reproductor a?ade una car?tula gris a todas las canciones, pero si quieres que tu canci?n tenga una car?tula espec?fica entonces el c?digo a utilizar ser?a este:

<a href="URL del archivo MP3 o Video"><img src="URL de la imagen" style="display:none" />Nombre de la canci?n</a>

Yahoo nos ofrece unas cuantas opciones de par?metros para personalizarlo, aunque no todos pueden ser muy ?tiles, quiz? lo m?s rescatables de ellos sean s?lo tres: el autoplay, el auto-avanzar, y la car?tula definida. Cualquier de ellos podemos usarlos agregando justo debajo del script que a?adimos antes de </head>, lo siguiente:

<script type='text/javascript'>
var YWPParams =
{
autoplay:false,
autoadvance:false,
defaultalbumart:&#39;URL de la imagen de la car?tula&#39;
};
</script>

autoplay, es el par?metro que ordena si se reproduce autom?ticamente o no, por defecto est? en false, para activarlo lo cambiamos por true
autoadvance, indica si una canci?n continua al terminar la anterior o no, true har? que continue y false lo contrario.
defaultalbumart, es la car?tula para todas las canciones, s?lo hay que agregar la URL de la imagen donde se indica.

Adem?s de esos par?metros podemos agregar un poco de CSS para modificar algunos aspectos del reproductor. S?lo hay que a?adir antes de ]]></b:skin> algunos de los estilos que quieras utilizar.

Eliminar el logotipo de Yahoo webplayer

El reproductor incluye un logotipo en la parte superior izquierda, para eliminarlo hay que agregar estos estilos:

.ywp-container .ywp-hdr .ywp-hdr-logo {display:none !important;}

No mostrar ninguna car?tula

Distinto al par?metro del reproductor, o a la imagen que agregamos directamente en el enlace, si quieres no mostrar ninguna car?tula entonces a?ade estos estilos:

.ywp-info .ywp-thumbnail-default-img, .ywp-info .ywp-thumbnail-img {display:none !important;}

Cambiar el color del reproductor

Aunque el color que trae por defecto es muy elegante, tambi�n puede cambiarse por otro color a?adiendo lo siguiente:

.ywp-player {background-image:none !important; background-color:#8A0886 !important;}

Cambiar el color de la lista de reproducci?n

Si has cambiado el color del reproductor seguro querr?s cambiar el color de fondo del ?rea de la lista de reproducci?n, este se cambia con estos estilos:

.ywp-media-content-audio .ywp-audio-pane, .ywp-tray ol.ywp-playlist {background-color:#F5A9F2 !important;}

Y para finalizar, tambi�n podemos hacer uso de las listas de reproducci?n, �stas podr?n reproducirse sin problema en este reproductor.

En los par?metros que nos ofrece Yahoo hay uno que es para controlar el volumen, pero lo he probado en varias ocasiones y no ha funcionado, de cualquier manera, si alguien quiere probarlo o ver la lista completa de los par?metros de reproductor pueden verlos en el sitio del reproductor.

Sitio | Yahoo! webplayer
Par?metros | How to set up

Men? vertical desplegable tipo acorde?n con jQuery

Hace alg?n tiempo vimos c?mo poner un men? vertical desplegable con jQuery, muy presentable, pero su dise?o est? enfocado m?s a mostrar contenido en vez de subpesta?as. Contrario al que veremos ahora, el cual es un men? vertical desplegable con efecto deslizante que s? tiene subpesta?as por lo que podremos agregar enlaces a cada secci?n del men?.

Tiene dos variantes, puede desplegarse al hacer click, o puede desplegarse al pasar el cursor sobre �l.

Funciona al hacer click

Funciona al pasar el cursor

Lo primero que haremos ser? insertar el script en la plantilla, para ello entra en Plantilla | Edici?n de HTML y antes de </head> agrega lo siguiente:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
//------------------------------
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});


$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtaw_piSU7uBHWYeSWcpuj0TPqPyO9qKqZtnDF9i3UJztrrUCDH3D-FSZtJDJyQTRXsxODwURJd9AHUV0mZmfl5SIrBvsXaNbregXUMkbTF6w54j33z5HNdEri8a5yID8p01LyzaBCNs/)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/)"});
});
});

//]]>
</script>

Ahora antes de ]]></b:skin> a?ade los estilos:

/* Men? vertical desplegable
----------------------------------------------- */
.menu_list {
width: 180px; /* Ancho del men? */
}
.menu_head {
padding: 5px 10px;
color:#848484; /* Color de las pesta?as principales */
cursor: pointer;
position: relative;
margin:1px;
margin-left:0;
margin-right:0;
font-weight:bold;
background-color: #424242; /* Color de fondo */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_DRbH7q5Xxlz51nqvKMiLP-fr__e9W0R32fJewykDgeLuSWq6KP3aauYaoXV_uvUfogx0dT22vvUkCbXVEmdRjC680pNBkCo7T0Aeb8e8nuDrxRZgpq90nuWg-nXbazuFaz-ytp18-g/);
background-position:center right;
background-repeat:no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#848484; /* Color de los enlaces */
background-color:#BDBDBD; /* Color de fondo de los enlaces */
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #000000; /* Color de los enlaces al pasar el cursor */
text-decoration:underline;
}

Por ?ltimo entra en Dise?o | A?adir un gadget | HTML/Javascript, y ah? pega la estructura del men?.
Si quieres el que se activa al hacer click pega este c?digo:

<div id="firstpane" class="menu_list">

<p class="menu_head">Pesta?a 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>


</div>

Si quieres el que se activa al pasar el cursor entonces pega este c?digo:

<div class="menu_list" id="secondpane">

<p class="menu_head">Pesta?a 1</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 2</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

<p class="menu_head">Pesta?a 3</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>


</div>

Ya s?lo cambia el nombre de las pesta?as, de las subpesta?as, y agrega las URLs de los enlaces donde se indica.

Si quieres agregar m?s subpesta?as s?lo a?ade debajo de la ?ltima subpesta?a una l?nea como esta:

<a href="URL del enlace">Sub pesta?a 3</a>

Y si quieres agregar otra pesta?a con sus respectivas subpesta?as agrega antes del ?ltimo </div> un c?digo como este:

<p class="menu_head">Pesta?a 4</p>
<div class="menu_body">
<a href="URL del enlace">Sub pesta?a 1</a>
<a href="URL del enlace">Sub pesta?a 2</a>
<a href="URL del enlace">Sub pesta?a 3</a>
</div>

Como siempre en color verde he puesto las anotaciones donde puedes personalizar el men? como es el color de fondo, el texto, etc.
Las flechas son unas im?genes, si quieres cambiarlas deber?s cambiar las URLs de estas im?genes que se encuentran tanto en el primer como en el segundo c?digo.

Es un men? sencillo pero con la facilidad de agrupar varios enlaces y adem?s con esos efectos deslizantes que a todos gusta.

V?a | Roshan's blog