Entradas Relacionadas para blogger con CSS

Hace ya mucho tiempo salio el script que nos permite ver las entradas relacionadas en nuestro blogs, es mas ya en varias planillas ya viene instalada.

En esta ocasión les explicare como colocar esta opción en nuestro blogs, por si te interesa y aun no lo tienes, a diferencia de los demás tutoriales que e visto, yo le agregare un toque personal con CSS, espero que te guste.

Primero entra a Diseño > Edición de HTML y haz un respaldo de tu plantilla por si no obtuvieras los resultados esperados.


Después pega antes de ]]></b:skin> los estilos:

/*Entradas Relacionadas por Tutoblogger*/
#related-posts {
float : left;
width :auto;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;

}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #069;
padding: 7px 30px 0 0;
text-align:center;
width: 475px;
font-size : 18px;
font-weight : normal;
margin : 5px -20px 0 0;
padding : 0 0 5px;
border-bottom: 3px solid #069;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : -25px 0 0 0;
padding : 30px 0 0 0;
border-left: 3px solid #069;
}
#related-posts li:hover {
margin-left: 40px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
#related-posts ul li {
display : block;
background : #f0eeee;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Luego con los artilugios expandidos busca la etiqueta ]]></b:skin> y justo debajo de ella pega lo siguiente:

<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 == 5) {
break;
}
}
document.write('</ul>');
}

//]]>
</script>

Ahora busca esta línea:

<b:loop values='data:post.labels' var='label'>

Y justo antes del siguiente </b:loop> pega esto:

<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>

Ya sólo busca esta línea:

<div class='post-footer-line post-footer-line-3'

Y pega debajo de ella lo siguiente:

 <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<div class='post-footer-line post-footer-line-4' id='relpost'>
<h2>Entradas relacionadas:</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if></div>
</div></b:if>

Guarda los cambios y listo. los cambios los podras ver unicamente en las entradas.

Muy Importante:

Cada entrada debe tener minimo una etiqueta y que las etiquetas se muestren en el post para que las entradas relacionadas funcionen.
 
Info: sacado de una planilla de johnytemplate