Menú horizontal con subpestañas y buscador integrado 2

Hace algún tiempo vimos el menú horizontal con subpestañas y buscador integrado y desde eso me han preguntado cómo hacer ese mismo menú pero de varios niveles, es decir, que las subpestañas del menú también tengan subpestañas. El menú a continuación tiene esa característica, además de conservar el buscador dentro del menú.

Los estilos redondeados en los submenús se han quitado por cuestiones estéticas, pero ya saben que cualquiera de estas monerías pueden personalizarse a consideración y gusto propio.

El menú puedes verlo en este blog de pruebas.

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.

Para poner este menú horizontal con submenús en tu blog entra en la Edición HTML de tu plantilla, y antes de ]]></b:skin> pega los estilos:

/* Menu horizontal con buscador
----------------------------------------------- */
#menuWrapper {
width:100%; /* Ancho del menú */
height:35px;
padding-left:14px;
background:#333; /* Color de fondo */
border-radius:20px; /* Bordes redondeados de la barra principal */
}
.menu {
padding:0;
margin:0;
list-style:none;
height:35px;
position:relative;
z-index:5;
font-family:arial, verdana, sans-serif;
}
.menu li:hover li a {
background:none;
}
.menu li.top {display:block; float:left;}
.menu li a.top_link {
display:block;
float:left;
height:35px;
line-height:34px;
color:#ccc;
text-decoration:none;
font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;
font-size:13px; /* Tamaño de la fuente */
font-weight:bold;
padding:0 0 0 12px;
cursor:pointer;
}
.menu li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:35px;
}
.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }
.menu li:hover {position:relative; z-index:2;}
.menu ul,
.menu li:hover ul ul,
.menu li:hover ul li:hover ul ul,
.menu li:hover ul li:hover ul li:hover ul ul,
.menu 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;}

.menu li:hover ul.sub {
left:0;
top:35px;
background:#333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
height:auto;
z-index:3;
}
.menu li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px;
font-weight:normal;
}
.menu li:hover ul.sub li a{
display:block;
height:30px;
width:200px;
line-height:30px;
text-indent:5px;
color:#ccc;
text-decoration:none;
}
.menu li ul.sub li a.fly {
/* Color de fondo del submenú */
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxacb0vA2IhsqDqe7LXdq0974NNqgL07iB-BjuUwr-qkmTOucW0Gl2xQIxhiZdwRWQLyiAupLdSCsp0yeZenNTgBu74_5UTwl-7k9xSokkyBi3iXOeADDtbIUu_xf6XEOTrhpckIeNG6j/) 185px 10px no-repeat;}
.menu li:hover ul.sub li a:hover {
background:#2580a2; /* Color de fondo al pasar el cursor */
color:#fff;
}
.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {
/* Color de fondo al pasar el cursor */
background:#2580a2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxacb0vA2IhsqDqe7LXdq0974NNqgL07iB-BjuUwr-qkmTOucW0Gl2xQIxhiZdwRWQLyiAupLdSCsp0yeZenNTgBu74_5UTwl-7k9xSokkyBi3iXOeADDtbIUu_xf6XEOTrhpckIeNG6j/) 185px 10px no-repeat; color:#fff;}

.menu li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul,
.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {
left:200px;
top:-4px;
background: #333; /* Color de fondo del submenú */
padding:3px;
white-space:nowrap;
width:200px;
z-index:4;
height:auto;
}
#search {
width: 228px; /* Ancho del buscador */
height: 22px;
float: right;
text-align: center;
margin-top: 6px;
margin-right: 6px;
/* Imagen de fondo del buscador */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbNps93HyZstsblqp2FloayJLGIp58a0pi6MIJ_ydOIo3byXrwB-LB6wxz7TbQAW220XOKuIcQlgBDGiOHJEwzdeNnhJE41Dg-ePVuHzy2Gc0MhhkB9N5pbL5OfF63kfflXHccuOCcUm4/s1600/search-bar.png) no-repeat;
}
#search-box {
margin-top: 3px;
border:0px;
background: transparent;
text-align:center;
}

Luego entra en Diseño y en un gadget HTML/Javascript pega lo siguiente:

<div id='menuWrapper'>
<ul class='menu'>
<li class='top'><a class='top_link' href='URL del enlace'><span>Pestaña 1</span></a></li>

<li class='top'><a class='top_link' href='#'><span class='down'>Pestaña 2</span></a><ul class='sub'><li><a class='fly' href='#'>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 class='fly' href='#'>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 class='fly' href='#'>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 class='fly' href='#'>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 class='top_link' href='#'><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 class='top_link' href='#'><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 class='fly' href='#'>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 class='top_link' href='#'><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>


<!-- Buscador -->
<li>
<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'>
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form>
</li>

</ul>
</div>

Guarda los cambios y listo. En color verde puedes ver las áreas para cambiar los colores.

Antes de <!-- Buscador --> puedes agregar más pestañas si lo deseas.
Si quisieras añadir otra pestaña simple, agrega 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 naranja 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>

Con esta variación del menú podemos agrupar más enlaces y categorías en poco espacio, y que además, al conservar el buscador dentro del menú hace que sea un menú práctico, compacto y útil.

Meny, un menú deslizante que voltea al blog en 3D

Meny es un menú tridimencional bastante peculiar y llamativo, no sólo por la forma como muestra los enlaces, sino por la forma como "pone" al blog. Lo que hace este menú es que al pasar el cursor para mostrarlo, se desliza el contenido del menú mientras voltea al blog con un efecto 3D.

La mejor forma de entenderlo es viendo el demo en este blog de pruebas, sólo pasa el cursor por la flecha para ver este menú en funcionamiento.

El script es de Hakim El Hattab y para suerte de muchos no usa ni jQuery ni Scriptaculous, así que en la mayoría de los casos no debería haber problemas de compatibilidad.

Implementar este menú que voltea la página en 3D es bastante sencillo, sólo entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega los estilos:

/* Meny Menu
----------------------------------------------- */
.meny {
display: none;
padding: 20px;
overflow: auto;
background: #333;
color: #eee; /* Color de fondo del menú */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.meny h4 {
font-size: 24px; /* Tamaño del título del menú */
color:#fff; /* Color del título del menú */
text-align:center;
}
.meny ul {
margin-top: 10px;
}
.meny ul li {
display: inline-block;
width: 200px;
list-style: none;
font-size: 20px;
padding: 3px 10px;
}
.meny-arrow {
position: absolute;
z-index: 10;
border: 10px solid transparent;
-webkit-transition: opacity 0.4s ease 0.4s;
-moz-transition: opacity 0.4s ease 0.4s;
-ms-transition: opacity 0.4s ease 0.4s;
-o-transition: opacity 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s;
}
.meny-left .meny-arrow {
left: 5px;
top: 350px;
margin-top: -16px;
border-left: 16px solid #333; /* Color de la flecha */
}
.meny-right .meny-arrow {
right: 14px;
top: 150px;
margin-top: -16px;
border-right: 16px solid #333; /* Color de la flecha */
}
.meny-top .meny-arrow {
left: 150px;
top: 14px;
margin-left: -16px;
border-top: 16px solid #333; /* Color de la flecha */
}
.meny-bottom .meny-arrow {
left: 150px;
bottom: 14px;
margin-left: -16px;
border-bottom: 16px solid #333; /* Color de la flecha */
}
.meny-active .meny-arrow {
opacity: 0;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-ms-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.contents {
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Luego busca la etiqueta <body> o esta línea:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Debajo de cualquiera de las dos agrega lo siguiente:

<div class='meny'>
<h4>Menú</h4>
<ul>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
<li><a href='URL del enlace'>Texto del enlace</a></li>
</ul>
</div>

<div class='meny-arrow'/>
<div class='contents'>

Por último añade antes de </body> este código:

</div>
<script>
//<![CDATA[
/*!
* meny 1.2
* http://lab.hakim.se/meny
* MIT licensed
* Created by Hakim El Hattab (http://hakim.se, @hakimel)
*/
var Meny={create:function(a){return(function(){if(!a||!a.menuElement||!a.contentsElement){throw"You need to specify which menu and contents elements to use.";
}if(a.menuElement.parentNode!==a.contentsElement.parentNode){throw"The menu and contents elements must have the same parent.";}var J="top",K="right",c="bottom",N="left";
var F="WebkitPerspective" in document.body.style||"MozPerspective" in document.body.style||"msPerspective" in document.body.style||"OPerspective" in document.body.style||"perspective" in document.body.style;
var D={width:300,height:300,position:N,threshold:40,overlap:6,transitionDuration:"0.5s",transitionEasing:"ease"};var e={menu:a.menuElement,contents:a.contentsElement,wrapper:a.menuElement.parentNode,cover:null};
var A=e.wrapper.offsetLeft,z=e.wrapper.offsetTop,t=null,r=null,q=null,o=null,f=false,m=false;var l,j,G,n,O,V,S,x,d,B;var w,y,E;Meny.extend(D,a);i();g();
v();C();Q();R();function i(){G="";S="";switch(D.position){case J:l="50% 0%";j="rotateX( 30deg ) translateY( -100% ) translateY( "+D.overlap+"px )";V="50% 0";
x="translateY( "+D.height+"px ) rotateX( -15deg )";n={top:"-"+(D.height-D.overlap)+"px"};O={top:"0px"};d={top:"0px"};B={top:D.height+"px"};break;case K:l="100% 50%";
j="rotateY( 30deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )";V="100% 50%";x="translateX( -"+D.width+"px ) rotateY( -15deg )";n={right:"-"+(D.width-D.overlap)+"px"};
O={right:"0px"};d={left:"0px"};B={left:"-"+D.width+"px"};break;case c:l="50% 100%";j="rotateX( -30deg ) translateY( 100% ) translateY( -"+D.overlap+"px )";
V="50% 100%";x="translateY( -"+D.height+"px ) rotateX( 15deg )";n={bottom:"-"+(D.height-D.overlap)+"px"};O={bottom:"0px"};d={top:"0px"};B={top:"-"+D.height+"px"};
break;default:l="100% 50%";j="translateX( -100% ) translateX( "+D.overlap+"px ) scale( 1.01 ) rotateY( -30deg )";V="0 50%";x="translateX( "+D.width+"px ) rotateY( 15deg )";
n={left:"-"+(D.width-D.overlap)+"px"};O={left:"0px"};d={left:"0px"};B={left:D.width+"px"};break;}}function g(){Meny.addClass(e.wrapper,"meny-"+D.position);
e.wrapper.style[Meny.prefix("perspective")]="800px";e.wrapper.style[Meny.prefix("perspectiveOrigin")]=V;}function v(){e.cover=document.createElement("div");
e.cover.style.position="absolute";e.cover.style.display="block";e.cover.style.width="100%";e.cover.style.height="100%";e.cover.style.left=0;e.cover.style.top=0;
e.cover.style.zIndex=1000;e.cover.style.visibility="hidden";e.cover.style.opacity=0;try{e.cover.style.background="rgba( 0, 0, 0, 0.4 )";e.cover.style.background="-ms-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
e.cover.style.background="-moz-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";e.cover.style.background="-webkit-linear-gradient("+D.position+", rgba(0,0,0,0.20) 0%,rgba(0,0,0,0.65) 100%)";
}catch(W){}if(F){e.cover.style[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}e.contents.appendChild(e.cover);}function C(){var W=e.menu.style;
switch(D.position){case J:W.width="100%";W.height=D.height+"px";break;case K:W.right="0";W.width=D.width+"px";W.height="100%";break;case c:W.bottom="0";
W.width="100%";W.height=D.height+"px";break;case N:W.width=D.width+"px";W.height="100%";break;}W.position="fixed";W.display="block";W.zIndex=1;if(F){W[Meny.prefix("transform")]=j;
W[Meny.prefix("transformOrigin")]=l;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;}else{Meny.extend(W,n);}}function Q(){var W=e.contents.style;
if(F){W[Meny.prefix("transform")]=S;W[Meny.prefix("transformOrigin")]=V;W[Meny.prefix("transition")]="all "+D.transitionDuration+" "+D.transitionEasing;
}else{W.position=W.position.match(/relative|absolute|fixed/gi)?W.position:"relative";Meny.extend(W,d);}}function R(){if("ontouchstart" in window){Meny.bindEvent(document,"touchstart",L);
Meny.bindEvent(document,"touchend",H);}else{Meny.bindEvent(document,"mousedown",M);Meny.bindEvent(document,"mouseup",U);Meny.bindEvent(document,"mousemove",b);
}}function u(){if(!f){f=true;Meny.addClass(e.wrapper,"meny-active");e.cover.style.height=e.contents.scrollHeight+"px";e.cover.style.visibility="visible";
if(F){e.cover.style.opacity=1;e.contents.style[Meny.prefix("transform")]=x;e.menu.style[Meny.prefix("transform")]=G;}else{w&&w.stop();w=Meny.animate(e.menu,O,500);
y&&y.stop();y=Meny.animate(e.contents,B,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:1},500);}Meny.dispatchEvent(e.menu,"open");}}function I(){if(f){f=false;
Meny.removeClass(e.wrapper,"meny-active");if(F){e.cover.style.visibility="hidden";e.cover.style.opacity=0;e.contents.style[Meny.prefix("transform")]=S;
e.menu.style[Meny.prefix("transform")]=j;}else{w&&w.stop();w=Meny.animate(e.menu,n,500);y&&y.stop();y=Meny.animate(e.contents,d,500);E&&E.stop();E=Meny.animate(e.cover,{opacity:0},500,function(){e.cover.style.visibility="hidden";
});}Meny.dispatchEvent(e.menu,"close");}}function M(W){m=true;}function b(Z){if(!m){var W=Z.clientX-A,aa=Z.clientY-z;switch(D.position){case J:if(aa>D.height){I();
}else{if(aa<D.threshold){u();}}break;case K:var X=e.wrapper.offsetWidth;if(W<X-D.width){I();}else{if(W>X-D.threshold){u();}}break;case c:var Y=e.wrapper.offsetHeight;
if(aa<Y-D.height){I();}else{if(aa>Y-D.threshold){u();}}break;case N:if(W>D.width){I();}else{if(W<D.threshold){u();}}break;}}}function U(W){m=false;}function L(W){t=W.touches[0].clientX-A;
r=W.touches[0].clientY-z;q=null;o=null;Meny.bindEvent(document,"touchmove",P);}function P(X){q=X.touches[0].clientX-A;o=X.touches[0].clientY-z;var W=null;
if(Math.abs(q-t)>Math.abs(o-r)){if(q<t-D.threshold){W=T;}else{if(q>t+D.threshold){W=p;}}}else{if(o<r-D.threshold){W=s;}else{if(o>r+D.threshold){W=h;}}}if(W&&W()){X.preventDefault();
}}function H(W){Meny.unbindEvent(document,"touchmove",P);if(q===null&&o===null){k();}}function k(){var W=(D.position===J&&r>D.height)||(D.position===K&&t<e.wrapper.offsetWidth-D.width)||(D.position===c&&r<e.wrapper.offsetHeight-D.height)||(D.position===N&&t<D.width);
if(W){I();}}function p(){if(D.position===K&&f){I();return true;}else{if(D.position===N&&!f){u();return true;}}}function T(){if(D.position===K&&!f){u();
return true;}else{if(D.position===N&&f){I();return true;}}}function h(){if(D.position===c&&f){I();return true;}else{if(D.position===J&&!f){u();return true;
}}}function s(){if(D.position===c&&!f){u();return true;}else{if(D.position===J&&f){I();return true;}}}return{open:u,close:I,isOpen:function(){return f;
},addEventListener:function(W,X){e.menu&&Meny.bindEvent(e.menu,W,X);},removeEventListener:function(W,X){e.menu&&Meny.unbindEvent(e.menu,W,X);}};})();},animate:function(b,a,c,d){return(function(){var g={};
for(var j in a){g[j]={start:parseFloat(b.style[j])||0,end:parseFloat(a[j]),unit:(typeof a[j]==="string"&&a[j].match(/px|em|%/gi))?a[j].match(/px|em|%/gi)[0]:""};
}var i=Date.now(),e;function h(){var k=1-Math.pow(1-((Date.now()-i)/c),5);for(var m in g){var l=g[m];b.style[m]=l.start+((l.end-l.start)*k)+l.unit;}if(k<1){e=setTimeout(h,1000/60);
}else{d&&d();f();}}function f(){clearTimeout(e);}h();return{stop:f};})();},extend:function(d,c){for(var e in c){d[e]=c[e];}},prefix:function(e,d){var b=e.slice(0,1).toUpperCase()+e.slice(1),g=["Webkit","Moz","O","ms"];
for(var c=0,a=g.length;c<a;c++){var f=g[c];if(typeof(d||document.body).style[f+b]!=="undefined"){return f+b;}}return e;},addClass:function(b,a){b.className=b.className.replace(/\s+$/gi,"")+" "+a;
},removeClass:function(b,a){b.className=b.className.replace(a,"");},bindEvent:function(a,c,b){if(a.addEventListener){a.addEventListener(c,b,false);}else{a.attachEvent("on"+c,b);
}},unbindEvent:function(a,c,b){if(a.removeEventListener){a.removeEventListener(c,b,false);}else{a.detachEvent("on"+c,b);}},dispatchEvent:function(b,c,a){if(b){var d=document.createEvent("HTMLEvents",1,2);
d.initEvent(c,true,true);Meny.extend(d,a);b.dispatchEvent(d);}},getQuery:function(){var a={};location.search.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi,function(b){a[b.split("=").shift()]=b.split("=").pop();
});return a;}};if(typeof Date.now!=="function"){Date.now=function(){return new Date().getTime();};}


var meny = Meny.create({
menuElement: document.querySelector( '.meny' ),
contentsElement: document.querySelector( '.contents' ),
position: Meny.getQuery().p || 'left',
height: 200,
width: 260,
threshold: 40
});
if( Meny.getQuery().u && Meny.getQuery().u.match( /^http/gi ) ) {
var contents = document.querySelector( '.contents' );
contents.style.padding = '0px';
contents.innerHTML = '<div class="cover"></div><iframe src="'+ Meny.getQuery().u +'" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
}

//]]>
</script>

Cambia las URLs de los enlaces y los nombres de los mismos donde se indica en color rojo. Luego guarda los cambios y listo.

Si quisieras agregar más enlaces sólo pon antes de </ul> una línea como esta por cada enlace extra que desees:

<li><a href='URL del enlace'>Texto del enlace</a></li>

Adicionalmente puedes cambiar la orientación de la página cuando se voltea, puede ser a la izquierda como está por defecto, a la derecha, arriba o abajo. Eso se modifica donde dice left en el último código y podrás cambiarlo por right, top, o bottom

Si tuvieras mucho contenido a lo largo entonces se verá mejor si lo cambias por top o bottom, aunque también cambiará la orientación del menú.

Menú de Navegación con Pestañas estilo Google Play con el Gadget de Etiquetas

En Front-end-depelopment, veía un excelente tutorial que explica cómo crear una sección con pestañas estilo Google Play, y pensé que sería interesante hacer un menú de navegación aplicando dicho estilo, usando el gadget de las etiquetas. Este menú permitirá navegar entre las páginas de etiquetas y destacar siempre el enlace seleccionado si cambiamos un poco el código del gadget.



Lo que haremos

• Vamos a agregar el enlace de la página principal al gadget de las etiquetas (Inicio).


• Cambiaremos el código del gadget para destacar el enlace seleccionado, ya sea el de la página principal o los de las páginas de etiquetas, sin usar Javascript.


• Con el CSS del tutorial mencionado, le daremos a los enlaces del gadget de las etiquetas la apariencia de pestañas al estilo Google Play.

Demostración

Ventajas

• Una vez hechos todos los cambios, no necesitarás editar/agregar ningún código HTML para añadir enlaces.


• El enlace seleccionado siempre destacará, independientemente de que se navegue entre las páginas de etiquetas (recuerda que la URL de éstas páginas cambia de forma dinámica). Puedes comprobar ésto desde mi blog, al navegar entre las páginas de etiquetas desde el gadget de etiquetas (Categorías).


• Podrás seleccionar cuáles etiquetas mostrar en el menú, editando ésto desde las opciones de configuración del gadget.

Bueno, vayamos al grano y veamos cómo crear el susodicho menú, y aunque no luce mucho ahí en la demostración, ya que está debajo de la demo del menú con iconos usando el gadget de lista de enlaces, puedes ver su funcionamiento.



Importante: Antes de empezar a personalizar el gadget de las etiquetas, es necesario habilitar una sección en la cabecera, para poner ahí el gadget de las etiquetas, ya que la sección que está debajo de la cabecera llamada crosscol, está diseñada pensando en el menú de navegación que traen consigo las plantillas nuevas de Blogger, y el CSS que ya tienen estropeará el resultado. Otra opción seria quitar dicho CSS.



En este caso lo que haremos, es habilitar otra sección y para ello vas a la edición de HTML de la plantilla, y buscas esta linea de código:



 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>



Luego, cambias "1" por "3", y "no" por "yes". Puse 3, para que se vea el area punteada en la sección, y puedas identificarla más fácilmente cuando estés en la sección de Diseño.

Cómo crear el Menú paso a paso

1. Una vez habilitada una nueva sección en la cabecera, necesitamos agregar el gadget de etiquetas, desde "Diseño". Puedes arrastrarlo hasta ahí si ya lo tienes en la columna lateral o bien, agregarlo en "Añadir gadget". Tienes que configurarlo del siguiente modo: en "Editar" selecciona las etiquetas que quieres mostrar. En mostrar, selecciona la opción de "Lista" y no actives la casilla de "Mostrar cantidad de entradas por etiqueta".






2. Luego, agregas el CSS yendo a Plantilla > Personalizar > Avanzado > Añadir CSS
   
   

   
   #Label1 h2{display:none}
   
   
   
   #Label1 ul {
   
   overflow:hidden;
   
   width: 100%;
   
   margin: 0;
   
   padding: 0;
   
   list-style: none;
   
   border-bottom: 2px solid #3D3D3D;
   
   }
   
   #Label1 li {
   
   float: left;
   
   margin: 0 -15px -3px 0;
   
   }
   
   #Label1 li a {
   
   float: left;
   
   position: relative;
   
   padding: 0 10px 0 14px;
   
   height: 0;
   
   line-height: 32px;
   
   text-transform: uppercase;
   
   text-decoration: none;
   
   color: #fff;
   
   border-right: 30px solid transparent;
   
   border-bottom: 30px solid #3D3D3D;
   
   border-bottom-color: #777\9;
   
   opacity: .3;
   
   filter: alpha(opacity=30);
   
   }
   
   #Label1 li a:hover,
   
   #Label1 li a:focus {
   
   border-bottom-color: #2ac7e1;
   
   opacity: 1;
   
   filter: alpha(opacity=100);
   
   }
   
   #Label1 li a:focus {
   
   outline: 0;
   
   }
   
   #Label1 li a.seleccionado {
   
   z-index: 3;
   
   border-bottom-color: #3d3d3d;
   
   opacity: 1;
   
   filter: alpha(opacity=100);
   
   }

   
   
   
   Nota: Las pestañas por defecto tienen transparencia, asi que puedes usar un fondo interesante y mejorar la presentación.
   
   


3. Después, vas a la edición de HTML de la la plantilla, expandes plantillas de artilugios y buscas el código del gadget de las etiquetas mismo que podrás identificar si lo buscas usando el título que le pusiste con la ayuda de Ctrl + F. Lo que nos interesa es esta parte:
   
   
   
   <b:if cond='data:display == &quot;list&quot;'>    <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>
   
              
   
   


4. En el código anterior, identifica las lineas que resalté de negrita y con fondo azul, y las cambias por éstas:
   
   

   
   
   
    <b:if cond='data:display == &quot;list&quot;'>
   
         <ul>
   
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
   
               <li><a class='seleccionado' expr:href='data:blog.homepageUrl'>Inicio</a></li>
   
   <b:else/>
   
   <li><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
   
   </b:if>
   
   <b:loop values='data:labels' var='label'>
   
                <li>
   
                  <b:if cond='data:label.name == data:blog.searchLabel'><a class='seleccionado' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

   
   Con el código anterior, estamos agregando un enlace a la página principal (Inicio) y con una condicional de Blogger, destacamos dicho enlace cuando estemos en la página principal. Estamos agregando una clase que identificará al enlace seleccionado. Además, estamos cambiando la condicional en las páginas de etiquetas para que no se pierdan las propiedades declaradas en el CSS de la clase agregada para el enlace seleccionado. Puedes cambiar el texto "Inicio" de la página principal, por el que quieras.
   
   


5. Por último, verificas en vista previa que todo luzca bien, y si es así, guarda los cambios en Guardar plantilla.

Y ¡listo!, ya tienes un menú de navegación con pestañas usando el gadget de las etiquetas, al estilo Google Play ;D



Recomendaciones:

Se recomienda éste menú para blogs que usen algún tipo de resumen en las entradas, de ese modo será mas rápido navegar entre las páginas de etiquetas. O bien, personalizar las páginas de etiquetas para que éstas muestren algún tipo de resumen.



Compatibilidad

Este menú funciona en todos los navegadores incluyendo la antigua versión de Internet Explorer: IE7 (Internet Explorer 7).



Notas adicionales

• Si lo prefieres, puedes agregar el menú arriba de las entradas, y para ello deberás arrastrar el gadget y ponerlo arriba de la sección de las entradas del blog, en tal caso, no será necesario habilitar una sección adicional en la cabecera, como se mencionaba al principio.


• Si es el segundo gadget de etiquetas que usas, deberás cambiar #Label1 por #Label2 en el CSS (paso 2).

Espero que sea útil, y sigamos disfrutando de las fiestas ;)

Menú horizontal con subpestañas en dos columnas

Este menú pertenece a la plantilla Johny Joss, es un menú horizontal en el que sus subpestañas se muestran en dos columnas y que además está hecho con CSS, sin nada de scripts.

La "ventaja" por así decirlo, es que las subpestañas al acomodarse en dos columnas no quedan muy largas, así que se verán ordenadas y con menos espacio a lo largo. Puedes ver un ejemplo aquí mismo:

• Pestaña 1
• Pestaña 2
• Pestaña 3
  
  • Pestaña 3.1
  • Pestaña 3.2
  • Pestaña 3.3
  • Pestaña 3.4
  • Pestaña 3.5
  • Pestaña 3.6
• Pestaña 4
  
  • Pestaña 4.1
  • Pestaña 4.2
  • 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
  • Pestaña 5.4
  • Pestaña 5.5
  • Pestaña 5.6
  • Pestaña 5.7
  • Pestaña 5.8
• Pestaña 6

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.

Para poner este menú entra en la Edición HTML y antes de ]]></b:skin> pega los estilos CSS:

/* Menú horizontal con subpestañas en dos columnas
----------------------------------------------- */
#toppic {
width:940px; /* Ancho del menú */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Ancho del menú */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Color del texto de las pestañas */
}
#top a:hover {
background:#2f558b; /* Color de las pestañas al pasar el cursor */
color:#c5fa6f; /* Color del texto de las pestañas al pasar el cursor */
}
#top a.trigger {
/* Flecha */
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00Hfbu980n2gWPPXV1yTQYPkWMgnNjDTAZTktdo09utxERedEpXN72uWWX_p9xerXaPd59fr9CTgjRshRQTDNKxFf2b-LAuIwkU57-iiSRAnpj6VZMEyRpWkOjDqvPbKr069wi_4Ud-0/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Ancho del contenedor de las subpestañas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Color de fondo del contenedor de las subpestañas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Ancho de cada subpestaña */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Color del texto de los submenús */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Color del texto de los submenús al pasar el cursor */
}

Ahora entra en Diseño, y en un elemento HTML/Javascript pega la estructura del menú:

<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL del enlace'>Pestaña 1</a></li>
<li><a href='URL del enlace'>Pestaña 2</a></li>
<li><a class='trigger' href='#'>Pestaña 3</a>
<ul>
<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>
<li><a href='URL del enlace'>Pestaña 3.5</a></li>
<li><a href='URL del enlace'>Pestaña 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Pestaña 4</a>
<ul>
<li><a href='URL del enlace'>Pestaña 4.1</a></li>
<li><a href='URL del enlace'>Pestaña 4.2</a></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><a class='trigger' href='#'>Pestaña 5</a>
<ul>
<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>
<li><a href='URL del enlace'>Pestaña 5.4</a></li>
<li><a href='URL del enlace'>Pestaña 5.5</a></li>
<li><a href='URL del enlace'>Pestaña 5.6</a></li>
<li><a href='URL del enlace'>Pestaña 5.7</a></li>
<li><a href='URL del enlace'>Pestaña 5.8</a></li>
</ul>
</li>
<li><a href='URL del enlace'>Pestaña 6</a></li>

</ul>
<br class='clearit'/>
</div>
</div>

Cambia las URLs de los enlaces y de las pestañas donde se indica.

Si quisieras agregar más pestañas entonces añade antes del </ul> en color azul una línea como esta:

<li><a href='URL del enlace'>Otra pestaña</a></li>

Y si quisieras agregar una pestaña con subpestañas entonces agrega esto:

<li><a class='trigger' href='#'>Otra pestaña</a>
<ul>
<li><a href='URL del enlace'>Pestaña 1.1</a></li>
<li><a href='URL del enlace'>Pestaña 1.2</a></li>
<li><a href='URL del enlace'>Pestaña 1.3</a></li>
<li><a href='URL del enlace'>Pestaña 1.4</a></li>
<li><a href='URL del enlace'>Pestaña 1.5</a></li>
<li><a href='URL del enlace'>Pestaña 1.6</a></li>
</ul>
</li>

En el primer código verás en las anotaciones en color verde el área de lo que se puede personalizar.

El color de fondo está hecho con gradientes CSS, #317FB8 es el color más claro y #385D96 el color más oscuro.

Si quisieras que las subpestañas se muestren en columnas de 3 entonces cambia el valor del
  /* Ancho del contenedor de las subpestañas */ por 450px

Cada pestaña tiene un ancho de 150px (ver la anotación en verde), por lo que si quisieras hacerlo más ancho tendrás que cambiar también el ancho del contenedor de las subpestañas, de lo contrario se mostrarán en una columna nada más.

Menú Moderno en 3D, usando el Gadget de Páginas Estáticas

En la entrada anterior, veíamos cómo crear un menú con iconos, usando la lista de enlaces de Blogger. Vamos a seguir con el tema de los menús de navegación, pensando en que es un elemento muy importante para el blog y además no tengo muchos publicados, así que es hora de ponernos a trabajar en ello.



Este menú tiene un look moderno, fresco y es en 3D. El estilo del menú, se asemeja mucho a los botones que usábamos para personalizar los enlaces de navegación de Blogger, ¿recuerdas?



Para crear este menú de navegación, vamos a usar el gadget de "Páginas", ya que éste tiene la característica de destacar el enlace seleccionado, cosa que también podemos hacer con el gadget de lista de enlaces modificando un poco el código, pero en este caso no habrá necesidad de hacerlo.





En la siguiente imagen puedes ver la apariencia que tendrá el menu, he destacado cómo se verá cada enlace respectivamente y sus componentes:

Haz click para ampliar

O puedes verlo en acción en la  Demostración



Ventajas y características

• Es compatible con IE7, IE8, IE9 y el resto de navegadores.


• Un diseño moderno en 3D, si te interesa la versión obscura del menú (la imagen) puedes tener el menú en formato PSD en Pixeden, página donde lo obtuve.


• Se destacará el enlace seleccionado (parece estar presionado)


• Podrás editar el ancho del blog completo sin tener que preocuparte por el tamaño de la imagen del menú, ya que esta compuesto por partes. (Aplicable en las plantillas del diseñador de plantillas)

IMPORTANTE. Como en el caso del menú anterior, necesitas habilitar la sección del header, para que muestre dos gadgtes. Otra opción es eliminar el CSS que corresponde a la sección del crosscol en las nuevas plantillas (la sección que esta arriba del contenido), ya que ahí vienen ciertos estilos definidos que afectarán los resultados del menú.



Pensado que harás lo primero, necesitarás ir a la Edición de HTML de la plantilla, y buscar esta linea código:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Deberás cambiar 1 por 2, y no por yes. Una vez hecho esto, verificas en vista previa y si todo luce bien, guarda los cambios.

Ahora podrás ver una nueva area punteada al ir a la sección de Diseño, y la verás arriba de la cabecera, y es ahí donde vas a agregar el gadget con la opción de "Páginas", y luego lo arrastrarás para que quede debajo de la cabecera, si ya lo usas, sólo la arrastras.

Hecho esto, empecemos a crear el menú paso a paso ;)





Paso 1. Agregar el CSS.

Primero Agregas el CSS,  yendo a Plantilla > Personalizar > Avanzado > Añadir CSS.

#header .widget{

margin:0;

}

#PageList1 ul{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VW9Hkdpjsqex_GeA5kusZIHllHA1Y2IWVy57vOdH8sNGdv5I3taUqW-Y1kKp1ZTh44QFXlfc8evsClml-x8l2Lp5MKH0HKvuSa8ibOjzG8NeXoJ_63kzT7uA-q_VEp2aGYdFySZOM_I/s1600/LI-REPEAT-menu.png) repeat-x;

width:100%;

margin:0;

height:48px;

position:relative;

left:-10px;

display:block;

overflow:visible;

}

.extremo-der{

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirt400mLObC2boj1LglA53spCVULCsTn6ZVeItDWUr-7bRTMWruEBiIgorlOa4NqU8uEs97RdBm2COZt8lwHdikpOUwfFlFwtgXZloGlC9EU1mouMBQ8fjkm7FVNm4RguZCYpzUPRKtYQ/s1600/menu-der.png);

position:absolute;

right:-10px;

top:0;

display:block;

width:8px;

height:48px;

}

#PageList1 ul li{

list-style:none;

float:left;

border-right: 1px solid #bbbcbc;

line-height:41px;

height:41px;

margin-top:0;

}

#PageList1 ul li a{

text-shadow:1px 1px 0 #fff;

display:block;

border-right: 1px solid #fcfcfc;

height: 40px;   

padding:0 8px;

color:#777;   

font-size: 1.0em;

font-weight:bold;

}

#PageList1 ul li:first-child{

text-indent:-9999px;

width:43px;

height: 48px;

border: none;

margin:0 0 0 -20px;

} 

#PageList1 ul li:first-child, #PageList1 ul li.selected:first-child{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWve8S1cHTt5w3_Zs1hToIiek9N_CSZ8kW9dcFL2KRfHqV8sQe8gpoK_0_94_Kwa_fPVoAA2d9WH1DGHPBnOj2puKAAPEOM9x6LwqPFW8zwCjpwKoZRXB6hQkIe3yN1xZhMGriM-OpZ4s/s1600/inicio-mm.png) no-repeat;

}

#PageList1 ul li:first-child a{

border:none;

}

#PageList1 ul li a:hover{

color: #679e1e;

text-decoration:none;

}

#PageList1 ul li.selected {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0OC5JFpRY95xrClmpgrGC0fIKLrWE7iL-rfF80DF3y85KOXyqO9rv6Iu_WApgjUuDY6h99jV1Kq2Yvai7J4WmizFX86lRkzxdpBot4J-Kn3MsKK4bMfk3wDprVNLwiYBetXairoW2mjg/s1600/selected-s.png) repeat-x;

}

#PageList1 ul li.selected a{

padding-top:2px;

color:#424242;

margin-top:2px;     

}

Nota: Si quieres cambiar el color de texto al poner el puntero del ratón encima del enlace, busca:

#PageList1 ul li a:hover{

color: #679e1e; 

text-decoration:none;

}

y cambia el color en: "color: #679e1e;". Puedes consultar esta tabla de colores.



Paso 2. Guarda los cambios en "Aplicar al blog".



Paso 3. Agregar el extremo derecho del menú (la imagen).



Ve a la edición de HTML de la plantilla, marcas la casilla de "expandir plantillas de artilugios" y con la ayuda de "Crtl F" (presionas la tecla "Ctrl" y la tecla "F" al mismo tiempo) buscas esta parte de código, pegando en el campo la linea que resalté de azul:



 <ul>

        <b:loop values='data:links' var='link'>

          <b:if cond='data:link.isCurrentPage'>

            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>

          <b:else/>

            <li><a expr:href='data:link.href'><data:link.title/></a></li>

          </b:if>

        </b:loop>

      </ul>




Debajo del cierre de la etiqueta ul, es decir, después de "</ul>" pegas esta linea de código:

<div class='extremo-der'/>

Hecho esto, ya deberá aparecer la imagen con el extremo derecho, y que hará que se vea completo en menú. (en el CSS esta definida está parte).



Podemos hacerlo sin tocar la edición de HTML de la plantilla, usando los selectores de CSS ":before" o ":after" , el problema es que el resultado no será visible en Internet Explorer 7, es decir, no se verá la imagen del extremo derecho (se verá "mocho" el menú), así que, si podemos hacer que se vea en esa versión del navegador, ¿por qué no hacerlo?



Paso 4. Verifica el resultado en vista previa y si todo luce bien, guarda los cambios. Listo ya tienes Instalado un menu en 3D en el blog ;)







Notas Importantes (por favor léelas)

1. La imagen que usé en el enlace seleccionado, tiene fondo de color blanco, si lo vas a usar por ejemplo en un fondo gris u otro color de fondo diferente, deberás editar la imagen que a continuación te facilitaré y que tiene fondo transparente, colocando el mismo color que usas como fondo. Cuando la abras en el editor como Paint.Net o Photoshop, te darás cuenta de lo que hablo. Debe tener el mismo color de fondo de donde sea colocado de otro modo no se verá bien.

2. Para evitar que desaparezca el gadget de páginas, (ya me han comentado que tienen  problemas con eso), no guardes los cambios en "Guardar disposición" al agregar una Dirección Web, cuando está seleccionada la opción "no mostrar" en: "Mostrar páginas como".



3. No le pongas título al gadget de páginas, de ese modo evitamos usar mas lineas de CSS para ocultarlo.



Si no estas familiarizado con la opción de Blogger de páginas estáticas, echa un vistazo a este post.



Te recomiendo almacenar las imágenes por ti mismo, para evitar problemas en el tiempo de carga, entre otros.

Un Menú con Iconos usando el Gadget de Lista de Enlaces

Una de las cosas que más me gusta de Blogger es la posibilidad de añadir gadgets a la plantilla desde la sección de Diseño. Esto le permite a cualquier usuario agregar elementos fácilmente a su blog.

Todos esos elementos como la lista de enlaces, el cuadro de búsqueda, ente otros,  resultan muy útiles cuando le vamos dando forma a nuestro blog, y podemos personalizarlos fácilmente con CSS y en la mayoría de los casos, sin necesidad de ingresar a la edición de HTML de la plantilla.



Bueno, pues hoy vamos a personalizar el gadget de "Lista de enlaces", y lo usaremos para crear un menú horizontal con iconos. En el ejemplo que voy a darte, la apariencia de los enlaces será tal y como puedes ver a continuación:

También puedes ver el resultado en acción en la Demostración



Existen muchas posibilidades para lograrlo, pero en esta ocasión, agregaremos las imágenes de los iconos de forma separada, luego veremos como hacerlo con la técnica de sprite.



Para quienes quieran ahondar en el tema, esto lo lograremos usando algunos (1) selectores avanzados (2) first-child selector, que son soportadas por la mayoría de navegadores incluyendo el viejo IE7 (no IE6), y algunas propiedades de CSS3, que ya son soportadas por Internet Explorer 9.



Podrás agregar los enlaces fácilmente sin temor a equivocarte, ya que no tocarás el código que genera los enlaces con sus respectivos iconos. En el ejemplo, voy a colocar el menú entre la cabecera y el contenido.



¿Suena interesante?, entonces veamos como hacerlo:



En el ejemplo usé sólo tres enlaces diferentes, claro que tu puedes usar los enlaces que necesites, sólo tendrás que poner atención en el CSS que usarás, para que el enlace coincida con la imagen respectivamente. Es sencillo ya lo verás ;)



IMPORTANTE. Para las nuevas plantillas de Blogger o aquellas que no cuenten con una sección arriba del contenido, recomiendo ampliamente agregar el menú en la sección de la cabecera, NO en la sección que Blogger dispuso para la lista de páginas estáticas en las nuevas plantillas, y que se encuentra debajo de la cabecera. Para ello, necesitas ir a la Edición de HTML de la plantilla, y buscar esta linea código:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Deberás cambiar 1 por 3, y no por yes. Una vez hecho esto, verificas en vista previa y si todo luce bien, guarda los cambios.



Ahora podrás ver una nueva area punteada al ir a la sección de Diseño, y la verás arriba de la cabecera, y es ahí donde vas a agregar el gadget con la opción de "Lista de enlaces", y luego lo arrastrarás para que quede debajo de la cabecera.

Cómo hacerlo paso a paso



Paso 1. Agrega un gadget desde la sección de la cabecera (ver arriba donde dice IMPORTANTE), eligiendo la opción "Lista de enlaces"

y agrega los enlaces que necesites. Al terminar, guarda los cambios:

Paso 2. Arrastra el gadget de lista de enlaces que agregaste, para que quede debajo de la cabecera:

Paso 3. Agregar y editar el CSS.

Vas a Plantilla > Personalizar > Avanzado  > Añadir CSS, y en el campo agrega el CSS que tendrás que editar para adecuarlo a tus enlaces.

#header .widget{

margin: 5px 0;

}

#LinkList2 ul{

width:100%;

margin:0;

}

#LinkList2 ul li{

list-style:none;

float: left;

margin-right:12px;

display: block;

height: 50px;

padding: 4px 3px;

border-radius: 5px;

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border: 1px solid #ccc;

}

#LinkList2 ul li a{

line-height:90px;

color:#4f4f6f;

display:block;

text-align:center;

text-shadow:1px 0px 1px #fff;

}

#LinkList2 ul li:first-child{

background: #d3d3d5 url(URL_DEL_ICONO_DEL_PRIMER_ENLACE) 

no-repeat center top;
width: 60px;

}

#LinkList2 ul li:first-child + li{

background: #d3d3d5 url(URL_DEL_ICONO_DEL_SEGUNDO_ENLACE) 

no-repeat center top;
width: 60px;

}

#LinkList2 ul li:first-child + li + li{

background: #d3d3d5 url(URL_DEL_ICONO_DEL_TERCER_ENLACE) no-repeat center top;

width: 74px;

}

#LinkList2 ul li a:hover{

text-decoration:none;

}

#LinkList2 ul li:hover{ /*la sombra en el hover*/

-webkit-box-shadow: 0 8px 6px -6px #000aaa;

-moz-box-shadow: 0 8px 6px -6px #000aaa;

box-shadow: 0 8px 6px -6px #000aaa;

border: 1px solid #a1a1a4; /*el color del borde*/

}

Explicación del CSS

He resaltado de negro las propiedades mínimas en donde tendrás que editar los valores que están de rojo.



Empecemos con #LinkList2 ul li





En:

margin-right:12px; especificamos el margen a la derecha de cada elemento (cada enlace) con el icono, así los separamos.





En:

height: 50px; especificamos el alto que tendrá cada elemento (cada enlace) con el icono. Se aplica a todos.



con: 

border-radius: 5px;  

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

...creamos esquinas redondeadas, el valor debe ser el mismo, y es para que se vea en la mayoría de navegadores. Funciona en navegadores modernos y en Internet Explorer 9, mas no en IE8 e IE7. 

En:

border: 1px solid #ccc; 

Especificamos el color de borde, grosor, y estilo. #ccc, es un tono gris.

Seguimos con:  #LinkList2 ul li a

En:

line-height:90px;

Hacemos que el texto del enlace se vaya hacia abajo.

En:

color:#4f4f6f;

Especificamos el color del texto del enlace.

Con:

text-shadow:1px 0px 1px #fff;

Creamos la sombra en el texto, que en el ejemplo se ve semi hundido.

Seguimos con: #LinkList2 ul li:first-child

Con el CSS anterior, especificamos que aplicaremos el CSS en el primer elemento (primer enlace), que en el ejemplo es el enlace que dice Inicio.

En: 

background: #d3d3d5 url(URL_DEL_ICONO_DEL_PRIMER_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el primer elemento o nuestro enlace y su posición dentro del la cajita, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 60px;

Especificamos el ancho del primer elemento. (la cajita gris con el icono). Mide 60 pixeles de ancho.

Seguimos con: #LinkList2 ul li:first-child + li

Con la linea de CSS anterior, especificamos que aplicaremos el CSS en el segundo elemento (segundo enlace), que en el ejemplo es el enlace que dice Android.

En:

background: #d3d3d5 url(URL_DEL_ICONO_DEL_SEGUNDO_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el "segundo elemento" o segundo enlace; definimos su posición dentro de la cajita contenedora, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 60px;

Especificamos el ancho del segundo elemento. (la cajita gris con el icono). Mide 60 pixeles de ancho.

Seguimos con: #LinkList2 ul li:first-child + li + li

Con el CSS anterior, especificamos que aplicaremos el CSS en el tercer elemento (tercer enlace), que en el ejemplo es el enlace que dice Fotografías.

En:

background: #d3d3d5 url(URL_DEL_ICONO_DEL_TERCER_ENLACE) no-repeat center top;

Especificamos el color de fondo del elemento (que en el ejemplo es gris), y el icono que llevará el "tercer elemento" o nuestro tercer enlace y su posición dentro del la cajita, y evitamos que se repita (con no-repeat). #d3d3d5 es el color de fondo.

En:

width: 74px;

Especificamos el ancho del tercer elemento. (la cajita gris con el icono). Mide 74 pixeles de ancho.





Agregar más enlaces con iconos

Pero, ¿cómo hacer si necesito más enlaces con iconos?

Es sencillo sólo repites el último bloque de CSS que identifica al último enlace, y lo pones exactamente debajo de éste.

#LinkList2 ul li:first-child + li + li +li{

background: #d3d3d5 url(URL_DEL_ICONO) no-repeat center top;width: 74px;}

Agregas +li    (como se aprecia en el bloque anterior) cada vez que necesites un nuevo enlace con icono. Editas los valores tomando en cuenta la explicación del CSS. El código anterior serviría para un cuarto enlace con su icono.

Si ocuparas un quinto enlace con su icono, entonces tendrías que usar algo así:

#LinkList2 ul li:first-child + li + li +li +li{background: #d3d3d5 url(URL_DEL_ICONO) no-repeat center top;width: 74px;}

...y así sucesivamente.

Paso 4. Una vez conseguidos los resultados que buscas, haces click en "Aplicar al Blog" para guardar los cambios.

Notas Adicionales

Y ¿qué con Internet Explorer, también funcionará?

Sí funcionará, excepto por algunas propiedades de CSS3 que no funcionan en versiones viejas de ese navegador, como IE8 e IE7. No en IE6.

Es así como luce el menú en IE7 e IE8, como puedes comprobar en el mismo navegador.

Nota importante: He identificado el widget como #LinkList2, esto suponiendo que es el segundo, si fuera el primero, sería #LinkList1, Blogger los va numerando sucesivamente.



Cualquier observación, o experiencia que quieras compartir sobre el tema no olvides en comentarla ;)



Los iconos que usé los puedes descargar en Might Deals, son 200 en total y por supuesto son gratis ;)