PERSONALIZAR ENLACES

Los enlaces o links en una web o un blog es muy importante que estén bien definidos ya que de esta forma los visitantes podrán ir navegando de una forma cómoda por vuestro espacio. Es posible personalizarlos y tendréis que adaptarlos a vuestro sitio de forma que queden bien definidos, es decir resalten sobre el resto de textos. Para ello vamos a explicar de una forma muy sencilla como hacerlo. Para los que utilicen blogger como platforma deberán acceder al código de su plantilla en Diseño->Edición de HTML.

Existen 3 posibles estados de un enlace que son los siguientes:

a:link { } -> Estilo del Enlace.
a:hover { }-> Estilo del Enlace cuando pasamos el Mouse sobre el.
a:visited { }-> Estilo del Enlace cuando ya fue visitado.

Teniendo esto en cuenta podremos personalizar cada uno de los estados con los siguientes atributos.

color:#RRGGBB;
Podéis consultar los posibles colores aqui.

text-decoration:valor;
Posibles valores:
none - no tiene ningún estilo.
underline - el texto aparecera subrayado.
line-trough - el texto aparecera tachado.
overline - el texto aparecera con una raya en la parte superior.

font-family:valor;
El Valor es definido por el nombre de la letra, ejemplo "verdana","tahoma", etc.

font-size:12px;
El valor numérico representa el tamaño de la letra.

font-weight:valor;
Dos valores, "bold" para Negritas y "Normal".

Un ejemplo de la estructura del código es la siguiente:

a:link {
color:#000000;
text-decoration:none;
font-family:verdana;
font-size:10px;
font-weight:bold;
}

a:hover {
color:#CD4B4B;
text-decoration:underline;
}
Espero que os sea de utilidad, ya me contaréis como vais personalizando vuestros enlaces ;)


SELECCIONAR DISTINTOS ESTILOS

Cursando una asignatura me enseñaron algo muy util y querria compartirlo con vosotros, no va orientado a los que tienen blogger, blogger como todos sabemos tiene ciertas limitaciones y una de ellas es que no podemos alojar diferentes hojas de estilo, me imagino que debe de haber alguna alternativa que ciertamente ahora no se me ocurre.

Bueno lo que propongo es que los visitantes puedan cambiar el estilo de la pagina mediante un pequeño 'menu'. En general las buenas webs tienen definidos diferentes estilos, normalmente se crean uno de alto contraste para discapacitados visuales, otro de impresión y uno principal y alternativo. Firefox tiene la opción de seleccionar el estilo desde Ver->Estilo de pagina, el problema venia como siempre con IE que no poseia esta opción, por tanto los diseñadores tenian que crear una alternativa para que todo el mundo pudiera seleccionar los distintos estilos. Debo resaltar que en la última versión (8.0) de IE si que la incorpora pero como siempre tenemos que diseñar para todos y desgraciadamente aún hay mucha gente con versiones antiguas de IE.

Por ejemplo en nuestra web tenemos los links a las distintas hojas de estilo de la siguiente forma:

<link rel="stylesheet" type="text/css" href="Principal.css" title="Predeterminado" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="Secundario.css" media="screen"
title="Secundario" />
<link rel="stylesheet" type="text/css" href="print.css" title="Impresion" />


Tenemos 3 estilos resaltados en negrita.

Ahora definiremos un par de enlaces en los que daremos la opción de simplemente haciendo click encima cambiará el estilo de nuestra pagina:

<p><b>Elige tu estilo</b></p><br />
<a href="Javascript:estilo('Predeterminado')">Principal</a><br /><br />
<a href="Javascript:estilo('Secundario')">Secundario</a>


Llegado a este punto tan solo tendremos que insertar nuestra función Javascript que permitirá cambiar de un estilo a otro.

function estilo(titulo) {//Para cambiar el estilo.

var arrayLink = document.getElementsByTagName("link");
for(var i = 0; i < arrayLink.length; i++) {
// Sólo aquellas etiquetas link que hacen referencia a un estilo
// y que no sea para impresión
if(arrayLink[i].getAttribute("rel") != null &&
arrayLink[i].getAttribute("rel").indexOf("stylesheet") != -1 &&
arrayLink[i].getAttribute("media") != "print") {
// Si tiene título es un estilo preferido o alternativo,
// si no tiene título es un estilo
// predeterminado y siempre tiene que utilizarse
if(arrayLink[i].getAttribute("title") != null &&
arrayLink[i].getAttribute("title").length > 0) {
if(arrayLink[i].getAttribute("title") == titulo)
arrayLink[i].disabled = false;
else
arrayLink[i].disabled = true;
}}}}

A esta función lo que le entra es el nombre del estilo seleccionado y busca dentro de las etiquetas link, cuando la encuentra lo activa poniendolo a true. Cuidado con el disabled, disabled=true es que está deshabilitado!!.