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