sábado, 29 de mayo de 2010

Añadir Entradas Relacionadas a tu blog







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.

5 comentarios:

Marcos dijo...

Por mucho que lo he intentado no he sido capaz.
Tu explicación no es muy clara en el paso 3, que es el que me da los problemas.

De todo para los blogger dijo...

Hola Marcos el paso 3 es sólo agregar el código que esta en azul, no te entiendo bien
Y gracias por hacerte seguidor, veo que tienes blog, te enlazare en los mios, y te agradecería que hicieras lo mismo, un saludo y me cuentas.

Marcos dijo...

Hola.
Sigo teniendo problemas en el tercer paso, ya que en ningun lugar aparece exactamente lo que tu pones en negro.
Al pegarlo en un lugar parecido, me dice que : The reference to entity "callback" must end with the ';' delimiter.
No se que hacer.
Si no te importa, te puedo pasar la plantilla completa (en html), y lo intentes hacer tú. Te lo agradecería mucho. Si eso me contactas al correo (todopcma@hotmail.com).
Los 2 primeros pasos ya están incorporados en la plantilla.

Por lo de enlazar los blogs, sin ningun problema, enlazo el tuyo ahora mismo.

De todo para los blogger dijo...

Hola Marcos,, intenta esto:
http://trucosyblog.blogspot.com/2010/05/como-poner-entradas-relacionadas-en.html

Marcos dijo...

OK, muchas gracias. Lo pruebo y te cuento.

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones