En ceo te ayuda podras encontrar.....

Durante el día van surgiendo pequeños problemas de fácil solución que yo iré poniendo aquí periódicamente para recordar como solucione aquel problema o que hice.Tengo que decir que yo no soy ningún experto en ninguna de esas áreas y que se pueden encontrar fallos y mis explicaciones puede que no sean del todo entendibles.NO ME RESPONSABILIZO de lo que pueda ocurrir al seguir los pasos que indico en mis soluciones,solo me limito a poner lo que a mi me sirvió.

jueves, 10 de noviembre de 2011

COMO HACER UNA BARRA DE MENU EN BLOGSPOT

Hoy voy a explicar por pasos y con imagenes como hacer una barra de menú en tu blog.El primer paso va a ser hacer una copia de seguridad en tu blog por si hace falta,para ello entraremos en la pestaña de diseño/edición de html/descargar plantilla completa.
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 #FF0000White#FFFFFF
Cyan#00FFFF Silver#C0C0C0
Blue#0000FFGrey#808080
Dark Blue #0000A0Black#000000
Light Purple #FF0080Orange#FFA500
Purple #800080Brown#A52A2A
Yellow#FFFF00Maroon#800000
Lime#00FF00Green#008000
Fuchsia#FF00FFOlive#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.

4 comentarios:

  1. 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!!!

    ResponderEliminar
    Respuestas
    1. Gracias Cumaná Roots y ánimo con tus blogs

      Eliminar
  2. Hola, he conseguido poner la barra.

    www.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!

    ResponderEliminar
    Respuestas
    1. 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".
      Osea en la parte del código html del paso 3 de este artículo

      Eliminar