11 diciembre 2010

Menú horizontal de la Liga

Ayer me dió por preparar este menú y creo que ha quedado bién, después de algunos quebraderos de cabeza, lo logré.

Se trata de un menú horizontal con las clasificaciones y resultados de la Liga, de las distintas categorías del Sevilla FC, incluiendo 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.

Yo lo he personalizado con mis colores (blanco y rojo), pero os lo dejo con otros colores.

Si el tamaño os resulta bastante grande, reducir el texto donde dice: font-size: 10pt; colocar 8-7, menos, nó, porque se verían las letras muy pequeñas.
Si aún así, os queda demasiado largo, deberéis eliminar una parte del código, ya sea TV o Radio, y para eso tendréis que borrar esta parte:
<a class="botonMenu" href="http://www.emisorasonline.net/conexion/511sevillaPGA598754/index.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=380,height=10'); return false;"><b>SFC Radio</b></a>

Esta sería la radio, si fuese la tele, borráis todo lo comprendido entre <a class=..............</b></a>

Si vosotros queréis personalizarlo, os dejo una página donde ver los colores y otra donde ver como vá quedando.

Colores
Forma  Introducir el código en la parte blanca,cambiar colores y dar en ver resultados.

Estos son los códigos para la plantilla blanca o roja:


<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #FFFFFF;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #6A0707;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #6A0707;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #791B10;
color:red;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm"><b>Resultados 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm"><b>Clasificación 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-2b-h35.htm"><b>Resultados 2ª B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm"><b>Clasificación 2ªB</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm"><b>Resultados 3ª</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm"><b>Clasificación 3ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=400,height=400,top=10px,left=150px'); return false;" href="http://82.203.210.184/sevilla/swf/SevillaFC.swf" target=_blank><b>SFC TV</b></a>
<a class="botonMenu" href="http://www.emisorasonline.net/conexion/511sevillaPGA598754/index.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=380,height=10'); return false;"><b>SFC Radio</b></a>
</div></div>

Esta para una plantilla Oscura:


<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #000000;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #ffffff;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #6A0707;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #791B10;
color:red;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm"><b>Resultados 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm"><b>Clasificación 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-2b-h35.htm"><b>Resultados 2ª B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm"><b>Clasificación 2ªB</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm"><b>Resultados 3ª</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm"><b>Clasificación 3ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=400,height=400,top=10px,left=150px'); return false;" href="http://82.203.210.184/sevilla/swf/SevillaFC.swf" target=_blank><b>SFC TV</b></a>
<a class="botonMenu" href="http://www.emisorasonline.net/conexion/511sevillaPGA598754/index.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=380,height=10'); return false;"><b>SFC Radio</b></a>
</div></div>

Y esta para una beig o marrón


<style type="text/css">
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: Verdana, Arial,comic;
font-size: 10pt;

}

#menu div.barraMenu {

text-align: center;
}

#menu div.barraMenu a.botonMenu {

background-color: #CEB37C;
BORDER:SOLID 1PX;
border-color:#6A0707;
color: #ffffff;

-moz-border-radius: 6px ;
-Webkit-border-radius: 6px ;

cursor: pointer;
padding: 4px 6px 2px 5px;
text-decoration: none;
}

#menu div.barraMenu a.botonMenu:hover {
background-color: #453516;

color: WHITE;
}

#menu div.barraMenu a.botonMenu:active {
background-color: #ffffff;
color:brown;
}
</style>
<div id="menu"><div class="barraMenu">
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultadosprimeradivision-h29.htm"><b>Resultados 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=300,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacionprimeradivision-h31.htm"><b>Clasificación 1ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-2b-h35.htm"><b>Resultados 2ª B</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=370,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-2b-h36.htm"><b>Clasificación 2ªB</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=270,height=260,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/resultados-3-grupo-10-h37.htm"><b>Resultados 3ª</b>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=280,height=455,top=20px,left=100px'); return false;" href="http://www.sevillistasporelmundo.com/clasificacion-3-grupo-10-h38.htm"><b>Clasificación 3ª</b> </a>
<a class="botonMenu" onclick="window.open(this.href, this.target, 'width=400,height=400,top=10px,left=150px'); return false;" href="http://82.203.210.184/sevilla/swf/SevillaFC.swf" target=_blank><b>SFC TV</b></a>
<a class="botonMenu" href="http://www.emisorasonline.net/conexion/511sevillaPGA598754/index.htm" target="_blank" onclick="window.open(this.href, this.target, 'width=380,height=10'); return false;"><b>SFC Radio</b></a>
</div></div>


Si os ha gustado o tenéis algunas dudas "Coméntarlo"

Escrito por:

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

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

2 comentarios

Antonio, acabo de ver tu comentario en mi blog.
La verdad es que ayer te quise agradecer aquí lo del menú, pero me dio error al entrar (mi modem estaba regular y como tu blog tarda en cargarse pues no podia) y decidi dejarlo para después, y como verás, pues se me ha olvidado.

pues lo dicho, gracias aunque sea tarde..

Hola Antonio.
La barra no me queda tal cual, me aparece en dos filas y me gustaría tenerlo en todo la ancho del blog. ¿Por qué no me sale así?

Saludos.


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"