Enlaces en la misma página

Existen miles de razones válidas para poner enlaces en nuestro blog, y particularmente en nuestra misma página. Lo primero ayuda a que nuestros lectores conozcan mejor nuestras entradas y se direccionen a ellas de una manera específica y no tengan que buscar por todo el blog  buscándolas sin obtener resultados inmediatos, y lo segundo para cuando nuestra entrada es significativamente larga y lo que nos interesa de la entrada está por la mitad de ésta o casi al final. También, por supuesto, podemos poner enlaces hacia otras páginas web o blogs que nos resultan interesantes o que tenemos que hacer referencia para darle más sentido a nuestra entrada en particular. Un buen ejemplo de estos enlaces sería este blog de pruebas que te lleva (abriéndose en otra ventana) a otros de mis blogs donde realizo las pruebas de este blog antes de publicarlas, y también este enlace hacia mi página de Google+.

De cualquier manera, sea para lo que fuere, los enlaces se hicieron para descomplicarnos la vida a los blogeros y, bien utilizados, te pueden ayudar a conseguir un buen PageRank.

Pero ¿cómo creo un enlace en mi misma página o a otra? Sencillo. Primero que nada debes saber que los enlaces dentro de la misma entrada se crearán en la sección de htlm y no en la de redactar, de modo que deberás escribir toda la entrada (de modo normal) en esta sección y solo al final, antes de publicarla pasas a la sección html para agregarle los enlaces, de lo contrario los códigos te jugarán una mala pasada.

Comprendido esto pongamos manos a la obra.

Los atributos que emplearemos para poner estos enlaces dentro de la misma página son:

<h1 id=”TituloUno”>Título Uno</h1>

<a href=”#titulouno”>enlace al Título Uno</a>

Así se vería el título de una entrada cualquiera con sus respectivos subtítulos (que servirán de enlace a otra parte de la misma página) en la sección de redactar.

Animales Salvajes

Lobos Marinos Leones Africanos Cocodrilos Muertos

Lobos Marinos

Texto texto texto…

Leones Africanos

Texto texto texto…

Cocodrilos Muertos

Texto texto texto…

Lo que está en naranja son las palabras que tienen enlace

Y así se verá en la sección de html una vez que agregues los enlaces:

<a href="#LobosMarinos">Lobos Marinos</a>

<a href="#LeonesAfricanos">Leones Africanos</a>

<a href="#CocodrilosMuertos">Cocodrilos Muertos</a>

Y así los títulos a enlazar en html:

Lobos Marinos (<h1 id=”LobosMarinos”>Lobos Marinos</h1>)

 Texto texto texto…

Leones Africanos (<h1 id="LeonesAfricanos">Leones Africanos</h1>)

Texto texto texto…

Cocodrilos Muertos (<h1 id="CocodrilosMuertos">Cocodrilos Muertos</h1>)

Texto texto texto…

Importante: Debes saber que estos atributos sí reconocen MAYÚSCULAS y minúsculas por lo que deberás copiar exactamente como está escrita la frase que quieres enlazar.

Puedes ver el ejemplo en este Demo.

Pero, ¿y si quiero que algún enlace abra en otra ventana? Agrega target=”blank” en el código del enlace:

 <a target=”blank” href="http://blogerybloger">Bloger & Bloger</a>

Aunque este atributo ya viene por defecto en las nuevas plantillas de blogger cada vez que ponemos un enlace en una entrada, podemos personalizar el enlace y ponerle una descripción o un título al enlace que se visualizará si pones el ratón  sin hacer clic

BLOGER & BLOGER

Para hacer esto debemos agregar el atributo title=”tu titulo” al enlace inmediatamente después de la url de la página.

<a target=”blank” href="http://blogerybloger.blogspot.com" title="Visita Bloger & Bloger">Bloger & Bloger</a>

Y si a todo esto quieres agregarle una imagen, solo agrega <img src=”tufotoaquí.png” antes de title=”” y te quedará así:

 <a href="http://blogerybloger.blogspot.com"> <img src="tufotoaquí.png" title="Aprende HTML con 

Bloger & Bloger"/></a> 

Aunque a simple vista parezca complicado, a medida que lo vayas haciendo te resultará más sencillo. Prueba tus intentos en un blog de pruebas para que no vayas a echar a perder tu blog principal. Recuerda que nadie nace aprendiendo y solo el esfuerzo constante nos hace buenos en algo.