Personaliza tu plantilla Blogger: añade un menú con diseño web adaptativo para tu Blog.

Crear menús para un Blog es una tarea esencial para estructurar nuestros contenidos adecuadamente. Para hacerlo tienes ejemplos de menú sencillo de un sólo nivel o de varios niveles con subopciones que cumplen perfectamente con su función.

Podemos ahora ir un paso más allá y montar un menú para nuestro Blog desarrollado con HTML5 y CSS3, que se adapte a cualquier resolución y entorno con el que nuestros usuarios estén trabajando. Con un diseño web adaptable (responsive web design), elegante, fácil de utilizar y discretamente vistoso que permita lucir tus entradas aprovechando hasta el último milímetro del navegador donde se dibuje.

Si estás cansado de menús estáticos y quieres añadir un toque de dinamismo a la presentación de tu Blog sin apabullar al usuario, aprovechando el espacio del cual dispones para mostrar tus entradas, este menú vertical te convencerá por su facilidad de uso y funcional diseño.

Demostración en miniatura del menú en funcionamiento:

Este menú es una creación disponible en http://tympanus.net/Coddrops, una sitio puntero en diseño y desarrollo de recursos para páginas web. Te recomiendo encarecidamente la visita para que admires el excelente trabajo que realizan y cómo se ofrece a la comunidad con distintos niveles de licencias Creative Commons. El menú está basado en la demostración 5 de Animated Border Menus by MARY LOU.

Tal como informa su propia creadora, el diseño con transiciones y animaciones que se ejecutan sobre partes de los elementos del menú no funcionarán en todos los navegadores:

"Please note that we’ll be using transitions and animation on pseudo-elements which won’t work in some browsers (e.g. Safari and Mobile Safari)." Algunas versiones antiguas de Internet Explorer, navegadores de móviles "de serie", etc... En mis pruebas funciona perfectamente en los navegadores más utilizados Chrome, Firefox, Explorer (también en sus versiones móvil o tablet), etc... 

Haz "clic" en las tres líneas horizontales de la parte superior derecha de la demostración para visualizar el menú.

La guía para implementarlo en tu Blog:

Estos apartados iniciales están destinados a los más noveles en la materia o que desconocen los términos informáticos empleados en el diseño y desarrollo de webs, que desean aprender lo mínimo para comprender lo que están tocando. Si ya tienes experiencia, puedes saltarte esta parte e ir directamente a la guía paso a paso en los epígrafes posteriores. 

Coceptos previos, ¿Qué vamos a hacer?:

• Vamos a trabajar con un menú vertical en Blogger elaborado con diseño web adaptable, también conocido como responsive web design. El menú será capaz de adaptarse al entorno del usuario (ordenador, móvil, tableta) independientemente de la resolución o formato con el que esté trabajando, siempre que su navegador sea compatible con dicha tecnología y forma de implementarse.

• Añadiremos a la plantilla de Blogger las hojas de estilo, código Javascript y funciones necesarias para que funcione en nuestro Blog.

¿Qué conceptos vamos a manejar?:

Si estás familiarizado con la utilización de hojas de estilo puedes saltarte esta parte de la entrada y pasar directamente a la guía.

Las hojas de estilo (.css)

Con cualquier publicación web, las páginas web basan su presentación fundamentalmente en hojas de estilo. Esta clase de archivos tienen la extensión .css: Hojas_de_estilo_en_cascada. Contienen la información semánticamente construida de los elementos que en la página HTML constituirán el aspecto y el formato de los componentes que integran dicha página.  

Es decir, son archivos externos que le dicen a cada componente que utilizamos en nuestra página web (cajas de texto, títulos, comentarios, etc...) qué formato deben tener para darle un "estilo", una presentación.  

Establecen, por citar ejemplos simples que puedan comprenderse al instante, el espaciado entre caracteres, el margen entre un marco y el texto, el color que se va a utilizar en las letras...

En cualquier publicación web se incluyen primero, antes del cierre de la etiqueta </head> para que luego el resto del código pueda referenciarlas. 

Se pueden ver en el HTML de cualquier sitio web porque quedan declaradas de la siguiente forma: <link href='URL_A_LA_CSS' rel='stylesheet' type='text/css'/>.Donde URL_A_LA_CSS es la dirección donde se encuentra almacenada la hoja de estilos que estamos utilizando.

Las hojas de estilo en Blogger: 

La Plantilla de Blogger, el XML y el HTML:

Es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web".  

Es decir, simplificando sin entrar en tecnicismos: la plantilla contiene el contenido del blog "resumido" en un lenguaje de etiquetas extendido (el XML) que luego, cuando se ejecuta en el ordenador de los usuarios, se interpreta en el lenguaje que sus navegadores entienden (el HTML).  

Etiqueta <b:skin><![CDATA[TUS_ESTILOS]]></b:skin>:

En Blogger el contenido de las hojas de estilo en la plantilla se suelen indicar antes de que cierre la etiqueta "</head>".  Entre medias de la etiqueta <b:skin> y </b:skin>, escribirás dentro de <![CDATA[ ]]> los estilos con los que trabaja la plantilla.

 El JavaScript 

La Wikipedia lo define como: "JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,³ basado en prototipos, imperativo, débilmente tipado y dinámico. 

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas⁴ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo."   

Simplificando técnicamente una vez más: es un lenguaje de programación que enriquece con funcionalidad a los componentes que componen nuestro Blog. Esta funcionalidad es muy variada, por ejemplos sencillos: con JavaScript se puede calcular el número de visitas, se pueden validar campos de un formulario para saber si tienen la longitud adecuada, podemos hacer que un botón una vez pulsado ejecute una determinada tarea... permite a nuestros componentes de la página seguir un guión, "programar" "qué van a hacer" cuando se les utilice.  

Antes de comenzar la guía ten en cuenta:

MUY IMPORTANTE: Recomendaciones y omisión de responsabilidad:

Si eres un usuario con nulos conocimientos en HTML, CSS y JavaScript, la implementación de este código puede resultarte compleja. 

Es por ello que se hace fundamental conocer qué se está cambiando y qué consecuencias puede tener en caso de no disponerse de los conocimientos adecuados. Los usuarios más experimentados siempre pueden disponer de la herramienta de copia de seguridad del Blog para en caso de problemas poder volver a la situación inicial.

No me responsabilizo de los daños que puedas sufrir en tu Blog o sitio web por el uso incorrecto de estas soluciones o los archivos descargados en tu ordenador.

Si bien es un código completamente funcional como se puede apreciar en las demostraciones debes tener en cuenta que su funcionamiento en producción no está certificado y que ha sido creado con fines demostrativos.

Paso a paso, insertando el menú de diseño adaptativo (responsive design) en Blogger:

FASE I: Subiendo el menú a tu Google Drive para utilizarlo en tu Blog

En esta primera parte vamos a utilizar el código de la demostración para subirlo a Drive y utilizarlo después en nuestro blog "apuntando" a nuestro Google Drive para manejar los recursos que no podemos subir a Blogger.

1) Si lo deseas puedes utilizar el código original de la web donde se encuentra la demostración: http://tympanus.net/Coddrops. No obstante en esta dirección Drive pongo a tu disposición el código retocado por mí para quedaros exclusivamente con los elementos que van a intervenir para dibujar el menú:

https://googledrive.com/host/0Bwgc28XHjPA2bWF6NHdxNUdDQmM

2) Renombra el archivo descargado a NOMBRE_QUE_DESEES.ZIP y extráelo en tu disco duro. De esta manera tendrás la estructura de directorios con la que yo he trabajado.

3) Sube a tu Google Drive la carpeta descomprimida para utilizar sus archivos en tu Blog.

 3.1 Conéctate a Drive https://drive.google.com/ y una vez dentro pulsa el botón de la flecha roja que hay a la derecha del botón "crear" en el menú izquierdo. Te he marcado el botón con un recuadro azul en la imagen inferior de Drive:

3.2 Ahora sube la carpeta que hayas creado seleccionando el botón de la flecha y pulsando en la opción "Carpeta". Después, ya tendrás disponible tu carrusel al completo en Drive:

• Cuando subas la carpeta con todos los archivos asegúrate que está compartida como Público. Si no la compartes, no se dibujará. Deberás seleccionar "Public" en la sección "Who has access" tal como te muestro en pantalla.

• Además cópiate el código que te he marcado cuando compartas. Es el código identificativo único que Drive asignará a tu carpeta para que puedas compartirla, lo utilizaremos después en los próximos pasos:

3.3 Ahora prueba tu carpeta. Escribe en el navegador el código identificativo que te ha asignado Google Drive al compartir la carpeta. En mi caso es este:  

https://googledrive.com/host/0Bwgc28XHjPA2bWF6NHdxNUdDQmM 

Recuerda que el código identificarivo debe ir precedido de https://googledrive.com/host/ para que se llame a la "Index.html" que contiene el menú. Si todo está ok, ya estás listo para meter el menú en tu Blog.

FASE II: Implementando el menú en tu Blog

En esta segunda parte, implementamos el código del menú en nuestro Blog apuntando a los recursos en Google Drive que no se pueden subir a Blogger.

1)  En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.

2) Dirígete dentro de Blogger, en el menú de la izquierda a Plantilla y después al botón "Editar HTML" para introducir el código necesario en la plantilla para que se dibuje el menú.

3) Pulsa en Editar HTML y busca pulsando CONTROL + F las etiquetas <b:skin><![CDATA. En Blogger CDATA contendrá las hojas de estilo. Copia y pega el código CSS, asegúrate que termina antes de que cierres la etiqueta CDATA con ]]></b:skin> 

Conviene que las imágenes y todas las URLs de Drive las apuntes a la dirección que te proporcione la herramienta de almacenamiento de Google para que utilices las tuyas propias y no las de mi Drive. Te marco en rojo la URL que debes cambiar por la tuya, la que te dió Drive en la FASE I.

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container1 {
padding: 80px;
}
.bt-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
border-width: 0px;
border-style: solid;
border-color: #333;
background-color: rgba(0,0,0,0);
-webkit-backface-visibility: hidden;
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}
.bt-menu.bt-menu-open {
height: 100%;
border-width: 0px 0px 50px 150px;
background-color: rgba(0,0,0,0.3);
-webkit-transition: border-width 0.3s, background-color 0.3s;
transition: border-width 0.3s, background-color 0.3s;
}
.bt-overlay {
position: absolute;
width: 100%;
}
.bt-menu-open .bt-overlay {
height: 100%;
}
.bt-menu-trigger {
position: fixed;
top: 10px;
left: 20px;
z-index: 100;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 8%;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
position: absolute;
left: 0;
width: 100%;
height: 100%;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.bt-menu-trigger span:before {
-webkit-transform: translateY(-250%);
transform: translateY(-250%);
}
.bt-menu-trigger span:after {
-webkit-transform: translateY(250%);
transform: translateY(250%);
}
.bt-menu-open .bt-menu-trigger span:before {
-webkit-transform: translateY(-300%);
transform: translateY(-300%);
}
.bt-menu-open .bt-menu-trigger span:after {
-webkit-transform: translateY(300%);
transform: translateY(300%);
}
.bt-menu ul {
position: fixed;
margin: 0;
padding: 0;
list-style: none;
}
.bt-menu ul:first-of-type {
top: 75px;
left: 0;
}
.bt-menu ul:nth-of-type(2) {
right: 0;
bottom: 0;
}
.bt-menu ul li,
.bt-menu ul li a {
display: block;
}
.bt-menu ul:nth-of-type(2) li {
float: left;
font-size: 0px;
}
.bt-menu ul li {
visibility: hidden;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
}
.bt-menu.bt-menu-open ul:first-of-type li,
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
transition: transform 0.3s, opacity 0.3s;
}
/* First menu */
.bt-menu ul:first-of-type li {
width: 150px;
height: 50px;
line-height: 50px;
-webkit-transform: translate3d(-100%,50%,0);
transform: translate3d(-100%,50%,0);
}
.bt-menu.bt-menu-open ul:first-of-type li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
/* Second menu */
.bt-menu ul:nth-of-type(2) li {
width: 60px;
height: 50px;
line-height: 50px;
-webkit-transform: scale(0);
transform: scale(0);
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:first-child {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(2) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(3) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li:nth-child(4) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.bt-menu.bt-menu-open ul:nth-of-type(2) li {
-webkit-transform: scale(1);
transform: scale(1);
}
.bt-menu ul li a {
display: block;
outline: none;
text-decoration: none;
}
.bt-menu ul:first-of-type li a {
padding: 0 20px;
box-shadow: inset 0 1px rgba(0,0,0,0.2);
color: #fff;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 1em;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul:first-of-type li:last-child a {
box-shadow: inset 0 1px rgba(0,0,0,0.2), inset 0 -1px rgba(0,0,0,0.2);
}
.bt-menu ul:nth-of-type(2) li a {
color: transparent;
text-align: center;
font-size: 0px;
}
.bt-menu ul li a:before {
color: #fff;
font-size: 24px;
-webkit-transition: color 0.2s;
transition: color 0.2s;
}
.bt-menu ul:first-of-type li a:hover,
.bt-menu ul:first-of-type li a:focus,
.bt-menu ul li a:hover:before,
.bt-menu ul li a:focus:before {
color: #1abc9c;
}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
@charset "UTF-8";
@font-face {
  font-family: "minicons-webalys";
  src:url("https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/minicons-webalys.eot");
  src:url("https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/minicons-webalys.eot?#iefix") format("embedded-opentype"),
    url("https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/minicons-webalys.ttf") format("truetype"),
    url("https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/minicons-webalys.svg#minicons-webalys") format("svg"),
    url("https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/minicons-webalys.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'FontAwesome';
  src:url('https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/FontAwesome.eot');
  src:url('https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/FontAwesome.eot?#iefix') format('embedded-opentype'),
    url('https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/FontAwesome.woff') format('woff'),
    url('https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/FontAwesome.ttf') format('truetype'),
    url('https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/fonts/demoicons/FontAwesome.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}
.bt-icon:before,
.bt-icon-alt:before {
  font-family: "minicons-webalys";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none !important;
  speak: none;
  display: inline-block;
  text-decoration: none;
  width: 1em;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
}
.bt-icon-alt:before {
  font-family: "FontAwesome";
}
.icon-window-delete:before {
  content: "\e000";
}
.icon-download:before {
  content: "\e002";
}
.icon-home:before {
  content: "\e003";
}
.icon-calendar:before {
  content: "\e004";
}
.icon-folder-add:before {
  content: "\e001";
}
.icon-windows:before {
  content: "\e008";
}
.icon-volume:before {
  content: "\e00e";
}
.icon-speaker:before {
  content: "\e011";
}
.icon-star:before {
  content: "\e012";
}
.icon-sun:before {
  content: "\e014";
}
.icon-trash:before {
  content: "\e018";
}
.icon-zoom:before {
  content: "\e005";
}
.icon-user-outline:before {
  content: "\e006";
}
.icon-picture:before {
  content: "\e007";
}
.icon-phone:before {
  content: "\e009";
}
.icon-newspaper:before {
  content: "\e00a";
}
.icon-printer:before {
  content: "\e00b";
}
.icon-microwave:before {
  content: "\e00c";
}
.icon-refresh:before {
  content: "\e00d";
}
.icon-lock:before {
  content: "\e00f";
}
.icon-email:before {
  content: "\e010";
}
.icon-browser:before {
  content: "\e013";
}
.icon-bubble:before {
  content: "\e015";
}
.icon-calculator:before {
  content: "\e016";
}
.icon-cd:before {
  content: "\e017";
}
.icon-enter:before {
  content: "\e019";
}
.icon-file-add:before {
  content: "\e01a";
}
.icon-flag:before {
  content: "\e01b";
}
.icon-twitter:before {
  content: "\e01c";
}
.icon-gplus:before {
  content: "\e020";
}
.icon-github:before {
  content: "\e021";
}
.icon-facebook:before {
  content: "\e01d";
}
/* Font Awesome */
.icon-step-backward:before {
  content: "\f048";
}
.icon-backward:before {
  content: "\f04a";
}
.icon-pause:before {
  content: "\f04c";
}
.icon-stop:before {
  content: "\f04d";
}
.icon-forward:before {
  content: "\f04e";
}
.icon-step-forward:before {
  content: "\f051";
}
.icon-play:before {
  content: "\f04b";
}

Las URLs Drive en rojo debes cambiarlas por las direcciones a la carpeta compartida donde subiste el menú y todos los recursos para que se dibuje.

4) Ahora busca de nuevo pulsando CONTROL + F las etiquetas  <div class='content'> e inmediatamente debajo copia y pega el código para editarlo después según el menú que desees construir:

<div class='container1'>
<nav class='bt-menu' id='bt-menu'>
<a class='bt-menu-trigger' href='#'><span>Menu</span></a>
<ul>
<li><a href='/search/label/concepto_agrupador'>About us</a></li>
<li><a href='#'>Work</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>Contact</a></li>
</ul>
<ul>
<li><a class='bt-icon icon-twitter' href='http://www.twitter.com/xxxxxxx'>Twitter</a></li>
<li><a class='bt-icon icon-gplus' href='https://plus.google.com/xxxxxxxx'>Google+</a></li>
<li><a class='bt-icon icon-facebook' href='http://www.facebook.com/pages/xxxxxxxxxx>Facebook</a></li>
<li><a class='bt-icon icon-github' href='xxxxxxxxxxx'>icon-github</a></li>
</ul>
</nav>
</div><!-- /container -->

4.1 En primer lugar, los href de la parte inferior que referencian a facebook de coddrops, twitter, etc... así como los iconos que han utilizado debes cambiarlos para utilizar tu propio perfil Facebook, Twitter, etc...

4.2   Cada <li><a href='/search/label/concepto_agrupador'>About us</a></li> Contiene la llamada a la función "search" que localizará etiquetas "label" por el concepto agrupador que será la opción de menú. El literal "About us" de la demo lo podrás cambiar por el que necesites utilizar:

 <li><a href="Direccion_blog/search/label/concepto_agrupador">Opción_de_ Menu</a></li>

• Dentro de la etiqueta "<ul>" hasta "<ul>" metemos las opciones de menú que vamos a tener.
• Creamos una tupla de "a href" y Opción_de_Menu por cada opción de menú que deseamos crear. En cada un de los a href se pondrá la dirección de nuestro blog seguido de "/search" seguido de "/label" y seguido del "concepto agrupador" de entradas de nuestro blog por el que queremos que cuando el usuario pulse la opción, se busquen en el blog aquellos contenidos que pertenecen a dicho concepto agrupador.

Por ejemplo quedaría algo así con el menú de un hipotético blog con una estructura parecida a la mía:

<a class='bt-menu-trigger' href='#'><span>Menu</span></a>
<li><a href="http://Ejemplo.blogspot.com">Inicio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/tecnologia">Tecnología</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/ocio">Ocio</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/opinion">Opinión</a></li>
<li><a href="http://Ejemplo.blogspot.com/search/label/consumo">Consumo</a></li>
</ul>

•  En el ejemplo, se llama a la página principal del blog que dibujará todas las entradas en el orden que las vamos creando como siempre.
• Luego se presenta cada opción de menú con su concepto agrupador de entradas que el usuario no verá. Así, cuando el usuario haga "clic" sobre "Tecnología" por ejemplo, estará haciendo una búsqueda que agrupa todas aquellas entradas que contengan la etiqueta "tecnología" en su interior. Así mismo sucedería con las sucesivas opciones de menú.
• Después la sección:

<ul><li><a class='bt-icon icon-twitter' href='http://www.twitter.com/xxxxxxx'>Twitter</a></li><li><a class='bt-icon icon-gplus' href='https://plus.google.com/xxxxxxxx'>Google+</a></li><li><a class='bt-icon icon-facebook' href='http://www.facebook.com/pages/xxxxxxxxxx>Facebook</a></li><li><a class='bt-icon icon-github' href='xxxxxxxxxxx'>icon-github</a></li></ul>

• Te sirve para añadir tu perfil de Twitter, Facebook, etc... de manera que cuando el usuario pulse en ellos, conecte contigo en las redes sociales.

5) Ya sólo queda añadir los js (Javascript) que gobernarán el menú y sus animaciones. Pulsando CONTROL +F busca la etiqueta </body> inmediatamente después añade:

  <script src='https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/js/classie.js'/>
<script src='https://googledrive.com/host/0Bwgc28XHjPA2ekNJRkxTeEhZd2c/js/borderMenu.js'/>

Donde cada .js es el archivo que contiene las funciones Javascript que manejan el menú. Las URLs Drive en rojo debes cambiarlas por las direcciones a la carpeta compartida donde subiste el menú y todos los recursos para que se dibuje.

Finalmente, pulsa "Guardar Plantilla" y realiza tus pruebas para probar el menú. ¡Eso es todo!, ahora disfruta de un diseño a la última para tu Blog.