Menú flotante horizontal con buscador incluido
Este menú es verdaderamente cómodo y su instalación no es muy complicada.
Se trata de una barra de navegación con un buscador incluido que permanece fija en la parte inferior del blog.
>DEMO
Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:
Ahora localiza la etiqueta <body> y justo encima pega estas líneas:
Reemplaza en cada caso:
URL DE TU PAGINA por la dirección de tu web o blog y TITULO por el título de tu web o blog.
En caso de querer mostrar el menú flotante en la parte superior del blog y no en la inferior, cambia el atributo bottom por top en la línea position:fixed;bottom:0px; del primer bloque de código.
Haz vista previa para comprobar que todo va bien y guarda cambios para terminar.
*Si necesitas ayuda o quieres editar cualquier cosa del menú puedes consúltame a través de un comentario.
Se trata de una barra de navegación con un buscador incluido que permanece fija en la parte inferior del blog.
>DEMO
Diseño>edición HTML>expandimos artilugios
Busca la etiqueta ]]></b:skin> y encima pega estos bloques de CSS que darán estilo al menú:
/*-- Comienzo menu flotante --*/
#menuflotante {
float:left;
width: 1256px;
padding: 3px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigJhDAs-f7q4Y0PfE_1urq6U1fEutYvcq3Vsi2vIWze38V730Ryx6VzWicjdQLKD4uLa3qsWHwCJedan5RvIqP3zuFW9a_wHPSyEFnZDF65YCQHN5y6mBmAezt6chsiusuSzXTvKAlHrU/s1600-r/0.jpg) repeat-x scroll left top;
position:fixed;bottom:0px;
height:23px;
}
#menuflotante li {
float:left;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiAxoTpEkMI2KrCceKkJ0vY9gxPFkUmVda29aEKJZ0WoN516NY7rxS8LpH4E-O-XiwGdffsgYyBwnEZPNaLLARxznJ4cuX-j6IqwORZe0RyWQyFr3V0zzarIMZqBI6ys72fQi65jWI4KY/s1600-r/3.jpg) no-repeat right 8px;
padding:2px 20px 0;
}
#menuflotante ul {
margin:0;
padding:0;
line-height:normal;
list-style:none;
}
#menuflotante a:hover {
padding-top: 2px;
color: #009999;
}
#menuflotante a {
display:block;
float:left;
text-decoration:none;
font:12px Arial;
color:#FFFFFF;
}
#menuflotante .current_page_item {
margin:0;
color:#FFFFFF;
}
#search-box {
height: 17px;
width: 214px;
background:transparent;
color: #009999;
border: 2px groove #cccccc;
}
#search-btn{
background: transparent;
border: 1px groove #cccccc;
color: #ffffff;
}
#search-btn:hover{
background: #009999;
}
#search-btn:active{
background: #006b6b;
}
/*-- Fin menu flotante --*/
Ahora localiza la etiqueta <body> y justo encima pega estas líneas:
<!-- Comienzo menu flotante -->
<div id='menuflotante'>
<ul><li class='current'><a expr:href='data:blog.homepageUrl'>Inicio</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
<li><a href='URL DE TU PAGINA'>TITULO</a></li>
</ul>
<div class='buscadormenu'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' title='Escribe aquí tu consulta' type='text'/>
<input id='search-btn' type='submit' value='Buscar'/></form></div>
</div>
<!-- Fin menu flotante -->
Reemplaza en cada caso:
URL DE TU PAGINA por la dirección de tu web o blog y TITULO por el título de tu web o blog.
En caso de querer mostrar el menú flotante en la parte superior del blog y no en la inferior, cambia el atributo bottom por top en la línea position:fixed;bottom:0px; del primer bloque de código.
Haz vista previa para comprobar que todo va bien y guarda cambios para terminar.
*Si necesitas ayuda o quieres editar cualquier cosa del menú puedes consúltame a través de un comentario.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!