viernes, 17 de abril de 2009

ENTRADAS RELACIONADAS

Añadir una lista de entradas relacionadas a cierto post del blog es muy recomendable ya que permite a los usuarios apollarse en ciertas entradas relacionadas con el tema de la entrada principal. Es muy interesante también ya que es una forma de retener a los lectores ofreciendoles una lista de entradas del mismo tipo de la entrada que el seleccionó.

¿Cómo funciona?

El script que mostraré a continuación se apolla principalmente en el contenido de las etiquetas, por tanto para poder incorporarlo tendréis que tener previamente definidas etiquetas.
Para entenderlo mejor os pongo una imagen para que veáis de lo que hablo. Todo hay que decir que estaréis cansados de utilizarlo provablemente en otros blogs o webs.

Esto lo podeis observar al final de cada entrada de mi blog, si queréis insertarlo en vuestro blog tendréis que seguir los siguientes pasos. Aviso no os asustéis, el código a insertar es algo largo pero muy simple ya que tan solo tendréis que modificar 2 cositas de nada.
Recomendable guardar la plantilla antes de realizar las modificaciones.

Nota:Recordar que podéis buscar coincidencias con ctr+F

Primer paso:(Ubicación del script)

En el caso de blogger nos dirigiremos a Diseño->Edicion de HTML una vez aquí marcaremos la casilla Expandir plantillas de artilugios. A continuación buscaremos ]]></b:skin>
Justamente debajo tendremos que copiar el siguiente código:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var cuantosPosts = 0;
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
var dirURL = document.URL;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
if (relatedUrls[r] != dirURL) {
document.write('<li><a href="' + relatedUrls[r] + '" title="Post relacionado: '
+ relatedTitles[r] + '">' + relatedTitles[r] + '</a></li>');
}
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
cuantosPosts++;
if (cuantosPosts == 3) {
break;
}}
document.write('</ul>');
}
//]]>
</script>
Segundo paso:(Unas lineas mas)

Llegado este punto ya lo tenemos casi todo, lo único que tendremos que hacer es buscar el siguiente fragmento de código en nuestra plantilla:
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
Justamente debajo tendremos que insertar el siguiente código:
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name +"?alt=json-in-script&callback=related_results_labels&max-results=10"'
type='text/javascript'/>
</b:if>
Tercer paso:(Ultimas lineas)

Buscamos ahora la línea de nuestro código que dice:
<p class='post-footer-line post-footer-line-3'/>
Justamente debajo de esta linea copiaremos el siguiente código:
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>
Cuarto paso:(Modificaciones)
  • Resultados mostrados: El numero de resultados mostrados lo podremos configurar desde la linea que insertamos que dice así:
    if (cuantosPosts == 3)
    Este valor 3 se corresponde con el número máximo de entradas relacionadas coincidentes, por tanto este valor lo podremos cambiar por cualquier otro valor que nosotros queramos.
  • Tamaño del titulo de la entrada: Poniendo un ejemplo lo veréis mejor, por ejemplo una entrada que se llame así: Código de colores, diremos que tiene una longitud de 17 caracteres, (los espacios en blanco también cuentan como caracteres). Sabiendo esto nos dirigiremos a la siguiente línea del código.
    relatedTitles.length && i < 20
    El 20 se corresponde con el tamaño máximo de caracteres de una entrada, en el ejemplo que os puse eran 17, podemos modificar este valor dependiendo del tmaño de nuestras entradas, el resultado de la búsqueda dará la lista de entradas con título menor que ese valor.
Guardamos la plantilla y listo, (en vista previa no podemos apreciar los cambios). Os dije que no era complicado, pero lo que no os dije era que es un poquito largo :) espero que os funcione a todos.

6 Comentarios:

Milalibelula dijo...

Esto me gustaría en mi blog, pero tengo miedo!
Cuando lo intente, te pasaré la voz.

Saludos!!

caxitos dijo...

Milalibelula No tengas miedo ;) haz una copia de plantilla por si las moscas pero en principio no debe pasar nada si sigues los pasos correctamente, intentalo y me cuenta que tal.

caxitos dijo...

Merlina Debes marcar la casilla Expandir plantillas de artilugios así seguro que lo encuentas;)

Merlina dijo...

¿Puede ser que no encuentre el fragmento de p class, de últimas lineas?, y también si se puede cambiar el "entradas relacionadas".
Otra cosa: quiero saber como hiciste lo de los últimos cometarios, como se hace para hacer una imagen en lugar de mi título y ponerle, por ejemplo: "El rincón del blog".
Una pregunta más: ¿donde puedo conseguir plantillas con dibujos o salgo para el fondo de mi blog?

caxitos dijo...

Merlina el fragmento de p class lo tienes que tener buscalo bien, el texto de entradas relacionadas se tiene que añadir a parte, una vez lo tengas funcionando te digo como ponerlo. Lo de los ultimos comentarios lo puedes consultar aqui:
http://sitiooriginal.blogspot.com/2009/05/ultimos-comentarios.html
Para conseguir plantillas deberas realizar una búsqueda del tipo: templates blogger
Una web donde tienen templates chulos es:
http://www.templates-blogger.com/
Una vez tengas estas cosas y modificada tu plantilla si asi es, te digo como modificar el título. Un saludico espero que te sean útiles las indicaciones.

Publicar un comentario

Haga su comentario

Bienvenido al Rincon del Blog
Tus comentarios nos ayudan a mejorar
Muchas Gracias por Comentar.