A??adir Entradas Relacionadas a tu blog

  • mayo 28, 2010

Entradas Relacionadas.- Muestra una serie de entradas relacionadas con la actual para proveer a los usuarios de otros temas en el blog que podr??an interesarles.
El proporcionar una lista de entradas relacionadas tiene como consecuencia el que los usuarios se mantengan m??s tiempo en tu blog en lugar de tener que recurrir a un buscador para encontrar informaci??n sobre un tema que puede ser que ya hayas hablado.

1. Ir a Dise??o de la plantilla, luego a Edici??n de HTML y clic en Expandir plantillas de artilugios. Despu??s agregar el siguiente c??digo entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en alg??n momento, no quieras esto y se te va hacer m??s f??cil poder ubicarlo para borrarlo.




.related-posts{
float:center;
width:450px;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
background-color:#fff
}
#related-posts .widget h4, .related-posts h4{
font-size: 1.2em;
font-weight: bold;
color: #666666;
font-family: Georgia, «Times New Roman», Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
.related-posts a{
color:#A10000;
}
.related-posts a:hover{
color:#369;
}
.related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:13px;
text-color:#000000;
}
.related-posts ul li{
background:transparent url(http://www.blogblog.com/tictac/tictac_orange.gif) no-repeat 0 6px;
display:block;
list-style-type:none;
margin-bottom: 8px;
padding-left: 15px;
padding-top:0px;
}

** Este c??digo se refiere el estilo de los Post Relacionados o Entradas Relacionadas, el cual se podr?? realizar cambios utilizando tu criterio.

2. Agregar el siguiente c??digo entre ]]></b:skin> y </head>. Preferible que lo pegues despu??s de ]]></b:skin>, es decir antes que cualquier otro script que hayas definido despu??s de ]]></b:skin>.

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

 if (cuantosPosts == 3).- Se refiere a la cantidad m??xima a mostrar, es decir que solamente se ver??n tres entradas.
Puedes cambiarlo por el n??mero de entradas que quieras que se vean

3. Buscar la siguiente secci??n de c??digo y agregar lo siguiente (lo que esta de color azul):

<p class=’post-footer-line post-footer-line-2′><span class=’post-labels’>
<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>
<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>

</b:loop>
</b:if>
</span> </p>

4. Finalmente, una vez que han pegado el c??digo anterior, ahora pegar lo siguiente (lo que est?? con color azul) despu??s de:

<p class=’post-footer-line post-footer-line-3’/>
<div class=’related-posts’>
<b:if cond=’data:blog.pageType == «item»‘>
<h4>Entradas Relacionadas</h4>
<script type=’text/javascript’>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
</div>


5. Guardar.

No Comments Found