Blog and Web

La navegación de nuestro web o blog es un importante aspecto a cuidar, los menús son elemento importante de esta y aquí te mostraremos como colocar en tu web o blog un menú lateral fijo, es decir, que al bajar el scroll el menú continua en la misma posición.

El menú del que te hablamos es muy popular en blogs, además de práctico. Puedes verlo en la siguiente imagen.

1. Entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.
2. Buscamos el siguiente código:

   ]]></b:skin>

   Para otros sistemas de blog diferente a blogger o en una web, ubica el lugar de tus estilos o tu archivo CSS.

3. Y justo arriba coloca:

#menulateral{
   position:fixed;
   text-align:left;

/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
         margin-top:100px;
   margin-left:-28px;
}

* html #menulateral{  /*para IE*/
 position:absolute;
 }

#menulateral a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#menulateral a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80);
 position:relative;top:0px;left:2px;
}

* html #menulateral a img{
 filter:alpha(Opacity=100);
 }

#menulateral img{
 margin-bottom: -5px;
 }

* html .menulateral{
 margin-bottom: -3px;
}

4. Ahora buscamos el siguiente código:

<div id='content-wrapper'>

Para algunas plantillas podría ser mejor ubicar “<div id=’outer-wrapper’><div id=’wrap2′>”. Para otros sistemas de blog o en una web ubica el div del contenedor principal.

5. Y debajo de ese código colocamos el siguiente:

<div id='menulateral'>
 <span>
 <a href='http://TUBLOG.blogspot.com/' style='border:0;' title='Inicio'><img alt='Inicio' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya1AI/AAAAAAAABoI/6EXVwJ-0xxc/s1600/menu-lateral-inicio.png'/></a>
 <br/><a href='#BlogArchive1' style='border:0;' title='Archivo'><img alt='Archivo' src='http://bp2.blogger.com/_Zuzii37VUO4/RlpT2Jya08I/AAAAAAAABno/fEetH56Ftgw/s1600/menu-lateral-archivo.png'/></a>
 <br/><a href='mailto:TU-MAIL@servidor.com' style='border:0;' title='Contactame'><img alt='Contactame' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0-I/AAAAAAAABn4/F5Ax7A_8rLA/s1600/menu-lateral-contacto.png'/></a>
 <br/><a href='http://TUBLOG.blogspot.com/feeds/posts/default' style='border:0;' title='Suscribete a nuestro Feed'><img alt='Suscribete a nuestro Feed' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya0_I/AAAAAAAABoA/HgSHFryV6kc/s1600/menu-lateral-feed.png'/></a>
 <br/><a href='#' style='border:0;' title='Arriba'><img alt='Arriba"' class='menulateral' src='http://bp3.blogger.com/_Zuzii37VUO4/RlpT2Zya09I/AAAAAAAABnw/38HqImjH21E/s1600/menu-lateral-arriba.png'/></a>
 </span>
</div>

En ese código haz las sustituciones siguientes:

“http://TUBLOG.blogspot.com/” - Por la dirección de tu blog.
“TU-MAIL@servidor.com” - Por tu dirección de correo
“http://TUBLOG.blogspot.com/feeds/posts/default” - Sustituye “TUBLOG” por esa parte de la dirección de tu blog.

6. Guarda y ¡listo!

Esta plantilla esta basada en “Beautiful Day” de Arcsin, adaptada para Blogger por BlogandWeb y esta bajo una licencia Creative Commons. Puedes utilizarla para fines personales o comerciales con la única condición de que respetes los créditos, regresando un link a BlogandWeb y Arcsin.

Características

• Definición de colores en el panel.
• Dos columnas.
• Menú personalizable.

Descarga

• Demo
• Descargar

Instalación

Para instalarla consulta el videotutorial hecho por Patricia Pilar y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

Y busca el siguiente código:

<div class="navigation">
  <a href="#">Inicio</a>
  <a href="#">Blog</a>
  <a href="#">Fotos</a>
  <a href="#">Perfil</a>
  <a href="http://blogyweb.blogspot.com">Soporte</a>
  <div class="clear"></div>
</div>

En ese código, cambia los signos # por tus links y guarda.

Como muchos saben, mediante CSS es posible manejar la apariencia de los links, ya sean activos, al pasar el mouse encima y los visitados. Y en este artículo te mostraremos algunas opciones de estilos para los links ya visitados en nuestro sitio y de este modo ayudar a nuestro usuarios a diferenciar lo que ya vio de lo que no.

Efecto: Tachado
Ejemplo: Link visitado
Código:

a:visited {
text-decoration: line-through;
}

Es un efecto sencillo pero efetivo.

Efecto: Subrayado personalizado
Ejemplo: Link visitado
Código:

a:visited {
border-bottom: 1px dotted #6c6c6c;
text-decoration: none;
}

Sencillo y personalizable.

Efecto: Icono lateral
Código:

a:visited {
padding-right: 12px;
background: url(http://bp0.blogger.com/_Zuzii37VUO4/RliVkJya0kI/AAAAAAAABks/zwQFwD937-g/s1600/icono-visitado.gif) no-repeat 100% 50%;
}

Es una forma más gráfica y muy personalisable.

Efecto: Texto indicativo.
Ejemplo: Link visitado YA VISITADO
Código:

a:visited:after {
content: " (YA VISITADO)";
font-size: 60%;
text-transform: uppercase;
color: #777;
}

Este método usa pseudoelementos, por lo que no funciona en las versiónes anteriores de IE7.

Son métodos faciles de utilizar y muchas veces muy utiles.

Encuentra más sobre esto en maratz

Esta plantilla esta basada en “Earthling” de Free CSS Templates, adaptada para Blogger por BlogandWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condición de que respetes los créditos, regresando un link a BlogandWeb y Free CSS Templates.

Características

• Definición de colores en el panel.
• Dos columnas.
• Menú personalizable.

Descarga

• Demo
• Descargar

Instalación

Para instalarla consulta el videotutorial hecho por Patricia Pilar y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

Y busca el siguiente código:

<ul>
<li class="first"><a title="" accesskey="1" href="#">Inicio</a></li>
<li><a title="" accesskey="2" href="#">Blog</a></li>
<li><a title="" accesskey="3" href="#">Fotos</a></li>
<li><a title="" accesskey="4" href="http://blogyweb.blogspot.com">Soporte</a></li>
</ul>

En ese código, cambia los signos # por tus links y guarda.

Esta plantilla esta basada en “Pollinate” de Free CSS Templates, adaptada para Blogger por BlogandWeb y esta bajo una licencia Creative Commons Attribution. Puedes utilizarla para fines personales o comerciales con la única condición de que respetes los créditos, regresando un link a BlogandWeb y Free CSS Templates.

Características

• Definición de colores en el panel.
• Dos columnas.
• Menú personalizable.

Descarga

• Demo
• Descargar

Instalación

Para instalarla consulta el videotutorial hecho por Patricia Pilar y nuestra miniguía de instalación. Además puedes leer nuestras preguntas frecuentes y enterarte de los problemas más comunes y su solución.

Configuración

Esta plantilla tiene un menú para personalizar a tu gusto, para cambiarlo entra a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

Y busca el siguiente código:

<div id='menu'>
  <ul>
 <li class='active first'><a href='#' title=''>Inicio</a></li>
 <li><a href='#' title=''>Blog</a></li>
 <li><a href='#' title=''>Fotos</a></li>
 <li><a href='#' title=''>Perfil</a></li>
 <li><a href='http://blogyweb.blogspot.com' title=''>Soporte</a></li>
  </ul>
</div>

En ese código, cambia los signos # por tus links y guarda.