Herramientas para Webmasters de Blogger: Enlace

Mostrando entradas con la etiqueta Enlace. Mostrar todas las entradas

13.6.13

Enlaces dentro de una entrada

Cuando el contenido de una entrada hace necesario, por su extensión, dividirlo en varias partes, es conveniente crear enlaces que lleven, desde un índice, a cada una de las partes en particular. Estos enlaces se denominan marcadores, y no solamente se utilizan en índices, aquí lo hacemos a manera de ejemplo; también se pueden utilizar, en entradas de contenido muy extenso, para facilitar al usuario ir a cualquier parte de la misma de forma rápida.

Veamos la explicación con un ejemplo:

En una entrada se va a tratar un artículo sobre informática, considerando los siguientes aspectos: definición, etimología, orígenes y funciones.

En el índice ponemos los títulos de cada una de las partes en las que hemos dividido el contenido de la entrada:

Índice

Definición
Etimología
Orígenes
Funciones

Enlace origen

Cada título del índice lo ponemos, en el editor HTML de la entrada, al crear la misma, dentro de un enlace que apunte a la parte de la entrada correspondiente (destino del enlace), así:

<a href="#Definición" title="Definición">Definición</a>

<a href="#Etimología" title="Etimología">Etimología</a>

<a href="#Orígenes" title="Orígenes">Orígenes</a>

<a href="#Funciones" title="Funciones">Funciones</a>

El signo numeral (#) hace que el enlace apunte a un elemento dentro de la misma entrada. Sin este signo el enlace no encontrará el elemento ya que lo buscará por fuera de la entrada, y aparecerá un mensaje indicando que esa página no existe.
El atributo title hace que aparezca un texto con el título correspondiente al poner el cursor sobre cada uno de ellos (es opcional).
Cada uno de los títulos con este color es el texto que aparece en el índice.

Destino del enlace

Cada uno de los títulos de cada una de las partes en que hemos dividido el contenido de la entrada, en el editor HTML de la misma, lo ponemos dentro de un código destino, así:

<a name="Definición"> <h3>Definición</h3></a>

<a name="Etimología"> <h3>Etimología</h3></a>

<a name="Orígenes"> <h3>Orígenes</h3></a>

<a name="Funciones"> <h3>Funciones</h3></a>

El atributo name asigna un nombre al destino del enlace para que éste lo pueda identificar.
Las etiquetas <h3>...</h3> dan a los títulos el formato de tales (según el formato por defecto de los títulos en cada blog, pueden ser <h1>...</h1> , <h2>...</h2> o <h3>...</h3>).
Cada uno de los Textos con este color es el título de cada una de las partes en que hemos dividido el contenido de la entrada.

Enlace "Ir al principio"

Por último podemos utilizar, al final de cada parte en que dividimos la entrada, o al final de la misma, el siguiente código, que nos genera un enlace para volver al principio de la entrada:

<a href="#"title="Ir al principio" >Ir al principio</a>

El texto Ir al principio podemos cambiarlo por "Ir al inicio" "Regresar" "Ir arriba" etc.
El atributo title hace que aparezca el texto Ir al principio al poner el cursor sobre el enlace.

Veamos los enlaces en funcionamiento:

9.12.09

Subrayar un link al pasar el mouse

Para lograr el efecto de subrayar un link cuando se pase el puntero del mouse sobre el mismo, el siguiente es el procedimiento:

1.- Vamos a Edición de HTML:

Página principal ► Diseño ► Plantilla ► Edición de HTML

2.- Al final de la plantilla, exactamente antes de la etiqueta </body>, se pega el siguiente código:

 <STYLE type="text/css">

A:link {COLOR: red; TEXT-DECORATION: none}

A:visited {COLOR: gray; TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:hover {COLOR: blue; TEXT-DECORATION: underline}

</STYLE>

3.- El código anterior afectará los colores de los link así:

Color actual: Rojo (red).
Color al poner el puntero del mouse sobre el link: Azul (blue).
Color del link visitado: Gris (gray).

4.- Los colores se pueden cambiar, cambiando los nombres (en inglés) de los mismos, en el código

5.- Se pueden conservar los colores originales de los link del blog, o los que se escogieron en Fuentes y colores, al diseñar el mismo, eliminando del código:

COLOR: red;
COLOR: gray;
COLOR: blue;

Entonces el código quedará así:

 <STYLE type="text/css">

A:link {TEXT-DECORATION: none}

A:visited {TEXT-DECORATION: none}

A:active {TEXT-DECORATION: none}

A:hover {TEXT-DECORATION: underline}

</STYLE>

Si no se quiere afectar la plantilla vamos a Diseño ► Diseño y añadimos un gadget del tipo HTML/JavaScript, en donde ponemos el código:

Ese gadget lo ponemos en la parte inferior de Entradas del blog:

Índice Edición HTML
Poner imagen de fondo a un blog	Cambiar enlaces pie de página
Eliminar enlaces pie de página	Eliminar 'Publicado por'
Eliminar fechas	Eliminar la hora
Efecto subrayar links	Eliminar barra superior
Evitar copias de blogs	Ocultar o eliminar sidebar
Eliminar y reemplazar cabecera	Ícono para barra de direcciones
Centrar títulos posts	Ensanchar blog
Cambiar color fondo posts	Color fondo sidebar
Agregar una sidebar	Color fondo de comentarios
Personalizar firma pie de posts	Personalizar fechas de los posts
Diseñador de plantillas de Blogger	Crear página de inicio o Portada
Eliminar enlaces a autores de plantillas	Cambiar de sitio la sidebar
Centrar imagen de la cebecera

◄Anterior | Siguiente►