Se trata de un menú horizontal con las clasificaciones y resultados de la Liga, de las distintas categorías del Sevilla FC, incluyendo TV y Radio.
Para implantarlo en vuestros blog solo necesitaréis introducir el código en un gadget en Html/Javascript.
Os recomiendo por su longitud, situarlo bajo la cabecera.
Si vosotros queréis personalizarlo, os dejo una página donde ver los colores y otra donde ver como vá quedando.
Para los colores en esta PAGINA aquí:
Para ver los resultados de como queda, copia el código y pégalo aquí, luego clik en ver resultados.:
Ver ejemplo del menú aquí:
Si ya lo tienes todo controlado vamos a instalarlo.
Vamos ¡Vamos al Lío!
Ir a Blogger
1-Un clic en “Diseño”
2-Clic en “Añadir un gadget”
3-Busca el widget que dice “HTML-Javascript” y ábrelo
4-Coloca el siguiente codigo en el interior
<style> #menulineup ul{ margin:0; margin-left: 100px; /*Margen izquierdo entre la primera pestaña y el borde*/ padding: 0; list-style: none; } #menulineup li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; } #menulineup a{ float: left; display: block; font: bold 10px Arial; color:white; text-decoration: none; margin: 0 2px 0 0; /*Margen entre cada pestaña*/ padding: 5px 10px 5px 10px; background-color: #980000 ; /*Color de las pestañas*/ border-bottom: 8px solid white; } #menulineup a:hover{ background-color: #E80000 ; /*Color de las pestañas al pasar el cursor*/ padding-top: 10px; padding-bottom: 0; border-bottom-color: #8C8984; /*Color del borde inferior al pasar el cursor*/ color:white; } </style> <div id="menulineup"><div class="menulineup"> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=265,height=285,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 1º</b> </a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=270,height=555,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 2º</b> </a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 3º</b> </a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 4º</b></a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 5º</b></A> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/"><b>Menú 6º</b> </a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=460,height=350,top=10px,left=150px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/" target=_blank><b>Menú 7º</b></a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=460,height=350,top=10px,left=150px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/" target=_blank><b>Menú 8º</b></a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=460,height=350,top=10px,left=150px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/" target=_blank><b>Menú 9º</b></a> <a class="menulineup" onclick="window.open(this.href, this.target, 'width=460,height=350,top=10px,left=150px'); return false;" href="https://fmgtutorialesparablogger.blogspot.com/" target=_blank><b>Menú 10º</b></a> </div></div> |
Veréis que se puede configurar completamente además de ponerle mas pestañas quitarselas etc...
0 comentarios: