JMiur [E]

¿Donde están los códigos de los vínculos de retroceso en la plantilla? Por varios lados, siempre dentro del elemento Blog.

En la página principal los veremos por defecto con el texto Vínculos a esta entrada y es un enlace que sólo nos llevará a la página individual del post y se posicionará en el footer:
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>
<data:top.backlinkLabel/>
</a>
</b:if>
</b:if>
</span>
el enlace generado es de este estilo:

http://nombre.blogspot.com/año/mes/titulo.html#links

donde #links es el nombre (anclaje) que tiene esa parte de la plantilla (¿qué es un anclaje?).

<data:top.backlinkLabel/> es el texto visible y puede ser reemplazado por cualquier otro o utilizar una imagen

Las propiedades CSS que la controlan, por lo general no están definidas y no suelen ser necesarias ya que se usan las mismas que para el resto de los enlaces del footer.


Más adelante, encontraremos el código que genera un ícono al lado de cada vínculo y con el cual podemos eliminarlo de manera similar al que vemos en los comentarios. Es algo así:
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
A los efectos de la personalización de nuestro blog no es un área importante así que podemos pasarla por alto.

Lo que genera el bloque donde se mostrarán los vínculos de retroceso y que sólo se muestra en las paginas individuales tiene este código:
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
Ahí, ya vemos que ese bloque tiene un ID (un nombre) que es con el que podremos controlarlo. Por defecto se llama backlinks-container y no suele estar incluido en las plantillas pero, no es problema, podemos agregarlo justo antes de </b:skin>. Por ejemplo, en mi caso le he puesto estas propiedades:
#backlinks-container {
clear: both;
background: none;
padding-top: 20px;
}

En el código anterior no parece haber nada salvo el DIV y esto:

<b:include data='post' name='backlinks'/>

que es justamente el código que usa Blogger para indicar que ahí debe insertarse algo. Eso que inserta, lo podemos ver en el último código que es el más largo y donde encontraremos lo que falta para personalizar el área.

En una plantilla típica dice esto:
<b:includable id='backlinks' var='post'>
<a name='links'/>
<h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'>&#160;</span>
<a expr:href='data:backlink.url' rel='nofollow'>
<data:backlink.title/>
</a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'>
<data:post.authorLabel/> <data:backlink.author/>
</span>
<span class='comment-timestamp'>
<data:post.timestampLabel/> <data:backlink.timestamp/>
</span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link'
expr:href='data:post.createLinkUrl'
expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;'
target='_blank'>
<data:post.createLinkLabel/>
</a>
</p>
</b:includable>
Ahhhhhh ... renuncio.

Es lo primero que uno piensa y es razonable hacerlo pero, vamos despacio porque no es necesario modificarlo demasiado sino tratar de entender qué hace cada cosa.

<a name='links'/> es el nombre del anclaje; sólo sirve para posicionarse allí.

<h4><data:post.backlinksLabel/></h4> es el título que nos muestra Blogger por defecto y que suele tener una fuente gigante donde leemos Vínculos a esta entrada. Por defecto, es igual que el título e los comentarios pero podemos darle propiedades especiales agregándolas al CSS de la plantilla:
#backlinks-container h4 {
/* aquí ponemos las propiedades */
}
Lo que sigue es un bucle que realiza Blogger buscando en su base de datos los enlaces que existan y mostrándolos como una lista. La etiqueta DL crea la lista y las etiquetas DT son cada una de las líneas que tienen este orden:

un ícono que cambia cuando hacemos click para mostrar que está contraido o deplegado
<data:backlink.title/> es el título del post que es un enlace al blog donde se publicó
<data:post.authorLabel/> el nombre del autor del post
<data:backlink.author/> la dirección URL del perfil del autor
<data:post.timestampLabel/> <data:backlink.timestamp/> la fecha y hora de la publicación
<data:backlink.snippet/> es un resumen del texto del post que nos enlaza y está oculto


Todo eso no tiene propiedades diferenciadas, las plantillas suelen tener propiedades genéricas que hacen que se vea igual que el resto de los comentarios. Tampoco está previsto así que deberemos agregarle clases a cada cosas que queremos cambiar.

Le agregamos una clase al título:
<a class='backlinkTitulo' expr:href='data:backlink.url' rel='nofollow'>

cambiamos la clase CSS del autor <span class='comment-author'> por otra:
<span class='backlinkAutor'>


cambiamos la clase CSS de la fecha <span class='comment-timestamp'> por otra:
<span class='backlinkFecha'>

para personalizar el contenido <data:backlink.snippet/> habrá que utilizar la etiqueta SPAN:
<span class='backlinkContenido'><data:backlink.snippet/></span>

Ahora, ya podemos colocar las definiciones en la plantilla. Otra vez, este un ejemplo personal:
a.backlinkTitulo, a.backlinkTitulo:visited {   /* el enlace del título */
color: #778899;
font-weight: normal;
text-decoration: none;
}
a.backlinkTitulo:hover { /* efecto rollover en el enlace */
color: #CCCCCC;
}
span.backlinkAutor { /* el autor */
color: #99AABB;
font-family: Tahoma;
font-size: 12px;
padding: 10px 25px 0 0;
text-align: right;
}
span.backlinkFecha { /* la fecha */
color: #99AABB;
font-size: 10px;
text-align: right;
}
span.backlinkContenido { /* el contenido oculto */
display: block;
background-color: #1E252D;
margin: 7px 7px 7px 20px;
padding: 10px;
text-align: justify;
width: 90%;
}
Si, como en mi caso, no queremos mostrar alguno de los datos, simplemente lo eliminamos o, mejor aún, lo "comentamos" para no perderlo si es que alguna vez queremos restaurarlo. Por ejemplo:

<!-- <data:post.timestampLabel/> <data:backlink.timestamp/> -->


Como último paso para este bloque nos queda la posibilidad de personalizar los íconos que usa Blogger por defecto y para eso, igual que alguna vez lo hicimos con el elemento Archivos, no puede hacerse igual que con el resto de las propiedades porque Blogger agrega una hoja de estilo que sobrescribe la nuestra así que, debemos esperar que la inserte y recién luego cambiarla.

Lo hacemos colocando el estilo justo después de la etiqueta <body>. En lo personal, usé las mismas imágenes de los triangulitos, les cambié de color y las subí a un servidor:
<style type='text/css'>
.backlink-toggle-zippy {
background-image:url(URL_icotriangle_open.gif);
}
.expanded-backlink .backlink-toggle-zippy {
background-image:url(URL_icoTriangle_ltr.gif);
}
</style>
Ahora sí, sólo nos queda cambiar el enlace que por defecto dice Crear un vínculo. Eso es lo que se muestra en el final del código, lo que está entre <p class='comment-footer'> y </p>.

<data:post.createLinkLabel/> es el texto que se muestra

Como cualquier enlace, podemos cambiar el texto o utilizar una imagen.

30 comentarios:

La Blogueria  

Ah, ahora sí veo el enlace :D pero estoy segura de que faltan muchísimos...

Creo que esto va como los pimientos de padrón, que pican ás veces sí, ás veces, non.

Nunca me había fijado en el "Blog This" y nunca lo he usado.

Responder
JMiur  

¡Apareció el enlace! ¡Milagro!

:D

Responder
La Blogueria  

:D ya sé: estuvo ahí todo el tiempo y yo en mi gran empanada tengo que esperar a que me lo pongan flasheando pa enterarme.

O eso, o funciona raro; o ambos.

Responder
La Blogueria  

Olvidaba decir que... eres un sol :)

Responder
JMiur  

Jajaja, obviamente algo no funciona bien con el sistema ;)

Responder
Gem@  

Saludos maestro pasé a saludar y comprobar que sigue al pié del cañón como debe ser ;)

Responder
Anónimo  

alguien sabe que paso con photobucket.com ? Desaparecio? y junto con mis emoticones? :S

Responder
JMiur  

Un abrazo, Gem@ :D

Opcionez: en este momento no veo problemas con Photobucket.

Responder
Anónimo  

Exelente J.Miur , no me habia fijado en los enlaces

Responder
JMiur  

Es que durante mucho tiempo estuvieron sin funcionar en absoluto.

Responder
Anónimo  

JMiur al parecer si tuvieron algún problema, y en algunos lugares aun no esta disponible, de hecho no puedo ver imágenes alojadas en photobucket. Aqui te pongo el screen shot.

Esperemos se solucione. Entré desde una pagina con proxy y si pude ver la pagina, pero así directo me redirecciona a atspace.com.

Responder
JMiur  

Ya veo, amigo; por suerte, no me he dado cuenta :)

Responder
B-Pirata  

Muy bueno toda la explicación de los backlinks, pero tengo una duda dando vuelta...
Si yo activo los vinculos en mi blog,aparecerá abajo de los comentarios "crera un vinculo" y despues podrá venir cualquier persona y pinchar crear vinculo y crear uno... o es algo automatico... y si ponen enlaces que no esten relacionados o hacia "blog spam", como lo controlo?

Responder
JMiur  

Si está activada la opción, los visitantes podrán usar esa facilidad pero en realidad, lo que importa es que verás esos enlaces sin importar si se hacen de esa manera o de cualquier otra.

La opción sólo muestra lo que existe, si tienes enlaces a blogs-spam o cualquier otro que no te guste no puedes evitarlo, sólo puedes "no mostrarlos". Eso se puede hacer individualmente porque aparecerán de forma similar a los comentarios, con un ícono que te permite eliminarlos.

Responder
Anónimo  

Hola.
Mira tengo un problema con mi blog; yo quiero que debajo del formulario de comentarios , de los comentarios y demás, aparezca el enlace de " Crear vinculo a esta entrada" ( así como aparece en tu blog, en el de El Escaparate y el de Gema).
No sé si deba de aparecer por defecto ese enlace, pero en mi blog no aparece; la plantilla que uso es la Rounders 3 y me gustaría que me dijeses cómo puedo hacer para que aparezca ése enlace.

Saludos y gracias por la ayuda.

Responder
JMiur  

Debes fijarte que estén habilitados. Eso lo haces en Diseño. En la primera ventana, Editas el elemento Blog y allí marcas la opción Vínculos. El código, es parte de las plantillas por defecto.

Responder
Anónimo  

Hola, soy Mauro y quisiera añadir vinculos como los que indicas en esta página, en un blog de una empresa. Mi problema es que no encuentro los primeros codigos que indicas en el principio. Mi correo es mauro_rp13@hotmail.com te agraceria si me pudieras ayudar, Gracias.

Responder
JMiur  

Tendría que ver tu blog online para ver si tienen otros nombres y qie puedas identificarlos.

Responder
xhabyra  

Me ha servido de mucho esta informacion para poner una imagen en el lugar del "crear un vinculo" a decir verdad visito frecuentemente tu blog (soy suscriptor) y casi nunca te agradezco, asi que hoy toca

MUCHAS GRACIAS

:D

Responder
JMiur  

Gracias por el comentario, Xhabyra. Y no te preocupes que yo tampoco suelo dejar comentarios en muchos lados :D

Responder
EM2.0  

Hola, Gema me ha remitido a esta entrada y lo he estado haciendo, he dejado las propiedades que tu das en CSS para ver que cambiaba y luego personalizar yo, pero es que no he conseguido que cambie nada y no se que hago mal. En principio lo que quería era mover la fecha de los comentarios, hacer mas pequeño donde pone enlaces a esta entrada y ponerlo con otro texto debajo del formulario de comentarios, pero no he conseguido cambiar nada de nada. Admito sugerencias o un salvavidas, ambas cosas me valen. Maestro ¿me ayudas?

Responder
JMiur  

¿La fecha de los comentarios que se ve debajo de cada uno de ellos? Para eso:

.comment-footer {
font-size:12px;
margin:0;
padding-top:0;
text-align:center;
}
en lugar de text-align:center; poner text-align:right;

La parte de "enlaes a esta entrada" eso, sólo lo veo en la página principal o no lo encuentro en las otras. De todos modos, son enlaces dentro del footer de cada post así que, apra controlar su tamaño, habría que agregar una definición:

a.comment-link {
y aqui poner las propiedades
}

¿Es algo de esto?

Responder
EM2.0  

Si es eso y no es eso, te envió un formulario de contacto y te lo explico bien.

Responder
Nathan yo  

Me sigue dando el mismo porblema no da los backlinks mira: http://globalmention.blogspot.com/

Responder
JMiur  

No puedo fijarme porque no sé donde hay backlinks y donde no los hay.

Responder
Nathan yo  

En esta entrada hay un backlink: http://globalmention.blogspot.com/2009/09/emily-osmet-jackson-earles-emmy-awards.html, en esta también: http://globalmention.blogspot.com/2009/07/hilary-duff-posiblemente-en-bogota.html
pero no aparecen indexadas las respectivas paginas

Responder
JMiur  

El código de la plantilla no puede apreciarse online; sólo veo que aparece el título y el enlace correspondiente. Supongo, que el código que muestra los backinks debe estar bien porque es raro que lo modifiquemos.

Entonces, cuando dices que no se muestran backlinks, ¿te estás refiriendo a que sabes que ceirtas entradas tienen enlaces pero allí no se ven? Si es eso, no es de extrañar porque el sistema de Blogger para registrar backlinks es espantoso y hace ya bastante tiempo que funciona mal.

Responder
Nathan yo  

si a eso me refiero... Ay no puede ser que Blogger no haya arreglado eso, cuando Wordpress tiene un sistema de backlinks tan bueno :S

Responder
Nathan yo  

Hola, fíjate que buscando sobre el tema encontré esta entrada en un blog para activar los Trackbacks y Pingbacks en Blogger, la verdad no sé como se utiliza esto y si me lo pudieras explicar sería maravilloso, porque por lo que tengo entendido tiene el mismo efecto o no? Bueno espero que haya una forma de aplicarlos y personalizarlos, link(http://wiki.js-kit.com/Trackbacks-and-Pingbacks) Gracias.

Responder
JMiur  

Pués, aparentemente, es un servicio pago para gerenciar comentarios. No parece ser lo que buscas.

Responder

¿Quiere dejar un comentario?

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

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