JMiur [E]

Los posts de Blogger utilizan el lenguaje HTML y no está de más tratar de entender de que se trata esto, porque siempre será necesario recurrir a "toquetear" el código, a menos que sólo pretendamos agregar textos plano.

Un anclaje es un vínculo especial que nos permite desplazarnos a un lugar específico dentro de la página.

Su uso es muy común, generalmente, las páginas muy "largas" están separadas en secciones con vínculos a cada una de esas secciones lo que nos permite navegarlas como si fueran páginas individuales.

El código de este enlace puede estar en cualquier parte y, el destino, lo que llamamos ancla, es una marca en un punto determinado.

El anclaje lo creamos con la etiqueta A, como cualquier otro vínculo:
<a name="nombre"></a>
A veces, se coloca un texto pero no se mostrará como vínculo, el navegador lo mostrará como si fuera un texto cualquiera:
<a name="nombre">EJEMPLO</a>
Como se ve, la diferencia básica es que no se utiliza el atributo HREF sino el atributo NAME que contiene el nombre único con el que identificaremos la marca (el ancla).

El vínculo se escribe como uno normal donde el atributo HREF contiene el símbolo numeral y luego el nombre del anclaje:
<a href="#nombre">IR AL EJEMPLO</a>
Al pulsar en este vínculo, se salta al lugar de la página donde se encuentra el anclaje.

También puede crearse un vínculo a un ancla de otra página. Para eso, se procede de la misma manera pero agregando la dirección URL:
<a href="URLpagina#nombre">IR AL EJEMPLO</a>
Este tipo de vínculo tiene una variante, utilizar los atributos HREF y NAME en la misma etiqueta:
<a href="URLpagina" name="nombre">IR AL EJEMPLO</a>
¿Un ejemplo? IR A NUMEROS o IR AL FINAL

ESTAS SON LETRAS (esta línea contiene un anclaje)
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

ESTOS SON NUMEROS (esta línea contiene un anclaje)
0
1
2
3
4
5
6
7
8
9

IR A LETRAS

IR AL PRINCIPIO

Eso es todo.

23 comentarios:

Nico  

Sencillo y útil

Responder
JMiur  

Cuidado con el editor de Blogger, recomiendo usar sólo el modo HTML y no la previsualización.

Responder
Soliradidad  

Bueno es a lo mismo que me refería, y veo que tu también ya conoces lo que sucede con el editor de blogger. creo que ya encontré el problema y es cuando dices no previsualizar, y solo en html. gracias Jmiur

Responder
JMiur  

Si, ese es un problema; no se puede previsualizar el post; no hay remedio.

Responder
Security All Cali  

Hola, gracias por los consejos; pero tengo una duda ¿es posible crear anclas para la página de inicio o para la plantilla de blogger, y no por post?

O sea, ¿puedo por ejemplo hacer un ancla que me lleve directamente a un widget, por ejemplo, más abajo?

Responder
JMiur  

Sí. En ese caso, se escribe normalmente como en cualquier otra página web aunque no puden ponerse códigos afuera del widget sino adentro, luego de <b:includable id='main'>

Si te fijas, verás que, normalmente, las plantillas tienen anclajes en varioas partes como por ejemplo:
<a name='comments'/>

Responder
Security All Cali  

Gracias por la respuesta JMiur; estaba buscando lo de las anclas hace tiempo y me habían dicho que no se podía, que sólo era posible en los posts. Todos los trucajes de aquí son valiosos y sencillos. Los usé para dirigir los enlaces de mi barra de navegación de contenido en mi blog, hacia el espacio que necesitaba. Me molestaba que siempre apareciera todo el espacio de arriba y no hacia abajo, donde lo necesitaba, en mi caso sobre el widget de "content":

http://securityallcali.blogspot.com

Gracias

Responder
JMiur  

Puedes agregar los que quieres, usa los IDs de los divs o crea unos a tu gusto como si fuera una página web "normal" no habrá problemas. Por el contrario, en los posts es más engorroso ya que no pueden escribirse en modo Redactar, hay que hacerlo en modo HTML y no editarlos jamás en modo Redactar porque sino, cambiará el href del enlace.

Responder
neuen  

me es imposble fallo siempre que puede ser?

Responder
JMiur  

¿Cómo puede respoderse eso?

Responder
neuen  

HOLA SIGO SIN PODER HACER FUNCIONAR LOS ANCLAJES LES DEJO LA PAGINA PARA QUE PUEDAN VER EL ERROR, YA QUE CUANDO TOCO EL ANCLAJE ME MANDA A INICIAR SECION, POR FAVOR SI ME PUEDEN AYUDAR MUY AGRADECIDO

http://americalatinauna.blogspot.com/2010/03/mitos-y-leyendas-de-bolivia.html

Responder
JMiur  

Cuando se incluyen en un post, debe hacerse desde el modo HTML y no volver al modo redactar ya que si no, el editor de Blogger cambiará el código. Si editas esa entrada ahora, verás que el enlace ha cambaido y dice cosas como:

http://www.blogger.com/post-edit.g?blogID=1399092038301871266&postID=1633929728201988651#FAQ1

cuando debería decir #FAQ1

Editalo, vuelve a cambair la URL pero no vuelvas al modo Redactar.

Responder
neuen  

Perfecto ya lo solucione, es verda observe eso y por ahi venia el problema, una plantilla de pruebas lo tomo sin errores no se bien como ,pero copie el html de ahi lo pegue en el de mi blog y santo remedio, por la hora estoy medio confundido mañana lo voy ameditar mejor, te doy las gracias por tu ayuda y por la rapides en responderme.un abrazo

Responder
SMB  

estimado, algún mecanismo para suavizar el desplazamiento?

saludos.

Responder
JMiur  

Utilizando algún script: este es un ejemlo.

Responder
luispihormiguero  

¡Muchísimas gracias! :) Me viene estupendamente.

Responder
luispihormiguero  

Oye, yo he previsualizado... ¿qué pasa? ¡No me digas que se me va a fastidiar la edición de HTML por eso! ¿O te referías a otra cosa?

Responder
JMiur  

Simplemente fíjate si el código ha cambiado.

Responder
luispihormiguero  

Vale, lo que queríais decir es que la previsualización no sirve para observar los cambios en una edición con HTML...

Bueno, os aviso de una cosa, para que no tengáis, como he tenido yo, un tropezón: una vez puestos los anclajes y anclas en una entrada, JAMÁS DE LOS JAMASES editéis esa entrada en modo "Redactar", porque dejarán de funcionar, y tendréis que hacerlos de nuevo.

Responder
Miguel-Anxo Varela Diaz  

Me ha encantado esta guía. Muy claro y bien explicado todo. Yo tengo mi guía hecha en una libretita y voy mirando por ahí cuando se me olvida algo, pero hoy la he ampliado.

¡La de tiempo que he perdido por no conocer tu blog!

En un blog me interesaba que las imágenes "floten" a la derecha, sin que cada una cree un nuevo bloque. Al subir imágenes a Google se añade siempre la etiqueta div class="separator" que tiene la característica de incluir en su estilo "clear: both", por lo que de "float" ná de ná.

He probado a añadir un CSS personalizado en el diseñador de plantillas con la clase div.separator pero no valía para obligar a flotar. Al leer tu artículo se me ocurrió probar a "forzar" las cosas con "inline" y ¡zas! ¡Ahora ya puedo incluir mini-fotos una al lado de la otra!

Genial. Muchísimas gracias por compartir tanto y tan bueno.

Por si puede ser interesante, o si he cometido algún error, he incluido como CSS personalizado esto:

div.separator {
display:inline;
float:right;
margin-right:30px;
text-align:left;
}

JMiur  

No. es correco. Como todo DIV es un elemento de bloque, por defecto, al propeidad display es block as´ique para cambiarla, hay que pone otro valor como display:inline.

El clear:both anula la flotación que viene de un elemento superior así que el problema no estaba por ese lado.

Otra forma es, simplemente, subir las imágenes y eliminar manualment el código extra de Blogger.

Responder
karly  

hola tengo un problema con las anclas, yo uso mi pagina para alojar documentos y libros y leerlos desde celular, la tenia en google sitios pero no me gustaba mucho y la voy a cambiar a blogger pero no puedo poner capitulos a los libros largos, se me dificulta a la hora de poner los codigos, me pueden ayudar donde tengo que poner cada codigo

JMiur  

Imposible responder eso. Tal vez, sería más razonable que cada capítulo fuera una entrada distinta.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR