1-Lo siguiente que tenemos que hacer es añadir un elemento de página más para lo que buscaremos en la plantilla el siguiente elemento: <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>aconsejo buscarlo pulsando Ctrl+f..Cuando lo hallamos encontrado modificaremos los valores maxwidgets 2 y showaddelement yes así:
<b:section class='header' id='header' maxwidgets='2'
showaddelement='yes'>
Quedaría así:
2-Ahora lo que hay que hacer es pegar un código antes de <head>
lo buscaremos como antes hemos hecho pulsando Ctrl+f.Este es el
código:
<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>
Una vez pegado el código podemos modificar los colores donde
pone los números de 6 dígitos #000000 o poniendo el nombre
del color en ingles.Aquí podeis mirar el
código de varios colores:
| Red | #FF0000 | White | #FFFFFF | |
| Cyan | #00FFFF | Silver | #C0C0C0 | |
| Blue | #0000FF | Grey | #808080 | |
| Dark Blue | #0000A0 | Black | #000000 | |
| Light Purple | #FF0080 | Orange | #FFA500 | |
| Purple | #800080 | Brown | #A52A2A | |
| Yellow | #FFFF00 | Maroon | #800000 | |
| Lime | #00FF00 | Green | #008000 | |
| Fuchsia | #FF00FF | Olive | #808000 |
3-Lo que hay que hacer ahora es abrir la pestaña de diseño/añadir
un gadget(el que hemos abierto antes arriba/html javascript y
pegamos lo siguiente:
<ul class="barrademenu"> <li><a title="INICIO"
href="http://www.direccion-de-tu-blog-aqui.com">Inicio</a></li> <li><a title="Informacion"
href="http://www.direccion-de-tu-blog-aqui.com">Acerca de</a></li> <li><a title="Contáctame"
href="http://www.direccion-de-tu-blog-aqui.com">Contacto</a></li> </ul>
Y para añadir más pestañas en el código de antes pegamos
lo siguiente al final antes de esto</ul>:
<li><a title="INICIO"
href="http://www.direccion-de-tu-blog-aqui.com">Inicio</a></li>
Con esto añadiremos una sección mas y por lo tanto una pestaña nueva.
Lógicamente donde pone INICIO añadiremos el nombre que queramos
dar a la pestaña nueva.
4-En este código tienes que modificar a donde quieres que te lleve
al pulsar en el menu de inicio,acerca de,contacto,para ello solo
tienes que poner entre las comillas y donde pone esto:
(http://www.direccion-de-tu-blog-aqui.com)la dirección de donde
tienes lo que quieras poner.Para ello te aconsejo que edites una
entrada modificando la fecha para que no figure adelante en las
entradas en opciones de entrada.
Como muestro aquí abajo:
Con esto nuestro menú ya estaría acabado.
Excelente articulo amigo, veo que tienes algo de eperiencia en la creacion de blogs, bueno yo apenas estoy creando mi primer blog, pero me esta yendo muy muy bien!!!
ResponderEliminarGracias Cumaná Roots y ánimo con tus blogs
EliminarHola, he conseguido poner la barra.
ResponderEliminarwww.elrincondepris.blogspot.com
pero ahora, no se como incluir una lista con los enlaces de las recetas dentro del apartado de recetas.
me puedes ayudar?
gracias!
Ya veo que lo has solucionado muy bien pero lo pongo para quien le sirva.Para poner una lista dentro del apartado de recetas deberas abrir una nueva entrada en tu blog,jugando con la fecha de creación de la entrada para que no te salga la primera en tu blog. Hecha la nueva entrada con los enlaces de recetas ya solo te quedara copiar el enlace de esa entrada y pegarlo en donde pone "http://www.direccion-de-tu-blog-aqui.com".
EliminarOsea en la parte del código html del paso 3 de este artículo