Ante todo, organización
sábado, octubre 29, 2011Gracias a El escaparate de Rosa y Ciudad Blogger he podido colocar en la cabecera del blog un menú desplegable con varias opciones. En este post voy a hacer un "refrito" con todos los pasos que he seguido para poder poner el menú, ya que antes de seguir los pasos del primer blog tuve que adaptar la plantilla. Si quieres poner un menú horizontal en tu blog de Blogger, siguiendo estas instrucciones puedes lograrlo.
Aunque en un primer momento puede parecer complicado, tan sólo hay que tocar varios códigos y podemos usar el menú rápidamente. Como siempre recomiendo, antes de tocar nada es mejor hacer una copia de seguridad del código del blog por si borramos algo que no debemos. Se puede hacer a través de Diseño - Edición HTML - Descargar plantilla. Una vez hecha la copia de seguridad ya podemos empezar a tocar.
En primer lugar hay que adaptar la plantilla para que pueda acoger cualquier tipo de menú. Así que entramos en Diseño - Edición de HTML y buscamos la línea
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
Una vez localizada, hay que eliminar el texto en negrita. Después, hay que buscar otra parte en la plantilla:
/* TabsY elimina todo lo que se encuentre en su interior justo hasta que encuentres /* Headings (esta palabra ya no se borra). En lugar del texto que se ha eliminado hay que añadir el siguiente texto:
----------------------------------------------- */
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
Una vez que hayamos hecho esto, ya podremos insertar cualquier tipo de menú. En este caso,voy a indicarte cómo añadir un menú igual que el que tengo en la parte superior de la web.
En primer lugar, sin expandir la plantilla de artilugios buscamos ]]></b:skin>: y justo antes, insertamos el siguiente código:
/* MENU DOS (Robs)
----------------------------------------------- */
#subnavbar {
background: #64343C;
width: 873px;
height: 27px;
font-weight:bold;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family:"Trebuchet MS";
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 11px;
text-transform: uppercase;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
border-left: 1px solid #FFFFFF;
}
#subnav li a:hover, #subnav li a:active {
background: #999999;
color: #000000;
display: block;
text-decoration: none;
margin: 0px 0px 0px 0px;
padding: 5px 10px 5px 10px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #64343C;
width: 120px;
heigth: 20px
float: none;
margin: 0px;
padding: 5px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #999999;
margin: 0px;
padding: 5px 10px 5px 10px;
}
#subnav li {
float: left;
padding: 0px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
Puedes cambiar los colores de letras, fondo y selección en las opciones background, color, etc. Tan sólo tienes que poner el código hexadecimal que quieras en su lugar correspondiente (puedes saber el número exacto del color a través de Photoshop, por ejemplo, mirando la paleta de colores). Una vez que lo adaptes a tu gusto, ya puedes guardar el código HTML.
Ahora pasaremos a armar el menú en sí. Esto lo haremos desde la ventana Diseño - Elementos de la página. Aquí insertaremos un widget HTML en la zona superior del blog, justo debajo de la cabecera. En el interior de este texto escribiremos:
<div id="subnavbar">
<ul id="subnav">
<li><a href="URL DEL BLOG" title="Inicio">INICIO</a>
</li>
<li><a href="" title="">PESTAÑA1</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
<li><a href="" title="">SUB-PESTAÑA1</a>
</li>
</ul>
</li>
<li><a href="mailto:" title="Enviame un email">CONTACTO</a>
</li>
<li><a href="" title="">PESTAÑA2</a>
<ul>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
<li><a href="" title="">SUB-PESTAÑA2</a>
</li>
</ul>
</li>
</li></ul></div>
En este caso, tenemos que diferenciar entre pestaña normal y pestaña son submenú. Entre las comillas que siguen a href= se pone la dirección de la web que queramos enlazar, por ejemplo, la principal del blog. Tras title ponemos el nombre de la pestaña y entre > y </a> lo mismo, el nombre de la pestaña.
Si queremos añadir una pestaña de contacto con una dirección de email, tras <href="mailto: pondremos la dirección, cerrándola con comillas. Por ejemplo "mailto:mimail@mail.com".
En el caso de las subpestañas se rellenan igual que las pestañas principales, con la salvedad que para vincularlas jerárquicamente (es decir, que si llevamos el cursor a Archivo se abra y aparezcan las pestañas 2010, 2011, etc.) tenemos que poner la etiqueta <u>justo debajo de la pestaña principal. Por ejemplo:
<li><a href="http://crepesdepapel.blogspot.com" title="Archivo">ArCHIVO</a><ul><li><a href="http://crepesdepapel.blogspot.com/search?updated-min=2011-01-01T00%3A00%3A00%2B01%3A00&updated-max=2012-01-01T00%3A00%3A00%2B01%3A00&max-results=15" title="2011">2011</a></li>
En resumen: Justo debajo del código de la PESTAÑA PRINCIPAL añadimos <ul> <li><a href="URL PESTAÑA1" title="NOMBRE PESTAÑA">NOMBRE PESTAÑA</a></li>
Si queremos seguir añadiendo pestañas en este mismo nivel no hay que volvera poner <ul>, sino que empezaríamos a partir de <li>...
Podemos añadir tantas pestañas como queramos, siguiendo siempre la jerarquía establecida. Piensa que la primera que escribas será la que esté más a la izquierda y cuanto más abajo, más a la derecha de la página se verá.
Espero que este minitutorial no haya sido muy complicado y os animo a personalizar vuestra página, eso sí, ¡guardando antes el código HTML!
Fuentes:
0 comentarios
Valoro la aportación de nuevas informaciones y los enlaces con información relevante, pero no el spam ni los insultos. Todos los comentarios que no se atengan a esta norma serán eliminados.