JMiur [E]

A veces podría ser una buena práctica agregar una lista de posts relacionados con ese que estamos viendo, es una forma de reavivar artículos "viejos" y promover la lectura de nuestro blog.

En Blogger no hay una herramienta específica para esto pero podemos valernos de las que existen, por ejemplo, las etiquetas o categorías.

Primero que nada, vamos a la plantilla y buscamos la etiqueta </b:skin> y justo debajo de esta, agregamos el script. Esto es así ya que debe estar ANTES que cualquier otro script que hayamos definido:
<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 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++;
}
document.write('</ul>');
}

//]]>
</script>
Donde relatedTitles.length && i < 20 filtra los posts a mostrar según la longitud de su título. En este caso, si contienen más de 20 caracteres, no serán mostrados. El valor 20 puede ser reemplazado por cualquier otro.

Guardamos la plantilla y marcamos Expandir elementos.

Ahora, debemos buscar la siguiente sección de código:
<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>
aquí agregaremos el código del script
</b:loop>
</b:if>
Eso que está entre <b:loop> y </b:loop> es lo que muestra las etiquetas y generalmente aparece en el pie de página de cada post. Lo que debemos hacer es agregar en el lugar indicado, 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>
Donde max-results=10 es la cantidad máxima de posts que se mostrarán y puede modificarse por el valor que más nos guste aunque es conveniente poner un valor bajo para evitar que la página tarde mucho en cargarse. Personalmente, no recomendaría que fueran más de cinco.

Hasta aquí lo que estamos haciendo es decirle que, si estamos en una página individual, se ejecute el script. Por el momento, no veremos resultados de ninguna clase así que nuevamente guardamos la plantilla.

Lo más sencillo sería mostrar todo en un elemento HTML que agregaremos a la sidebar. Le ponemos un título, por ejemplo POSTS RELACIONADOS y escribimos el siguiente código:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Pero, eso no es todo, volvemos a la plantilla, expandimos elementos y debemos editar el elemento que acabamos de crear. Como no lo hemos movido, será el primero de la sidebar pero, lo más sencillo es buscarlo utilizando el título; en este ejemplo, veremos algo así:
<b:widget id='HTMLXX' locked='false' title='POSTS RELACIONADOS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<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:if>
</b:includable>
</b:widget>
Y allí agregamos las dos líneas resaltadas con color.

Ahora sí, todo está listo para probarlo así que guardamos la plantilla por última vez pero, tengamos en cuenta que este hack sólo será visible cuando estemos en una página individual y siempre y cuando haya etiquetas.

Una alternativa sería colocar este elemento debajo de los posts. Sin duda, esa sería la forma perfecta de mostrarlos.

Una vez creado, podemos ir a Elementos de la página, arrastrarlo y moverlo hasta colocarlo debajo del elemento Blog pero, probablemente deberemos personalizarlo para que se adapte a la estética general.


REFERENCIAS:
  • De todo un Poco en Guate


  • ACTUALIZACION:
    Corregido el problema de la transcripción del código.
    También he modificado el script para que en la lista no se muestre el propio post.
    Gracias Solrac, excelente risa

    81 comentarios:

    Joseph  

    Me encantó este truco, ahora gran master del Blogger, tengo una duda...

    Conoces alguna forma de poner algo similar a los links de "Anterior y Siguiente" que tiene Blogger, pero en lugar de eso que muestre los titulos de las entradas... así como:


    ↑ Siguiente: "Blogger: Posts relacionados (1)"
    ↓ Anterior: "Blogger: Posts relacionados"

    Responder
    JMiur  

    ¡Ojalá lo supiera, Joseph! :)

    La verdad, no lo he visto nunca, sólo en WordPress. Esa parte de Blogger, la forma en que maneja eso es casi misteriosa y no tengo ninguna información al respecto.

    Si alguien sabe algo o si lo vió, espero que avise a ver si descubrimos el truco. Sería genial :D

    Responder
    JMiur  

    Aunque, pensándolo bien, tal vez sería posible ... no estoy seguro, podría leerle la URL pero el problema es leer el título ... déjame estudiar el asunto ;)

    Responder
    Kurodesu  

    Yo creo que sería cuestión de por medio de Javascript dividir el link a partir de los "-" y deshacerse de lo demas.

    blogger-posts-relacionados-1.html

    Blogger posts relacionados

    Responder
    JMiur  

    Sí, en eso mismo estaba pensando, Kurodesu.

    No debería ser tan difícil separar la dirección para quedarse con el nombre del archivo y luego, como bien dices, quitarle los guiones.

    No sería el título exacto porque hay caracteres que no se incluyen (por ejemplo la ñ) pero estaríamos bastante cerca.

    Responder
    Kurodesu  

    Si mal no recuerdo, creo que hay que utilizar una función Split de Java.

    No recuerdo bien, sin embargo creo que necesitaremos REGEXP

    Responder
    solrac  

    Como siempre, estupendo hack JMiur ;)

    Hace tiempo estuve buscando para poner precisamente este hack en mi blog. Encontré este post en el blog Hoctro, pero no conseguí que funcionase como yo quería.

    Eso me lleva a preguntarte si el hack que has publicado muestra los artículos relacionados que compartan las mismas etiquetas?

    Responder
    Don Atealgo  

    Hola, me pregunto si usando JavaScrip t no se podrá hacer algo más sencillo que vengo buscando...

    un listado alfabético de TODOS los post de un blog.

    O sea que por medio de un enlace o dentro de un post especial se genere dinámicamente un listado de todos los post del blog.

    ¿Se puede eso?

    Responder
    solrac  

    Bueno, estoy probando el hack.

    Informarte que el código referente a "&callback=" y "&max-results=" tiene un problema con el '&' y debe cambiarse por "&amp;callback=" y "&amp;max-results=" respectivamente.

    Responder
    solrac  

    Bueno, he visto otra cosita y es que en la lista de posts se muestra el propio post.

    Como ya sabes JMiur no soy muy bueno 'todavía' con el JavaScript pero he tenido buen maestro (gracias por tus enseñanzas ;) ) y he conseguido el código para hacer que no muestre y el comprobando a la hora de escribir los títulos del post (function "printRelatedLabels") que no sea igual a la url del post como tal.

    El código añadido en negrita es:


    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    var dirURL = document.URL;

    document.write('<ul>');
    while (i < relatedTitles.length && i < 40) {
    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++;
    }
    document.write('</ul>');
    }

    PD: también le he añadido el 'title' en el link del post.

    Responder
    JMiur  

    ¡Apabullado por tanta información! Me parece extraordinario :D

    Kurodesu:
    Sí, la cosa viene por ese lado. Ahora no las tengo presentes pero seguramente en la web hay decenas de scripts que permiten separar una URL en partes.

    Don Atealgo:
    Lo del listado alfabético es interesante.

    solrac:
    Sí, he visto que hay un problema al transcribir el código en el post. Estoy tratando de corregirlo.

    El hack de Hoctro es similar a este, es más, pensaba publicarlo hoy para seguir con el tema aunque el resultado es un poco diferente.

    Lo del post "repetido" no lo había visto, eso me pasa por usar un blog de pruebas. De cualquier manera, como pensaba poner el hack en este blog y mostrar cómo personalizarlo gráficamente, tu código me viene perfecto.

    Espero tener todo en orden en un par de días, cualquier otra sugerencia será bienvenida.

    Ah, y gracias a todo, esto ha sido muy valioso :D

    Responder
    Gem@  

    He estado leyendo los comentarios..
    Hace tiempo Beautiful añadió la forma de aplicar una tabla de contenido de manera que mediante un enlace en la sidebar mostraba hasta 100 entradas del blog por orden alfabético.
    (pueden probar si acceden a su blog en Table of Contents)
    Con el tiempo lo vi aplicado en el blog de Rosa y en Epílogo quien tuvo la genial idea de modificar para que aparecieran todas las entradas.

    Responder
    Gem@  

    Esto es otra cosa que no encontraba, es una tabla de contenidos por categorías

    Responder
    JMiur  

    Gracias Gem@, me has dado tarea para investigar este fin de semana :D

    Responder
    JmpaSrgc  

    Pues a mi no me salen los post relacionados, ni en la página principal ni las individuales, ya sea aplicando este hack como el otro que has dado. Bueno, con este sí me aparece el título del widget pero no los enlaces.

    Un saludo

    Responder
    JMiur  

    Este en particular está implementado aquí, los detalles los publicaré hoy.

    Aparte de algún posible error en la sintaxis, deberías verificar si están habilitados los feeds de tu blog.

    Si no encuentras el problema envíame un mail para ver si lo resolvemos.

    Responder
    JmpaSrgc  

    Si, los tengo habilitados. Y sobre el error de sintaxis, lo que hice fue un "copy&paste" así que si a ti te funcionan a mi deben de funcionarme también, ¿no?.

    ¿No será que los scripts me tienen manía? Jeje

    Volveré a intentarlo cuando esté menos agobiado de trabajo. Ahora no estoy centrado como para experimentos.

    Un saludo.

    Responder
    JMiur  

    En este momento, los scripts están verificados, pudo haber errores previos pero en esos casos Blogger los señalaba.

    Como alternativa, AQUI está la versión exacta del que ya está funcionando ene este blog. Es igual que este excepto por la última parte.

    Responder
    Crisneda  

    Antes de todo, felicitaciones por tu excelente blog. Te escribo para algo no tan relacionado con el post, pero sí con el código.

    Lo que pasa es que podemos utilizar <b:if cond='data:blog.pageType == "item"'> para señalar que el widget se muestre sólo cuando estemos en un post, pero existe un código inverso?, que permita hacer que muestre el widget sólo cuando esté en portada?.

    Supongo que hay que cambiar "item" por el identificador de la portada, pero desconozco cual es.

    Saludos desde Concepción, Chile!

    Responder
    JMiur  

    Saludos, Crisneda:

    Se me ocurren dos posibilidades para que beas qué te conviene utilizar.

    Esta es la condición inversa ya que != significa "NO ES" una pagina de items:

    <b:if cond='data:blog.pageType != "item"'>

    esta otra condición es verdadera si estamos en la página principal:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

    Responder
    Luis Fernando Montoya  

    A mi me funciono el problema es que aparece a un lado es decir, encima de una imagen que tengo en el sidebar. miralo y me ayudas por favro es muy bueno el truco y lo quisiera implementar en mi blog.
    montogeek.blogspot.com

    Responder
    JMiur  

    En la sidebar, lo veo a la derecha, al lado del buscador. No veo otra imagen superpuesta.

    Responder
    sancocho  

    ¡Me encanto este truco! Yo tengo ClickComments y sale una cosa parecida, pero este truco es infinitamente mejor. Por cierto ¿que te parece ClickComments? A mi me da fallos y a veces no carga, pero me gustaría saber tu opinión. Gracias

    Responder
    JMiur  

    Sancocho:
    Nunca lo utilicé pero recuerdo el servicio. Incluso hay un post al respecto.

    Ahora que fui a verlo para recordar un poco el tema, veo que los comentarios de los que lo probaron no fueron muy buenos que digamos. El problema principal parece que es ese mismo del que hablas: la lentitud en la carga.

    Responder
    Administración  

    ayuda he llegado a tu blog por casualiad, he hecho los pasos pero no se me muestra.que he poido hacer mal?

    Responder
    gato  

    Perdon por publicar como adm jeje

    Responder
    JMiur  

    Gato:
    Hay un error en el script porque lo que se muestra, es un error al llamar a la función: "Blogger: Error al ejecutar tu solicitud"

    Habría que revistar la forma en que está escrita la función en la plantilla

    Responder
    gato  

    ok.gracias.voy a revisarlo.Muchas gracias por contestar :)

    Responder
    gato  

    oye y si no hay post relacionados que muestra?

    Responder
    JMiur  

    Como lo que se muestra son otros posts que tengan la misma etiqueta, en general, siempre habrá alguno.

    Responder
    gato  

    porque mi plantlla esta llena de "true"' eso es normal?

    Responder
    Administración  

    me refiero a que el codigo en vez de poner "true" pone &quuuuuoooooot;true&quuuuoooot,los quoooot con una 'o' y una 'u'.no se si es normal.(esque yo copio el codigo que pones tu arriba que hay que buscar en el blog de notas paa busar los codigos y no me lo encontraba por eso)

    Responder
    JMiur  

    En Blogger, ciertos símbolos son reemplazados. Por ejemplo, las comillas dobles por &quot;

    Es normal.

    Responder
    Administración  

    ok muchas gracias.

    Responder
    Javi  

    Muchas gracias amigos, lo acabo de instalar todo y funciona a las mil maravillas.

    Responder
    JMiur  

    Me alegro que te sirviera :)

    Responder
    TRECARUNGA  

    Hola JMiur, no puedo editar el widget para agregarle un icono adelante de cada link...

    Responder
    JMiur  

    Probablemente deberias probar a editarlo desde el Diseño | Edición HTML expandiendo los artilugios.

    Responder
    TRECARUNGA  

    Si si, pero lo que quiero es agregar un icono adelante de cada enlace.

    Responder
    JMiur  

    Hay muchas formas de agregar eso, depende de lo que cada uno quiera, del tipo de imagen etc. Puede ponerse una imagen directamente o bien usar el fondo si es que se trata de una lista.

    Responder
    TRECARUNGA  

    JMiur creo que no me explique bien :o lo que necesito saber es el codigo que "identifica" el widget que va arriba del codigo CSS...

    Gracias.

    Responder
    JMiur  

    Pués no, no entiendo a que te refieres.

    Responder
    TRECARUNGA  

    JMiur, no se como explicarlo a ver asi:

    UL { <--------
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    width: 160px;
    }

    Responder
    JMiur  

    Si están la sidebar, serán las mismas propiedades que el resto. Para darles propiedades diferenciadas puede usarse el ID del elemento que sería:

    #HTML21 ul {}
    #HTML21 ul li {}
    #HTML21 ul li a {}

    Responder
    Angel  

    Muchas Gracias, muy bueno este post. Me salio igualito.

    Responder
    Se Deportivo  

    Hola, su tutorial me ha sido de gran utilidad, pero tengo un problema, y esque el elemento de artículos relacionados me aparece debajo de los comentarios y de la publicidad.

    Mire,

    http://www.sedeportivo.com/2009/03/los-lakers-y-su-fiabilidad.html

    Me gustaría que apareciera antes, justo debajo del post o como mucho de la publicidad.

    Muchas gracias

    Responder
    JMiur  

    Entiendo. Con este método, no se podrá ya que es un elemento HTML . Pero, para conseguir eso, hay otro posts que lo muestra: ACÁ

    Vas a ver que es práctimanete igual excepto que, en lugar de un elemento HTML, colcoas el script en alguna parte debajo de los posts, de esa manera, entonces, vas a poder ubicarlo exactamente donde quieras, sin limitaciones.

    Responder
    LJK  

    Ola quisiera un poco de ayuda , hize todo pero los post relacionados me salen despues de los comentarios como podria hacer para que aparescan antes de los comentarios?

    Responder
    JMiur  

    Agregándolo de este modo opcurrirá eso, fíajate en este otro post para ubicarlo de otra forma.

    Responder
    [ Michel ]  

    hola JMiur, eh estado probando este hack y me va bien, pero si te fijas en mi blog de pruebas las "Entradas relacionadas" me salen a la derecha de las etiquetas, como hago para que me aparescan ordenadas y debajo de las etiquetas.

    muchas gracias

    Responder
    JMiur  

    Para que se muestren debajo, en lugar de esto:

    .post-footer-line-3 {
    float:right;
    }

    coloca esto:

    .post-footer-line-3 {
    clear:both;
    }

    Luego, en esa misma definición podrás agregarle márgenes, etc.

    Responder
    [ Michel ]  

    hola y gracias por resonder, ya lo ice pero ahora cuando toy viendo mis post el "Agrega tu comentario" me aparece en la izquierda, y quiero que eso me aparesca en la derecha y que cuando vena los comentarios las entradas relacionadas me aparescan por debajo de las etiquetas como esta ahora, tambien como hago para que no se me junte la cabecera de los comentarios con los link de las entradas relacionadas, porque si te das cuenta ahora lo tengo todo "entreverado" (las entradas relacionadas por encima del titulo de lso comentarios agregados)

    lo siento si soy torpe pero esas son mis dudas ojala me puedas ayudar gracias

    Responder
    JMiur  

    Son muchas cosas. Primero, elimina la flotacion de acá que no tiene uso práctico y molesta:

    .post-footer-line-1 {
    float:left;
    }

    Para reordenar las cosas debe reordenar el código. La setiquetas están en:
    <div class="post-footer-line">

    Las aentradas relacionadas en:
    <div class="post-footer-line post-footer-line-3">

    y el Agregar comentarios en #comments h4 { }

    Para cada una puedes establecer propiedades de alineación texxt-align, de márgenes, etc.

    No puedeo darte detalles porque desconozco la idea de diseño que tienes.

    Responder
    Gem@  

    J.Miur estoy tratando de ayudar a Graciela porque hizo unos cambios como verás de esa forma se elimina todo el contenido del pos-footer y se añaden los de autor, etiquetas y comentarios.
    Ocurre que lógicamente le han desaparecido las etiquetas relacionadas que ella añadió creo siguiendo estos pasos que indicas en la entrada así que he probado a restaurar la parte de etiquetas de esta forma.
    <li>
    <span class='post-labels'>
    <div class='head'>Etiquetas</div>
    <b:if cond='data:post.labels'>
    <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 != &quot;true&quot;'>,</b:if>

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

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

    El caso es que no se muestra nada ¿es lógico que no se muestren los relacionados como estaban antes si el resto de código no se ha tocado?

    Responder
    JMiur  

    No, no es lógico pero, lo que veo en su plantilla es que esa parte no está agregada, no se muestra en el código fuente, ni siquiera como error ¿La han sacado?

    Responder
    Gem@  

    Perdona J.Miur es que me expliqué mal en su plantilla añadió ese nuevo footer pero ya está por eso le han desaparecido las etiquetas relacionadas, lo que te he mostrado es lo que yo estoy probando en un blog mio para ver si resulta y darle una mano en solucionarlo.
    Está aplicado aquí

    Responder
    JMiur  

    A ver si entendí.

    Los posts relacionados se muestran en el footer de la página y no en el footer del post; están en el elemento HTML4 del footer-wrapper pero, no se ven porque los enlaces tienen el mismo color que el fondo, son negros ya que sólo hay una definición para todos:

    a:link {
    color:#000000;
    text-decoration:none;
    }

    Coloca por ejemplo:
    #footer-wrapper a {color: #FFF}
    y se verán; uno o dos, claro ya que es un blog de pruebas.

    Responder
    Gem@  

    Bien, bien, lo arreglé añadiendo la clase a HTML4 voy a tratar de incrustarlo para que salgan justo después del post-footer que es como lo tenía Graciela.

    Responder
    Gem@  

    Perfecto !! recuperamos los relacionados para Graciela :)

    Responder
    JMiur  

    Perfecto :D

    Fíjate que todos los enlaces del footer se verán igual, de color negro sobre fondo negro. Digo esto porque hay otros elementos allí y en todos pasa lo mismo.

    Responder
    Luixom  

    hola jmiur esta exelente este truco solo queria saber como puedo poner el entradas relacionadas y la lista, enmarcados por separados esque no quiero que aparescan en el post footer sino mas abajo y que no sea parte del codigo del post:

    " esque quiero poner el entradas relacionadas y la lista de enlaces abajo del post porque quiero ponerle un fondo diferente y enmarcarlo, pero que no sea del mismo codigo del post"

    creo que con < div class=''> moviendole a eso para que no sea parte del post footer algo asi, esque no se muy bien, espero que me ayudes !! :)

    Responder
    JMiur  

    Puedes ponerlo en cualquier parte siempre que esté dentro el mismo INCLUDABLE. Tal como dice, bastaría colocarlo dentro de algún DIV con una clase CSS y luego, establecer las propeidades de esa clase para que se viera diferente. No sé que detalles quieres cambiar pero, deberias empezar por esa parte.

    Responder
    IronWeb  

    Voy a agregar post relacionados a uno de mis blogs.

    Pero al comenzar a leer este post tengo una duda.

    Según lo que indicas el código script debe colocarse justo despues de

    Pero más abajo dices que busquemos:


    ...
    ...
    ...


    y agreguemos el código script.

    Que quiere decir esto que agregaremos el código 2 veces?

    Responder
    JMiur  

    Tu código no se ve así que no sé exactamente a que te refieres. Para usar esto hay que hacer diferentes cosas así que no sólo es un script sino varios.

    Responder
    Dj Benko  

    Hola Jmiur cuando pretendo aplicar estos codigos en mi blog. No encuentro algunos de ellos. te envie un correo con mas detalles espero que lo leas y me ayudes.
    Gracias

    Responder
    JMiur  

    Recibí tu mail así que responderé alli.

    Responder
    Kas-Tro  

    TEngo unas duda le puse un borde, pero en la pagina principal entre medio de las entrada sale parte del borde, la verdad no entiendo por que pasa eso, y tambien me puedes aclarar como poner una imagen antes de las flechas.. mira este es mi blog de prueba http://prueba2056.blogspot.com estare esperando tu ayuda..

    Responder
    JMiur  

    Kas-Tro:
    Imagino que l odel borde ocurre porque el borde está definido para el DIV con la clase post-footer-line-4:
    .post-footer-line-4 {
    background-color:#171E27;
    border:1px dotted #CCCCCC;
    margin:0 0 10px 20px;
    }

    Y te faltaría condicionar el div en si mismo y no solo su contenido.

    Lo que no comprendo es a que flechas te refieres.

    Responder
    Kas-Tro  

    Como hago para condicionarlo, por que la verdad no se, y lo de las flechitas son las flechas azules k tiene las entradas relacionadas, y el titulo lo puse arriva del scrip pero donde me sale es arriva de la pagina.. no arriva de los titulos.

    Responder
    JMiur  

    No sé como esta el código en tu plantilla pero, seguramente, está condicionado porque los posts relacionados sólo se muestran en las páginas individuales así que deberías poner ese div dentro de la condición. Si supiera qué dice esa parte con exactiud, podría darte algún detalle más.

    Responder
    Kas-Tro  

    si quieres te puedo pasar el xml o darte permiso para que veas ese blog, por mi no hay problema lo que quiero es resolver eso, y lo la imagen antes de las tres entrada..

    Responder
    Kas-Tro  

    y otra cosa asi es que lo quiero, que se muestre en la entrada despuse que entren no que salga en el home de la pagina, si a las paginas indivuales es que te refieres..

    Responder
    JMiur  

    Veamos. Trato de adivinar. Seguramente, tu plantilla dice esto:

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

    Y debería decir esto:

    <b:if cond='data:blog.pageType == "item"'>
    <div class="post-footer-line post-footer-line-4">
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </div>
    </b:if>

    Esas flechas azules a las que te refieres, son imágenes y están definidas así::

    .post-footer-line-4 ul li {
    .......
    list-style:none outside url(http://cdn.iconfinder.net/data/icons/splashyIcons/arrow_state_blue_right.png);
    }

    Responder
    Kas-Tro  

    la verdad que tu eres un genio, en esto, los de las imagenes lo que pregunto en si, es como poner una imagen mas grande como la de tu ejemplo aya arriva.. antes de la flechita un libro por ejemplo..

    Responder
    Kas-Tro  

    problema resuelto puse mas margenes entre las entradas y el post footer y asi los titulos se areglaron, muchas gracias por toda tu ayuda..

    Responder
    Kenpachi  

    Buenas, ya añadi todos los script y demas cosas ke he ido editanto y kitando hasta tenerlo a mi gusto, lo veo todo perfecto pero me gustaria saber si hay alguna manera de ke los post ke aparezcan no sean aleatorios, me refiero a ke en la lista salga x orden de fecha de publicacion supongo ke sera editando algo en el //<![CDATA[, gracias x todo. Espero respuesta :)

    PD: En mi nick en la 2º blog ke sale (la ke tiene mas autores) si entras en algun post veras lo de post relacionados XD

    Responder
    JMiur  

    Sí. Debrías modificar el script pero, lo mñas simple sería cambair esto:

    var r = Math.floor((relatedTitles.length - 1) * Math.random());

    por esto:

    var r = 0;

    Responder
    Kenpachi  

    Muchas gracias x responder, me sirvio :D

    Responder
    Manolo  

    Genial Jmiur, pero tengo un prblema me marcan las entradas relacionadas como "undefined", como lo soluciono?

    Responder
    JMiur  

    ¿En cuántas entradas vas a hacer la misma pregunta?

    Responder
    Casandra A.  

    Hola!

    Me ha sido muy útil el tutorial. Al fin he podido quitar el Linkwithin del blog, que me relacionaba los posts al tun-tun.

    Estoy muy contenta y agradecida. :D

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR