08 julio 2012

Menú Horizontal solo con CSS para blogger

Normalmente todos los Blog usamos un menú de navegación en la parte superior del blog que ayuda a los lectores a navegar y organizar facilmente nuestros enlaces.

Hoy os traigo un nuevo menú que solo trabaja en Css y con ello evitamos no incorporar script de ningún tipo, aligerando así el tiempo de carga del blog.

Tan solo tiene una cierta limitación, que no es desplegable, siendo bueno para blogs pequeños con pocos enlaces.



Añadirlo a Blogger:
1.-Ir al Escritorio de Blogger> Diseño
2.-Haga clic en Agregar un gadget (por debajo de Cabecera)
3.-Pegar código y guárdelo.

<style type="text/css">
div.topbar {
height: 16px;
background: #AE0707;
}
ul.amor {
font-weight: bold;
width: 100%;
background: #FFF;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
border: 1px solid #9B0404;
}

ul.amor li {
display: inline;
}

ul.amor li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}

ul.amor li a:hover, ul.amor li a.selected {
color: white;
background: #CB0404;
background: -moz-linear-gradient(top, #5d4137 0%, #CB0404 12%, #840404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #840404;
-webkit-box-shadow: 0 0 5px #840404;
box-shadow: 0 0 5px #840404;
padding-top: 17px;
padding-bottom: 6px;
}
</style>
<div class="topbar">
</div>
<ul class="amor">
<li><a href="http://www.amorsevillista.com">INICIO</a></li>
<li><a href="Url del link">Link 1</a></li>
<li><a href="Url del link">Link 2</a></li>
<li><a href="Url del link">Link 3</a></li>
<li><a href="Url del link">Link 4</a></li>
<li><a href="Url del link">Link 5</a></li>
</ul>


!!!!! A DISFRUTARLO !!!!!!!




Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

9 comentarios

Hola Antonio,
Entre mis equipos de toda la vida del fútbol ha estado el Sevilla, sobre todo la época de Pintinho, aunque reconozco que mi deporte es el baloncesto.
Pero el tema por el que me dirijo a ti, es que sigo tu portal, y abusando de tu amabilidad y de tus conocimientos, me gustaría que me ayudaras en un tema que está casi relacionado con este post.
Resulta que recientemente he elegido un template, y lo estoy adaptado a mi gusto e incluso he adquirido un dominio http://www.davidzonabasket.com/ El tema es que el menú secundario no es desplegable (Inicio, ¿Quién soy?, .....), y quisiera que lo fuera para adaptarlo a mis necesidades, y es aquí, que recurro a ti, por si me puedes ayudar.
Recibe un cordial saludo, dándote las gracias de antemano.

David perdona por la tardanza en contestar pero he estado de vacaciones y totalmente desconectado de internet.

De todas formas ya veo que has solucionado el tema.
Gracias por comentar.

Este comentario ha sido eliminado por el autor.

hehe bro olvidalo ya me puse a probar subiendolo a dropbox y me funciono bien graciass bro

hey bro como yo subiria este menu un poco mas si ves donde esta a la derecha de aqui http://petertheunique.blogspot.com/ arriba dices admin y el menu la tapa esta un poco hacia abajo el menu

ese es el blog de prueba luego lo pondre en este http://bajatusprogramas.blogspot.com/

Aqui te dejo el link del menu completo

https://dl.dropboxusercontent.com/s/r9moghhar8cjcls/menu.txt?dl=0

The Big, por lo que puedo ver desde aquí, deberías buscas este trozo #swimbi y añadir en el css (margin-top:-35px) con ello debería verse ADMIN.

ok gracias bro una pregunta que raro no sube este tipo de menu a esta pagina para que lo descarguen


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"