Domingo, 08 de abril de 2012

Este tutorial tiene la finalidad de ayudarte a crear una barra de menú como la que aparece en mi blog http://retazosypuntadas.blogspot.com

El objetivo es lograr algo como esto para tu blog:




1er. PASO; CREACION DE LAS DISTINTA SECCIONES DE TU MENU
Para cada sección puedes crear una "página falsa" dentro de tu blog o en otro blog.

Utilizado una con una entrada vieja en tu blog puedes editar entradas viejas transformándolas en el Acerca de,, Contacto y demás. O puedes crear una nueva entrada para cada sección y cambiarle la fecha hacia atrás para que no aparezca en la portada cuando la publiques. Utiliza tus primeras entradas y borra la etiqueta para que no aparezca en el archivo.

La fecha la cambias clickeando en Opciones de entrada e introduces la fecha y hora que desees.

También puedes elegir entre permitir o no comentarios.

2do PASO; EDITAR LA PLANTILLA

Una vez creado tu "Menú" te diriges a la Sección "Diseño" y dentro de ellas buscas "Edición de HTML".

Ese es el HTML de tu plantilla. En ella buscas el código siguiente, utilizando para ello las teclas Ctrl y F juntas.
En la parte baja de tu página verás una pequeña ventanda donde copias el sig. código y automáticamente te dirige hacia allá:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


Donde cambiarás

maxwidgets a 2 y showaddelement a yes

. Quedando así:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>


Eso va a permitirnos añadir otro elemento arriba o bajo la cabecera

Lo que sigue es pegar un código en la plantilla para el menú. Esto lo vas a pegar después de <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='TITULO DE TU BLOG (cabecera)' type='Header'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>


Justo después de </b:section> pegas;

<style type='text/css'>
.barrademenu {
margin: 0;
padding: 0;
float: left; width: 100%;
font-family: verdana;
font-size:13px;
font-weight: bold;
margin-top: 0px;
border-bottom: 2px solid black;
border-top: 2px solid black;
background: green;
}
.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:green dark;
outline: none;
}
</style>



En ese código se incluye el estilo que va a tener el menú, puedes alterarle los colores si quieres que son los numeros de 6 dígitos (#000000, , o usando nombres comunes de colores en inglés (white, blue, pink).

3er. PASO: CREACION DEL GADGET

Ya que pegaste el código, guardas los cambios y vas a agregar a la sección "Diseño", agregas un nuevo gadget tipo HTML/Javascript y en él vas a pegar lo siguiente:

<ul class="barrademenu">
<li><a title="INICIO" href="http://www.direccion">Inicio</a></li>
<li><a title="ACERCA DE MI" href="http://www.direccion">ACERCA DE MI</a></li>
<li><a title="CONTACTO" href="http://www.direccion">CONTACTO</a></li>
</ul>



Si deseas agregar más links, utiliza para cada uno de ellos el sig. código:


<li><a title="Contáctame" href="http://www.direccion">Otro menu</a></li>



Por supuesto que puedes cambiar los títulos según tu conveniencia y agregar los links que desees, ya sea que te enlacen a tus "páginas falsas" o a otros blogs.

Espero te sea útil.


Publicado por lauraguilaramirez @ 6:31  | Men?s
Comentarios (0)  | Enviar
Comentarios