http://www.misslavanda.es/2014/03/tutorial-blogger-como-poner-un-menu.html
Este tutorial consta de 3 pasos
PASO 1: Modificar nuestra plantilla de blogger.
Para ello nos vamos a nuestro blog y pinchamos en plantilla. Una vez allí descargamos la plantilla por seguridad (por si al cambiar el código aparecieran cosas raras o cosas de ese estilo) como muestro a continuación:
Una vez hemos guardado nuestra copia de seguridad, le damos a Editar HTML que se encuentra también en plantilla. Una vez dentro presionamos CTRL+f para buscar la siguiente línea:
<div class='region-inner header-inner'>
Si veis que poniendo la frase al completo no os la encuentra, probad poniendo solo region-inner header-inner o cosas así; una vez hayáis llegado a ella, vamos a modificar lo que está escrito justo debajo, que es lo siguiente:
<b:section class='header' id='header' maxwidgets='10' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='NOMBRE DE VUESTRO BLOG' type='Header'>
<b:includable id='main'>
<b:widget id='Header1' locked='false' title='NOMBRE DE VUESTRO BLOG' type='Header'>
<b:includable id='main'>
Donde como veis hemos modificado los campos en morado:
- Donde antes ponía 0, ahora hemos de poner 10
- Donde antes decía no, un yes
- Y donde había un true, un false
Una vez realizada esta pequeña modificación, damos a guardar plantilla y listo.
PASO 2: crear el menú
Ahora lo que vamos a hacer es diseñar nuestro menú, pero todavía sin customizarlo. Lo primero que hacemos es pinchar en diseño y añadimos un gadget HTML. Este le debéis colocar justo debajo de la cabecera de vuestro blog. En él debéis pegar el siguiente código:
<div id='mbwnavbar'>
<ul id='mbwnav'>
<li>
<a href='URL'>Nombre de pestaña</a>
</li>
<li>
<a href='URL'>Nombre de pestaña</a>
</li>
<li>
<a href='URL'>Nombre de pestaña</a>
<ul>
<li><a href='URL'>Nombre subpestaña</a></li>
<li><a href='URL'>Nombre subpestaña</a></li>
</ul><li>
<a href='URL'>Nombre de pestaña</a>
</li>
<li>
<a href='URL'>Nombre de pestaña</a>
</li>
<li>
<a href='URL'>Nombre de pestaña</a>
<ul>
<li><a href='URL'>Nombre subpestaña</a></li>
<li><a href='URL'>Nombre subpestaña</a></li>
</li>
<li> <a href='URL'>Nombre de pestaña</a><ul>
<li><a href='URL'>Nombre de subpestaña</a></li>
<li><a href='URL'>Nombre de subpestaña</a></li>
</ul>
</li>
</ul>
</div>
Os voy a enseñar cómo va esto para que podáis añadir pestañas y subpestañas a vuestra elección. Aunque parezca un lío es muy sencillito.
Cada pestaña de nuestro menú está contenida entre las etiquetas <li> y </li>, de esta forma:
<li>
<a href='URL'>Nombre de pestaña</a>
</li>
<a href='URL'>Nombre de pestaña</a>
</li>
Nosotros simplemente ponemos la dirección a la que queremos que nos lleve esa pestaña y su nombre y listo. Si queréis que las pestañas os lleven a entradas que sigan la misma etiqueta lo que debéis poner es:
vuestroblog.blogspot.com.es/search/label/nombreEtiqueta
Si además queréis que las pestañas tengan subpestañas, es tan fácil como poner <ul> antes de poner </li> y hacer el listado de cada subpestaña de la misma forma. Una vez terminado cerramos poniendo </ul> y listo. Como está aquí:
<li>
<a href='URL'>Nombre de pestaña</a>
<ul>
<li><a href='URL'>Nombre subpestaña</a></li>
<li><a href='URL'>Nombre subpestaña</a></li>
</ul><a href='URL'>Nombre de pestaña</a>
<ul>
<li><a href='URL'>Nombre subpestaña</a></li>
<li><a href='URL'>Nombre subpestaña</a></li>
</li>
Con estas nociones básicas ya sois capaces de hacer el menú que queráis :)
Una vez hecho esto guardáis la plantilla y listo. Recordad que el gadget va debajo de la cabecera.
Si vais a la vista previa veréis que está todo desordenado y mal colocado, así que queda nuestro último paso, darle forma.
Si queréis que os quede centrado, es tan fácil como poner al principio del todo <center> y a final </center>
PASO 3. Dar forma a nuestro menú
Ahora debemos volver nuevamente a plantilla y allí darle a personalizar para añadir un nuevo CSS. Lo vamos a hacer aquí en vez de pegarlo directamente en la plantilla para ir visualizando los cambios. Mirad, aquí es donde os debéis encontrar:
Este es el código que debéis copiar, os recuerdo que está puesto con unos valores específicos (lo que está escrito entre /**...**/ es un comentario, no afecta a nuestra plantilla):
/** Menú desplegable Laura Design**/
#mbwnavbar {
background: #ffffff; /**Color de fondo**/
width: 690px; /**Importante! Ancho de nuestro menú, ajustadlo según os cuadre**/
color: #212121;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #fff;
border-right:0px solid #fff;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #ff9c8f; /**Color de las letras de las pestañas**/
display: block;
font:normal 14px Arial, sans-serif; margin: 0; /**Tamaño de las letras y tipografía**/
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #c1c1c1; /**Color de fondo de las pestañas al pasar encima de ellas**/
color: #b9a3ad; /**Color de las letras de las pestañas al pasar encima de ellas**/
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul { left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #ff9c8f; /**Color de fondo de las subpestañas**/
width: 120px;
color: #ffffff; /**Color de las letras de las subpestañas**/
display: block;
font:normal 14px Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #fff;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #b9a3ad; /**Color de fondo de las subpestañas al pasar encima de ellas**/
color: #797979; /**Color de las letras de las subpestañas al pasar encima de ellas**/
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Y ya para finalizar, si veis que os salen unas líneas negras que quedan feas en vuestro menú, debéis ir a Plantilla → Personalizar → Avanzado y seleccionáis Acentos y los ponéis de color transparente.
Espero que os sea súper útil y no os asustéis con tanta letra que es muy fácil :):):)
Cualquier duda, por pequeña que sea os la resuelvo, sólo tenéis que dejar un comentario o contactar conmigo
/** Menú desplegable Laura Design**/
#mbwnavbar {
background: #ffffff; /**Color de fondo**/
width: 690px; /**Importante! Ancho de nuestro menú, ajustadlo según os cuadre**/
color: #212121;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbwnav {
margin: 0;
padding: 0;
}
#mbwnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbwnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #fff;
border-right:0px solid #fff;
height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
color: #ff9c8f; /**Color de las letras de las pestañas**/
display: block;
font:normal 14px Arial, sans-serif; margin: 0; /**Tamaño de las letras y tipografía**/
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbwnav li a:hover, #mbwnav li a:active {
background: #c1c1c1; /**Color de fondo de las pestañas al pasar encima de ellas**/
color: #b9a3ad; /**Color de las letras de las pestañas al pasar encima de ellas**/
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbwnav li {
float: left;
padding: 0;
}
#mbwnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbwnav li ul a {
width: 140px;
}
#mbwnav li ul ul {
margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul { left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
background: #ff9c8f; /**Color de fondo de las subpestañas**/
width: 120px;
color: #ffffff; /**Color de las letras de las subpestañas**/
display: block;
font:normal 14px Arial, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #fff;
}
#mbwnav li li a:hover, #mbwnavli li a:active {
background: #b9a3ad; /**Color de fondo de las subpestañas al pasar encima de ellas**/
color: #797979; /**Color de las letras de las subpestañas al pasar encima de ellas**/
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
Y ya para finalizar, si veis que os salen unas líneas negras que quedan feas en vuestro menú, debéis ir a Plantilla → Personalizar → Avanzado y seleccionáis Acentos y los ponéis de color transparente.
Espero que os sea súper útil y no os asustéis con tanta letra que es muy fácil :):):)
Cualquier duda, por pequeña que sea os la resuelvo, sólo tenéis que dejar un comentario o contactar conmigo
No hay comentarios:
Publicar un comentario