Poner Entradas Relacionadas en tu Blog de Blogger

Estándar



Ahora vengo a traerle este tuto para aquellos que quieren poner Entradas Relacionadas (Related Posts) en su Blog.
Empezemos con el Tutorial.


Procedimiento:

NOTA el Procedimiento es para Blogger, solo recalcando. Para reducir tiempo coloco los shortcuts, para copiado y pegado que se utilizar en windows en ingles, cuando el sistema operativo windows esta en español los shortcuts son otros, pero las acciones requeridas las mismas. 
1.Primero entrar al panel de administración de Blogger, y dirigirse al separador de plantilla, y
seleccionar Edición de HTML.

2.Como siempre recomiendo realizar un backup de la plantilla, descargándola del link “Descargar Plantilla Nueva”.

3.Lo siguiente que hice para hacer el procedimiento más rápido fue expandir plantillas de artilugios.

4.Copie todo el código con ctrl+a, y lo pegue en un notepad conctrl+v, creo que se puede utilizar cualquier editor de texto, media vez no agregue caracteres adicionales (como Word lo
hace, por lo que no lo recomiendo).

5.Buscar el tag </head> y colocar el siguiente código arriba del tag. Hago la siguiente observación, el script debe estar antes de cualquier otro scritp que se encuentre dentro del encabezado que haya sido definido por nosotros.

<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 < en
try.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 r = Math.floor((relatedTitles.length – 1) * Math.random());

var i = 0;

document.write(‘<ul>’);

while (i < relatedTitles.length && i < 20) {

document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r]
+ ‘</a></li>’);

if (r < relatedTitles.length – 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write(‘</ul>’);

}

//]]>

</script>

6.Después de pegar el código. Ahora lo siguiente es buscar <b:if cond=’data:post.labels’>
7.Dentro de los tags <b:if cond=’data:post.labels’> y </b:loop>debemos pegar el siguiente código:


<b:if cond=’data:blog.pageType == “item”‘><script
expr:src='”/feeds/posts/default/-/” + data:label.name +
“?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10″‘
type=’text/javascript’/></b:if>


8.Ahora que ya hemos pegado el código, lo mejor es dar ctrl+a, en el notepad, después ctrl+c y pegarlo dentro del recuadro del código conctrl+v, HTLM del la plantilla de artilugios del blog, damos ahora un clic, después ctrl+a, y ctrl+v, pegando así todo lo que ya hemos trabajado y sustituyendo lo que estaba anteriormente.

9.Guardamos la plantilla y nos dirigimos siempre dentro del separador de plantilla, a la sección de Elementos de la Página.

10.Agregamos un Artilugio de HTML/JavaScript el cual podemos llamar Entradas Relacionadas, después pegue el siguiente código en el recuadro del contenido del artilugio:

<script type=”text/javascript”> 

removeRelatedDuplicates();

printRelatedLabels();

</script>

11.Guarde el artilugio y después lo traslade en la parte inferior de Entradas del Blog. ( yo lo realice creando el Artilugio primero en una de las barras derechas y después arrastrándolo
al recuadro de Entradas del Blog)
12.Después guardamos los cambios.
13.Regresamos nuevamente, siempre dentro de plantilla a edición de HTML.
14.Seleccionamos Expandir plantilla de Artilugios.
15.Después damos clic a el código y presionamos ctrl+aseleccionando todo el contenido del recuadro y en un notepad nuevamente lo pagamos con ctrl+v.
16.Ctrl+f y buscamos el nombre “entradas relacionadas“, donde paremos la búsqueda, el código se ver de la siguiente forma:

<b:widget id=’HTML13′ locked=’false’ title=’Entradas Relacionadas’
type=’HTML’>

<b:includable id=’main’><b:if cond=’data:blog.pageType == “item”‘>

<!– only display title if it’s non-empty –>

<b:if cond=’data:title != “”‘>

<h2 class=’title’>

<data:title/>

</h2>

</b:if>

<div class=’widget-content’>

<data:content/>

</div>

<b:include name=’quickedit’/>

</b:if>
</b:includable>

</b:widget>

17.Y colocamos las líneas en naranja que están ejemplificadas.

18.Después guardamos nuevamente la plantilla y miramos como quedo publicado nuestro blog.

Este hack funciona cuando entramos a una entrada, y miramos en la parte inferior, donde se mostraran las entradas relacionadas a la que estamos leyendo.

Share

Dejar un comentario