Ahora les enseñaré a colocar una barra de menú como esta :
En sus blogs al igual como está en el mio, bueno aquí está :
- blogger no nos permite tener un menú por default, pero eso se resuelve fácil, vas a diseño/editar HTML y en la plantilla buscas lo siguiente :
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Donde cambiarás showaddelement a yes. Quedando así:
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
Esto permitirá añadir a la plantilla HTML el codigo para colocar el menú. Esto se pega antes de la palabra <head>:
<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: Tahoma;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: #990000;
}
.barrademenu li {display: inline;}
.barrademenu li a, .solidblockmenu li a:visited {
float: left;
padding: 4px 15px;
text-decoration: none;
color: white;
border-right: 2px solid black;
outline: none;
}
.barrademenu li a:hover {
color: #ffffff;
background: #000000;
outline: none;
}
</style>
4. En el código solamente se cambia el estilo que va a tener su menú, puedes alterarle los colores, que son los numeros de 6 dígitos (#000000, ver links al final), o usando nombres comunes de colores en inglés (white, blue,green). Trata de jugar con los colores para crear uno que vaya con tu diseño.
5. Ya pegaste el código y ahora solo falta agregar un gadget a si que nos vamos a diseño/elementos de la pagina y colocamos un gadget para formato HTML y pegamos el siguiente codigo :
<ul class="barrademenu">
<li><a title="TUBLOG.com" href="http://TUBLOG.com">Inicio</a></li>
7.Fantastico!, si has echo todo bien vas a ver una linda barra de menú en tu blog, solo hay una cosa mas que hacer,todas las URL o enlaces se dirigen a el inicio del blog, ¿como agregar las secciones?.Con Blogger no se puede crear una pagina "especial" por decirlo hací, podemos crear una "pagina" que es parcida a una entrada de blogger ¿como?
8.Primero nos vamos a crear entrada/editar páginas y clikean en Pagina nueva, luego solamente tienen que escribir lo que quieren que este en el menú pr ejemplo "Mi perfil" y escriben cosas sobre ustedes
9.Despues de haber creado el post lo publicamos, luego aparecerá una pagina donde dice como quieres que aparesca esta pagina en su blog y ustedes apretan la opcion SIN GADGET.
10.Ahora solo tenemos que colocar "Ver pagina" copiamos la URL y la colocamos en el gadget que anterior mente pusimos en Elementos de la pagina y por ejemplo quedaria así :
<ul class="barrademenu">
<li><a title="Informacion" href="http://TUBLOG.com/p/mi-perfil-html">Acerca de mi</a></li>
Creas tantas entradas y espacios de menú como necesites.
Otra cosaaa!!:
Si desean colocar otra pestaña solo agregen otro de estos pero antes de el ultimo </ul> :
<li><a title="Otro menu" href="http://TUBLOG.com">Otro menu</a></li>
Cualquier duda, cosita en la que no me haya explicado bien o no funcione me lo dicen en los comentarios. Colores en HTML:Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.
Hola Izzy, me sirvio mucho tu tutorial. Hace poco comencé a utilizar blogger y he ido mejorandolo con tuturiales. El menú me gustó como quedo pero no puedo modificarlo completamente, como que no me pesca jajaja. Pero todo lo que publicaste me sirvió mucho. Te dejo saludos y desde ya siguiré tu blog. Cariños
ResponderEliminarBueno Luany estuve observando tu blog y es muy lindo te felicito y gracias por tu comentario,
ResponderEliminarcualquier duda que tengas solo contactame.
Cariños a ti tambien cuidate.
Exelente tutorial Gracias ^_^
ResponderEliminarY como hago si quiero poner mas URL?
ResponderEliminarEs decir,que en cada pestaña no me lleve a una sola entrada,sino a las que yo quiera
En la parte donde tienes que poner en tu blog, diseño/Gadget HTML coloca lo que dice en el Punto 5.!!
Eliminary Colocas el URL de las diferentes entradas que quieras donde dice "http://TUBLOG.COM" y llegará cada una a donde quieras c: espero que te sirva!!~ si tienes mas dudas mandame un MSN a isse.stein@hotmail.com Bye Bye~ *-*