jueves, 9 de junio de 2011

Menu en un blog

Ofrecemos en este foro de informatica otro truco windows
Despues de crear blog, podemos ponerle un menú como el siguiente:
Intentaremos conseguir lo siguiente:
Trucos windows

Ahora vamos a editar HTML de tu plantilla y buscas lo siguiente:
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
Y cambias los parámetros maxwidgets a 2 y showaddelement a yes:
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
Eso va a permitirnos añadir otro elemento arriba o bajo el header en nuestro blog.
Luego pegamos esto antes de <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>
En ese código se incluye el estilo, para cambiar el color jugamos con estas cifras (#000000, ver links al final del post), o escribiendo colores en inglés (white, blue, pink). 
Ahora guardas los cambios y vas a agregar mas elementos en la página, agregas un nuevo gadget HTML/Javascript y en el vas a pegar 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>
Sustituyendo por supuesto la direccion web por tu blog. Con eso te saldrán 3 “pestañas” o espacios en el menú, para poner una más sólo es necesario agregar otro:

<li><a title="Contáctame" href="http://www.direccion-de-tu-blog-aqui.com">Otro menu</a></li>
¡Fantastico!
Lo único es que ahora todas las opciones van a nuestro blog y en blogger no podemos hacer una página estática, pero podemos simular una con una entrada vieja en nuestro blog. ¿Cómo? Edita entradas viejas transformándolas en el Acerca de, Contacto y demás o crea una nueva entrada para cada sección y cambiale la fecha hacia atrás para que no aparezca en la portada cuando la publiques.
La fecha la cambias clickeando en Opciones de entrada e introduces la fecha y hora que desees.
Crear blog
Es buena idea guardar los posts de las secciones antes de tus primeras entradas (puedes revisar la fecha que esas tienen) así cuando alguien esté navegando por tu blog no se topará con los post del menú entre el contenido. También puedes elegir entre permitir o no comentarios.
Ya que hayas creado tus entradas puedes empezar a añadir el acceso a ellas desde el recién agregado menú. Lo que tienes que hacer es colocar la dirección de cada post que hiciste de secciones en el código del menú. Por ejemplo, en la sección de Sobre mí, más o menos así se vería en el código:
<li><a title="Con&Atilde;&sup3;ceme" href="http://www.direccion-de-tu-blog-aqui.com/acerca-de">Sobre mí</a></li>
Creas tantas entradas y espacios de menú como necesites.
NOTAS:
Para crear un blog visita la etiqueta "Crear blog"
Para buscar y encontrar algo fácilmente en la plantilla usa Control+F.
Cualquier duda, cosita en la que no me haya explicado bien o no funcione me comentas aquí mismo.
Te puede servir:
Web Color Chart / Para cambiar los colores del menú, no olvides el # antes de el código del color.
HTML color codes / Otra web con códigos de color.

Fuente: Kozmica
Publicado por Sergio en 12:49
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)