Post obviable...lo importante es saber colocar etiquetas en una entrada en Blogger
En la web Free CSS hay 14 menus interesantes, algo simples...pero para aclararme están bien; son algo inútiles pero pueden ser de utilidad en la personalización.
La forma general para implantar un menú simple es:
1. Añadir los CSS correspondientes:
#menu1 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}
2. Copiar:
#menu1 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #3D261D;
border-size: 1px;
border-width: 1px;
}
#menu1 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu1 li a:link, #menu1 li a:visited {
color: #E4D6CD;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif);
padding: 8px 0 0 10px;
}
#menu1 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 2--------------------------- */
#menu2 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #D8D5D1;
border-size: 1px;
border-width: 1px;
}
#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu2 li a:link, #menu2 li a:visited {
color: #3688BA;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif);
padding: 8px 0 0 30px;
}
#menu2 li a:hover {
color: #3688BA;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu2.gif) 0 -32px;
padding: 8px 0 0 32px;
}
/*- Menu 3--------------------------- */
#menu3 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #BCD2E6;
border-size: 1px;
border-width: 1px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #8BADCF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif);
padding: 8px 0 0 10px;
}
#menu3 li a:hover {
color: #627EB7;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu3.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 4--------------------------- */
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 5--------------------------- */
#menu5 {
width: 200px;
margin: 10px;
}
#menu5 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu5 li a:link, #menu5 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif);
padding: 8px 0 0 10px;
}
#menu5 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu5.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 6--------------------------- */
#menu6 {
width: 200px;
margin: 10px;
}
#menu6 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu6 li a:link, #menu6 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif);
padding: 8px 0 0 10px;
}
#menu6 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu6.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 7--------------------------- */
#menu7 {
width: 200px;
margin: 10px;
}
#menu7 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu7 li a:link, #menu7 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif);
padding: 8px 0 0 30px;
}
#menu7 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu7.gif) 0 -32px;
padding: 8px 0 0 30px;
}
/*- Menu 8--------------------------- */
#menu8 {
width: 200px;
margin: 10px;
border-style: solid;
border-color: #656556;
border-size: 1px;
border-width: 1px;
}
#menu8 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu8 li a:link, #menu8 li a:visited {
color: #656556;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif);
padding: 8px 0 0 20px;
}
#menu8 li a:hover {
color: #474739;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu8.gif) 0 -32px;
padding: 8px 0 0 20px;
}
/*- Menu 9--------------------------- */
#menu9 {
width: 200px;
margin: 10px;
}
#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
/*- Menu 10--------------------------- */
#menu10 {
width: 200px;
margin: 10px;
}
#menu10 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu10 li a:link, #menu10 li a:visited {
color: #4D4D4D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif);
padding: 8px 0 0 10px;
}
#menu10 li a:hover {
color: #FF9834;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu10.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 11--------------------------- */
#menu11 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #889944;
border-size: 1px;
border-width: 1px;
}
#menu11 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu11 li a:link, #menu11 li a:visited {
color: #889944;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif);
padding: 8px 0 0 25px;
}
#menu11 li a:hover {
color: #889944;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu11.gif) 0 -32px;
padding: 8px 0 0 27px;
}
/*- Menu 12--------------------------- */
#menu12 {
width: 200px;
margin: 10px;
}
#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}
#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif);
padding: 10px 0 0 35px;
}
#menu12 li a:hover {
color: #000;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}
/*- Menu 13--------------------------- */
#menu13 {
width: 200px;
margin: 10px;
}
#menu13 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu13 li a:link, #menu13 li a:visited {
color: #C7377D;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif);
padding: 8px 0 0 10px;
}
#menu13 li a:hover {
color: #C7377D;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu13.gif) 0 -32px;
padding: 8px 0 0 10px;
}
/*- Menu 14--------------------------- */
#menu14 {
width: 200px;
margin: 10px;
}
#menu14 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu14 li a:link, #menu14 li a:visited {
color: #333;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif);
padding: 8px 0 0 10px;
}
#menu14 li a:hover {
color: #FFF;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu14.gif) 0 -32px;
padding: 8px 0 0 10px;
}
Supongamos que las etiquetas de Blogger las colocamos en ese tipo de menús que en realidad son pestañas en horizontal.
1. Antes hay que tener etiquetadas las entradas.
Ejemplo de menú nº4
2. Diseño>Edición de HTML> sin expandir artilugios
3. Control+F y buscamos
]]></b:skin>
4. Encima pegamos:
#menu4 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}
5. Sobre ella pegamos:
/*- Menu 4--------------------------- */
#menu4 {
width: 200px;
margin: 10px;
border-style: solid solid none solid;
border-color: #000;
border-size: 1px;
border-width: 1px;
}
#menu4 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu4 li a:link, #menu4 li a:visited {
color: #CCC;
display: block;
background: url(http://photos1.blogger.com/blogger2/3729/970792021505273/1600/menu4.gif);
padding: 8px 0 0 10px;
}
#menu4 li a:hover {
color: #FFF;
background: url(url-a-cambiar) 0 -32px;
padding: 8px 0 0 10px;
}
6. Guardamos. Suponemos que ya están añadidas las etiquetas en la zona de Diseño.
7. Diseño>Edición de HTML>expandimos artilugios
8. Control+F y buscamos el widget de "Etiquetas" (si no tiene título se lo colocamos de forma momentánea). Aparecerá algo similar...
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<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>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
9. Modificar todo el código por...
<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='menu4'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>
Cuidado: Los menús comienzan con la etiqueta Inicio que nos llevará a la página principal del blog. Si no se quiere mostrar en el menú se borra del código anterior la línea:
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>Para colocar otro menú basta cambiar el código CSS (cambiar "menu4" por "menuX" en el primer trozo de código que se coloca, así como en el último)
Fuente: EE
Sin comentarios
Los comentarios nuevos no están permitidos.