Hemos incorporado una barra al blog que aparece al bajar la página y es totalmente configurable al gusto de cada uno. Nosotros le hemos incorporado el menú del blog con iconos, los botones de compartir y el buscador.


El efecto esta hecho usando la librería JQuery que nos permite indicarle cuando queremos que aparezca la barra al hacer scroll en la página.

El CSS básico es el siguiente

#navup {
z-index: 1;
width:100%;
height:30px;
position:fixed;
top:-35px;
background: #f5f5f5;
border: 1px solid #ccc;
margin:0 auto;
padding: 0;

}
.navin {
width:1000px;
margin:0 auto;
}
.innav {
margin:5px;
display:block;
float:left;
position:relative;
}
.busquedanav {
float: right;
width:200px;
position:relative;
}

Con el ID #navup lo que hacemos es que la barra ocupe todo el ancho de la resolución de pantalla de cada visita (width:100%), le hemos dado un alto de 30px, puedes aumentar o disminuir este alto al gusto pero también deberás ajustar la propiedad top:-35px;, aumentándola o disminuyéndola según el alto que vayas a usar (esta propiedad siempre deberá ser mayor, al menos en 5px a la elegida como alto de la barra).

Como dependemos de la resolución de pantalla de cada visita y no queremos que los elementos que incorporemos a la barra se vean muy desperdigados, añadimos la clase .navin que deberemos ajustar al ancho de nuestro blog, en nuestro caso 1000px.

Incorporamos la librería JQuery antes de </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js ' type='text/javascript'/>

Recordad que si ya usáis la librería no es necesario incluirla de nuevo.

Añadimos el efecto

<script type='text/javascript'>
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop())
$(&#39;#navup&#39;).animate({&#39;top&#39;:&#39;0px&#39;},300);
else
$(&#39;#navup&#39;).stop(true).animate({&#39;top&#39;:&#39;-380px&#39;},100);
});
});
</script>


Ahora vamos con el HTML que deberemos incorporar directamente a nuestra plantilla, teniendo en cuenta que lo haremos justo después de <body> y no lo incluiremos en ningún otro div para no interferir en el ancho (100%) de la barra.

En nuestro caso las imágenes para el logo y el menú usan un sprite para mostrarse por lo que el código es diferente al que vamos a mostraros, esta técnica permite aligerar la carga de la plantilla pero no es recomendable para no iniciados. Veremos como realizarlo de forma habitual para incorporar nuestro logo, el menú y el buscador.

<p id='topup'/>
<div id='navup'>
<div class='navin'>
<a href='URL_DE_BLOG' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_LOGO'/></a>
<a href='URL_DE_BLOG_INICIO' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_MENU'/></a>
<a href='URL_DE_BLOG_MENU_1' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_MENU_1'/></a>
<a href='URL_DE_BLOG_MENU_2' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_MENU_2'/></a>
<a href='URL_DE_BLOG_MENU_3' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_MENU_3'/></a>
<a href='URL_DE_BLOG_MENU_4' rel='nofollow'><img class='innav' src='URL_DE_NUESTRA_IMAGEN_MENU_4'/></a>
<span class='busquedanav'>
<form action='/search' method='get'>
<input class='texto' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' type='text' value='Buscar...'/></form>
</span>
</div>
</div>

Hemos simplificado la barra todo lo que hemos podido, este HTML es solo un ejemplo de lo que podéis incorporar a ella, la única recomendación es que mantengáis las propiedades CSS básicas para que los elementos queden incorporados dentro de ella (float:left; position;relative;).

Esperamos que os sirva y dejéis en los comentarios algunos ejemplos de su uso.
Autor: . Consultor y auditor en posicionamiento web. Desarrollo de aplicaciones, diseño y programacion de plataformas y paginas web. Formación, profesor en el Programa SmmUs (Social Media Marketing) de la Universidad de Sevilla. Cursos sobre social media en Cámaras de Comercio de Málaga, Sevilla y Córdoba. Puedes encontrarme en Google Plus y Twitter .

¿Te gustó este post? No te pierdas los próximos, síguenos en redes sociales.

Te recomendamos también

9 comentarios:

  1. Me gusta. Va muy bien para dejar lo justo en el menú principal del blog y añadir más enlaces a páginas estáticas y otras cosas así. En cuanto lo haga, regreso para comentar cómo ha quedado.

    ResponderEliminar
  2. Muy bueno... aunque no se ni por donde empezar para incluirlo en mi Blog.

    ResponderEliminar
  3. Buuu... no se vale, usa JQuery, yo tengo Scriptacolous....

    ResponderEliminar
  4. Enhorabuena por el artículo, puse la barra en mi blog, saludos :)

    ResponderEliminar
  5. Gracias excelente aporte , que hicistes xD y tus articulos tambien sobre Google Plus .

    ResponderEliminar
  6. Ola , esto la parte de agregar el efecto donde lo colocamos?? xD

    ResponderEliminar
  7. Esta misma podriamos ponerla, pero debajo de la cabecera. O solo se puede antes de ella?

    ResponderEliminar
    Respuestas
    1. habria que modificar el codigo para ponerla donde quieres, ete tipo de barra estan hechas para aparecer por encima de cualquier elemento, debajo de la cabecera debrrias jugar con la propiedad z-index para que no se viera

      Eliminar