Blogger: Cómo poner entradas relacionadas en formato texto

13 de diciembre de 2013
88 comentarios

Blogger: Cómo poner entradas relacionadas en formato texto
Las entradas relacionadas ayudan a que el lector permanezca en nuestro blog, ya que muestran otros artículos con contenido similar al que está visualizando en ese momento, invitándole a que siga navegando en nuestro sitio.

Este tema está muy vinculado a las técnicas de posicionamiento (SEO On-Page). Una buena costumbre cuando escribes tus entradas, es poner enlaces hacia otras entradas de tu mismo blog, ayudando a que el usuario profundice en algunos temas y no se pierda el contenido que de otra forma quizás nunca hubiese visto.

La herramienta que vamos a utilizar, va a automatizar la generación de enlaces relacionados con una entrada específica. De tal forma, que una vez la incluyas en tu blog, sólo te preocuparás de asignar etiquetas a tus entradas y la herramienta hará el resto.

Además de ayudar a bajar la tasa de rebote (usuarios que salen de nuestro sitio sin interactuar con él),  también le echará un cable a los motores de búsqueda, ya que si algunos de los enlaces de las entradas relacionadas no estaban indexados, el motor los encontrará e indexará.

Por tanto, si es bueno para el SEO y es bueno para nuestros lectores, entonces es bueno para nosotros. He implementado un pequeño código en javascript que hace el trabajo sucio, vamos a aprovecharlo para incluirlo en el código de nuestra plantilla en el mejor sitio posible: al final de las entradas.

Dependiendo de la temática de tu blog, te puede interesar incluir las entradas relacionadas con imágenes en miniatura o como enlaces de texto. El ejemplo que veremos aquí, genera un índice de entradas relacionadas en formato texto, de forma muy limpia para que le puedas aplicar los estilos CSS que quieras.

Si quieres incluir enlaces relacionados con imágenes en miniatura, LinkWithin ofrece un servicio excelente. En su página explican los pasos a seguir para incluirlo.

Incluir entradas relacionadas en formato texto

  1. Nos vamos a la edición del código HTML de la plantilla
    Plantilla > Editar HTML
  2. Copia este código justo antes de la etiqueta "</head>"
    Ctrl + F y buscamos "</head>" 
    <!-- Entradas relacionadas -->
    <script type='text/javascript'>
    var baerTitulo="También te puede interesar";
    </script>
    <script src='https://googledrive.com/host/0B-DHLEFnmkpLcENZLUZKdHBJTFE/js/entradas-relacionadas-min.js' type='text/javascript'/>
    
  3. Copia el código siguiente, justo después de "<data:post.body/>"
    Ctrl + F y buscamos "<data:post.body/>", si aparece más de una vez pégalo después del <data:post.body/> que se encuentre dentro de <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!-- Entradas relacionadas -->
    <div id='baer'>
      <b:loop values='data:post.labels' var='label'>
        <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=entradas_relacionadas&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
      <script type='text/javascript'>
        var baerMaximo=5;eliminar_duplicados(); mostrar_entradas_relacionadas(&quot;<data:post.url/>&quot;);
      </script>
    </div>
    
  4. Guarda la plantilla y visualiza el blog
Recuerda, antes de hacer cualquier modificación, es recomendable realizar  una copia de seguridad de tu plantilla. En Blogger > Plantilla > "Crear/Restablecer copia de seguridad".
Si has seguido los pasos anteriores, al acceder a alguna de las entradas del blog, obtendremos un resultado similar a éste:

Entradas relacionadas en formato texto

Configurar las entradas relacionadas

Ya tienes funcionando los enlaces relacionados con los valores que he puesto por defecto: 5 enlaces relacionados como máximo y como titular aparece el texto "También te puede interesar". Estos parámetros son personalizables y muy fáciles de modificar.

Cambiar el titular 

Si te fijas en el código del paso 2, he resaltado el texto del titular: «var baerTitulo="También te puede interesar";», sustitúyelo por el que quieras. Si tienes un blog de cocina, podrías poner "Otras recetas similares", "Si te gustó esta receta, también te va a gustar", etc.

Número máximo de enlaces

En el código del paso 3, he resaltado la variable que debes modificar (var baerMaximo=5). En el ejemplo se muestran 5 enlaces, cambia ese valor por el número máximo de enlaces que desees. 

Cambiar el aspecto de las entradas relacionadas

Los enlaces se incluyen dentro de una lista desordenada <ul>, en elementos <li>. Toda la lista está contenida en un div con identificador "baer". Sabiendo ésto, puedes aplicar los estilos que más te gusten, ya depende del conocimiento que tengas de CSS.

En la mayoría de casos, bastará con el aspecto que se muestra por defecto, puesto que utiliza los estilos de tu plantilla. Veamos un ejemplo sencillo de cómo se puede cambiar el aspecto de la lista mediante CSS.

Edita tu plantilla de blogger, ve al código HTML y pega el siguiente código CSS, justo antes de ]]></b:skin>
#baer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#baer li {
  font-size: 1.2em;
  border-bottom: 1px solid #ccc;
}
#baer li:last-child {
  border: none;
}
#baer li a {
  text-decoration: none;
  color: #000;
  display: block;
  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}
#baer li a:hover {
  color: #e8550b;
  background: #F7F7F1;
}

Éste es el resultado, aplicando los estilos:

Entradas relacionadas en formato texto con CSS

En este ejemplo, se resaltan las entradas al pasar el ratón por ellas, utilizando un efecto de transición. Partiendo del ejemplo, puedes adaptar los estilos de tus entradas relacionadas para darle el aspecto que desees.

Cómo funciona

Para los más curiosos, vamos a explicar cómo es el comportamiento de los enlaces relacionados. 

Al crear una entrada en blogger le podemos asignar una o más etiquetas, el javascript se basará en éstas etiquetas para encontrar otras entradas similares. Cuanto mejor tengas asignadas tus etiquetas, mejor se comportará tus entradas relacionadas.

Se descartarán los enlaces de entradas repetidas, además del enlace de la misma entrada en la que se está. Del conjunto de enlaces relacionados, se seleccionará aleatoriamente el número máximo que se ha pasado por parámetro, de tal forma que no aparezcan siempre los mismos enlaces.

Si por ejemplo, a una entrada le habíamos asignado las etiquetas A y B, el javascript buscará todas las entradas con etiquetas A o B (supongamos 40), descartará las repetidas y de la lista seleccionará aleatoriamente baerMaximo entradas (supongamos 5).

Conclusión

Aunque hubiese sido más sencillo incluir las entradas relacionadas como un gadget HTML al final de las entradas, el resultado no sería tan efectivo. Ten en cuenta que si los enlaces se presentan de forma natural en nuestras entradas, será visible en el feed y tenido más en cuenta por los buscadores, además de que el usuario lo verá mucho más natural.

En un próximo artículo haremos lo mismo, pero añadiendo imágenes en miniatura, tal como hace LinkWithin. La ventaja es que podremos personalizarlo mucho más, tal y como hemos hecho con éste.

Espero que te haya resultado útil, coméntame cualquier duda que tengas, estaré encantado de poder resolverla. Si lo has logrado incluir en tu blog, puedes dejar el enlace en los comentarios para echarle un vistazo :-)

Que lo compartas es el mejor regalo que me puedes hacer

Gracias :-)

88 comentarios :

  1. Hola! Tu post me ha resultado muy útil pero cómo hago para augmentar el margen izquierdo? Xk los quadraditos se me salen del post tapando la columna izquierda. Gracias!!

    ResponderEliminar
  2. Hola Ferran!

    Si has utilizado el CSS que he puesto de ejemplo, basta con quitar en "#baer ul" las líneas con "margin: 0;" y " padding: 0;", o poner valores más altos, por ejemplo "margin: 8px, padding: 10px".

    Espero que te sirva, un saludo!

    ResponderEliminar
  3. Hola, he llevado a cabo cada apartado del post pero no me funciona...a que se puede deber esto??
    me podrías ayudar me estoy volviendo loca. MUchas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Roinmar!

      Mil perdones, no había visto tu comentario. Si todavía tienes el problema dime en que parte te falla para echarte una mano ;)

      Gracias por pasarte!

      Eliminar
  4. Un post muy interesante. Me gustaría aprovechar para ofrecer por si alguien busca colaboraciones y sponsors para su blog o simplemente quiere empezar o mejorar el que ya tenga mi nuevo libro que se llama La Biblia Blogger si haceis click sobre el nombre podreis acceder a la tienda online :) gracias. LINK: http://www.lulu.com/spotlight/elenkolr

    ResponderEliminar
  5. Hola muchisimas gracias por fin pude ponerlo en mi blog!!! http://thisisgabslife.blogspot.mx/ me encanto :D

    ResponderEliminar
    Respuestas
    1. Como podría hacer grande la letra del titulo? y de ser posible ponerlo en el centro, para que se destaque de las entradas, gracias de nuevo!

      Eliminar
    2. Hola Laura, me alegro que te lo hayas podido utilizar en tu blog :)

      Para cambiar el tamaño del título sigue la guía del apartado "Cambiar el aspecto de las entradas realacionadas" y en el css pon esto:

      #baer h2 {
      font-size: 20px;
      }

      No se si quieres poner el texto del título en el centro o todo, si es solo el título sería así:
      #baer h2 {
      font-size: 20px;
      text-align:center;
      }

      Gracias :)

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
  6. Buenas! Lo puse en mi blog, pero el diseño parece que no me lo coje el blog, porque funcionar funciona, pero no sale los bordes y intento poner mas de 3 entradas, y aunque ponga 5 como usted lo explica, sigue saliendome 3. ¿Porqué puede ser?¿Y porque no me sale los bordes?
    Un saludo. Mi Blog: http://cocinaparasaborear.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Anna!

      Tienes un blog muy bonito, me gusta :)

      Ten en cuenta que las entradas relacionadas son de las etiquetas en las que entras. Por ejemplo, si tienes 4 recetas de verduras y entra en una de ellas te aparecerán como máximo 3 entradas relacionadas, puesto que no hay más.

      Con respecto a los estilos el borde que ves en mi ejemplo lo he puesto yo para resaltar la pantalla, el borde entre entradas veo que si se te está mostrando, pero no se te muestran los estilos de resalte, esto es porque tienes mal copiado un trozo de código, fíjate:

      #baer li a {
      text-decoration: none;
      color: #000;
      #baer li a:hover {
      color: #e8550b;
      background: #F7F7F1;
      }
      }

      Debes colocar bien los cochetes "}" ya que están mal cerrados, te aconsejo que los vuelvas a copiar del ejemplo. Este es el motivo por el que no se te está resaltando el texto.

      De resto lo veo todo bien, es ir jugando con los estilos ;)

      Eliminar
    2. Muchas gracias por contestarme tan rápido y me alegra de que a la gente le agrada el blog, porque me paso muchas horas diseñándolo y haciendo buen contenido.

      Lo siento mucho por lo de los números de entrada, madre mía, que error tan vergonzoso xD Y sobre el código, otro error mio tonto, pero oye, lo volví a pegar como tu me dijiste y tal y lo revise muy bien pero nada, no me aparecen los bordes por los lados... ¿Qué podría ser?
      Un saludo!! =)

      Eliminar
    3. Genial, ahora te está funcionando las líneas CSS que te faltaban. Con respecto a lo del borde, lo que te comentaba es que realmente eso no está en el CSS de ejemplo, pero no sería muy difícil incluirlo.

      Prueba a sustituir la entrada CSS "#baer ul {" que tenías por esta otra:

      #baer ul {
      list-style-type: none;
      margin: 0;
      padding: 10px;
      border: 2px solid #ccc;
      }

      Esto añade un borde a la enumeración de entradas, si quisieses un borde que envuelva también el titular puedes crear un div que envuelva el título y la lista y asignarle mediante estilos el borde. Si quieres esto último coméntamelo y te pongo un ejemplo sencillo.

      Eliminar
    4. Funcionoo!! Dios, que chuladaaa, esta casi perfecto Jajaja (Es que soy muy perfeccionista, ainss xD)

      Queda muy bien, y el titulo ya hice un par de cambios chapuza por la experiencia que tengo en el blog y me quedo muy bien, gracias de todos modos por tu ayuda, tampoco quiero explotarte ahora, Jajaja.

      Ya mi ultima y ultisima duda y ya le dejo en paz, que ya estarás harto de mí es, ¿Entre las entradas, como puedo reducir el espacio de arriba y abajo? Es que si te das cuenta, hay mas espacio la entrada de arriba y la de abajo con el borde... Y ya con eso, esto super contenta y tú con nueva seguidora! xD

      Eliminar
    5. Me alegro de que vaya quedando como quieres :)

      Para quitar los bordes superior e inferior, busca de nuevo @#baer ul {" y sustituye "padding:...." por "padding: 0 15px 0 15px;" Al hacerlo estás poniendo margen 0 en la parte superior e inferior, si quieres añadir más margen (relleno), cambia el valor 0 por alguna cantidad en píxeles, por ejemplo: 2px.

      Ya me cuentas ;)

      Eliminar
    6. No era lo que quería, pero hice lo que me dijistes y a quedado PERFECTO.
      Después de tantas y tantas dudas, a quedado como quería. Muchas gracias por la entrada, por tus explicaciones, por responderme y tu paciencia conmigo, que eso es difícil, Jajaja.

      Por cierto, tu también tienes un gran blog. Cuando tenga algún día libre en el trabajo, me voy a meter una tardecita a mirar todo el contenido que tienes en el blog, para seguir mejorando el mio.

      Muchas gracias y hasta pronto! Un saludo.

      Eliminar
    7. Ha sido un placer poder ayudarte, además has pillado todo a la primera, así da gusto. Gracias a ti y mucha suerte con tu blog ;)

      Eliminar
  7. Hola Fran,
    te he dejado otro comentario sobre otra duda. Te voy a acabar cansando!!

    Sobre este tema: como se establecen las relaciones entre las entradas? Es decir, yo voy publicando entradas...y añadiendo este código...me busca entradas relacionadas, pero para ello debo hacer algo al publicar las entradas? ¿tengo que añadir etiquetas para que relacione? Según dices al principio de artículo sí es así, añades etiquetas y tu script hace el resto.
    Pero...no sé como haces la búsqueda para relacionar. ¿por la misma palabra? ¿buscas sólo una palabra? ¿frase completa?
    Igual no tendría que preocuparme por esto, pero quiero tenerlo claro para ver qué etiquetas añadir.

    Muchas gracias por todo!!

    ResponderEliminar
    Respuestas
    1. Hola Raky!

      Claro que sí! me encantan estas dudas :-)

      Lo único que hace el código que he implementado es buscar entradas que están bajo la misma etiqueta, sin mirar ninguna otra cosa, por eso es importante colocar bien las etiquetas en nuestras entradas. Es decir, si la entrada está catalogada con las etiquetas "recetas de pollo" y "recetas de arroz", buscará entre todas las entradas con esas dos etiquetas, tienen que estar relacionadas por narices si hemos colocado bien las etiquetas... eso sí... por supuesto que puede que no sea la mejor forma, pero Blogger no nos ofrece mucho más :-)

      Mil perdones por no responderte antes y muchas gracias por seguirme :)

      Eliminar
  8. Gracias por el post Fran! He seguido los pasos, copiado los códigos tal cual los pones y me funciona. Pero tengo un problema: entre las sugerencias me aparece la propia entrada en la que estoy... ¿Hay alguna forma de solucionar esto? ¿Estoy haciendo algo mal? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Adrián!

      En el código que he implementado no se debería incluir como entrada relacionada la misma en la que te encuentras. Si te ocurre esto es que algún paso se ha hecho mal. Pásame la url de tu blog y vemos que te puede estar pasando.

      Muchas gracias a ti por pasarte!

      Eliminar
  9. Hola Fran Enhorabuena por el blog, Está genial!, pero tengo una pregunta

    Tengo varios blogs con la misma cuenta de blogger y me gustaría que en las entradas relacionadas de un blog salieran también entradas de mi otro blog, ¿se puede hacer eso? ¿cómo lo hago?

    ResponderEliminar
    Respuestas
    1. Hola Samuel!

      Muy buena pregunta. En principio sí que se puede, el código que muestro aquí es para rescatar datos de nuestro propio feed, si tienes habilitados los feeds de los blogs podrías mostrar sus entradas relacionadas. Por ejemplo, 2 de cada.

      Interesante... si todavía lo buscas coméntamelo y preparamos un artículo con el paso a paso.

      Muchas gracias por pasarte!

      Eliminar
  10. hola, apasionante como està quedando mis 2 blogs. tengo un problema con uno me funciona bien, pero en el otro aunque que funciona bien, el titulo està en blanco sobre y no se ve (es aqui por ejemplo: http://vacancessalamanque.blogspot.com.es/2014/02/realisation-dun-abri-mobile-pour.html ) he hecho lo mismo que en el otro blog pero sale blanco en vez de negro y no sé como y donde cambiarlo. si me hechas una mano, te lo agradezco.

    ResponderEliminar
    Respuestas
    1. Hola Alfred,

      Es porque tus titulares de tipo H2 son blancos, lo puedes poner en el color que desees poniendo estas líneas de código en la sección CSS de tu plantilla:

      #baer h2 {
      color: black;
      }

      Sustituye por el color que más te guste. Recuerda que el CSS lo puedes poner desde Blogger > Plantilla > Peresonalizar > Avanzado > CSS o colocarlo directamente en la plantilla, debajo del h2 { ... } por ejemplo.

      Eliminar
  11. no lo encuentro, sigo los pasos y llego a avanzado y lo unico que encuentro es añadir fichero css que cuando le doy ,tengo una ventana blanca a la derecha arriba para incluir codigo CSS. pero està vacio.

    ResponderEliminar
    Respuestas
    1. Ahí es donde debe introducir el código que te he puesto :-)

      Eliminar
    2. hay que ser torpe...ya todo arreglado. Genail

      Eliminar
  12. Fran, las entradas funcionaban bien y hoy en mis 2 blogs no aparecen. y no he tocado nada (bueno creo, ayer cambie cosas pero nada del tema de entradas relacionadas y no me doy cuente si despues se ha deja do de ver..9 pero lo queme llama la atención es que en TU BLOG tampoco los veo y ayer si que se veian debajo del articulo y antes de los comentarios. he mirado en otro navegador por si acaso y me paSA lo mismo, no entiendo nada ayudddaaaa

    ResponderEliminar
    Respuestas
    1. Es curioso, te lo comenté creo en otro comentario. en uno de los 2 blogs, se veian las entradas en el articulo de la pagina de entrada y tambien pinchando el articulo: Perfecto.
      En el otro, aunque que había hecho el mismo proceso, solo se veía pinchando el articulo, No en la pagina de entrada.
      Y hoy, sin tocar nada (acabo de comprobar que los codigos estan alli : no se ven en ninguno, y como digo, en este blog tampoco cuando ayer navigaba por tu blog a través de ello. Es cosa de mi ordenador (aunque lo estoy viendo por windows y linux) ? alguien los ve bien? mis blogs son
      http://vacancessalamanque.blogspot.com.es/
      http://sierra-de-francia.blogspot.com.es/

      gracias

      Eliminar
    2. Esta mañana si funciona todo bien otra vez. Es para no entender nada: Anoche ni en linux ni en windows. Ni en tu blog ni en el mío. Algún bug?

      Aunque que ha vuelto a la normalidad, sigo en uno de los blogs, como te dije, sin ver las entradas en los mensajes que aparecen en la pagina de inicio. cuando le doy a los mensajes, alli sí se ven. tienes idea de porque pasa eso y el el otro blog se ven bien en los 2 casos?
      gracias y un saludo

      Eliminar
    3. Hola Alfred!

      Veo que estás hecho un manitas, has includo mucho de los gadgets que explico en los tutoriales ¡genial!

      No se porqué te habrá desaparecido durante un tiempo los enlaces relacionados, se me ocurre que el servicio de Google Drive (que es donde está alojado el código que lo genera) se haya caído durante un tiempo y luego se haya restablecido, aunque no es frecuente que se caiga Google Drive, a veces pasa.

      El código que he puesto de ejemplo es para que se vea dentro de la entrada, no en el home. Lo extraño es que en uno de tus blogs se vea en la página principal... fíjate en el punto 3 del artículo, especifica poner el código después del "data:post.body" que está incluido en la condición "b:if cond='data:blog.pageType == "item&quot". Es decir, solo dentro las entradas.

      En todo caso, si quieres incluirlo también en tu página principal (y en todos los índices), basta con copiarlo justo después de todos los "data:post.body".

      Saludos

      Eliminar
  13. las cosas de la informatica... a lo mejor en el otro blog pegue 2 veces el codigo sin darme cuenta. voy a probar lo que dices a ver- Gracias en todo caso. Mis blogs ahora tiene un toque mucho más profesional
    un saludo

    ResponderEliminar
  14. ¡Hola! Me encanta tu blog, lo he descubierto hoy y llevo enganchada un buen rato :) Tengo puesto LinkWithin, me gustan las imágenes que incorpora pero su sistema de relacionar entrada no me convence (nada). ¿Cómo podría hacerlo como dices pero con imágenes? Veo que citabas una posible explicación pero no la encuentro. Mil gracias
    www.depoetasypiratas.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Hola Elisa, bienvenida :)

      Aún no he publicado una entrada para el caso de entradas relacionadas con imágenes, prometo incluirlo muy pronto.

      PD: Tienes un blog muy bonito, me encanta tu temática

      Eliminar
  15. Hola Fran:

    Soy Víctor, lo he incluido en mi blog http://www.auladehistoria.org, debo decirte que has hecho un buen trabajo, las entradas quedan perfectamente relacionadas, no como con LinkWithin, parece que todo funciona perfecto, pero en algunas entradas, me dice "undefined", en realidad no es muy importante, pero me gustaría saber a que puede deberse.

    Un saludo.

    ResponderEliminar
    Respuestas
    1. Buenas,

      No he podido ver los "undefined" que me comentas, supongo que lo que estará ocurriendo es que tienes entradas a las que no has asignado etiquetas, ya que las entradas relacionadas se montan en base a las etiquetas que has asignado a las entradas. Revisa si tienes alguna entrada a las que no has asignado ninguna etiqueta.

      Un saludo

      Eliminar
  16. hola!!!! he hecho esto pero con imágenes, tengo dos dudas,
    1.Me gustaría que en vez de minaturas de las fotos en cuadrado me aparecieran en circulo,¿Como lo hago?
    Y dos, me gustaría que el texto de las entradas no pudiera ocupar más que la misma foto, o que en otro caso
    pudiera bajarse a la linea de abajo, ya que sino las fotos me quedan siempre desplazadas dependiendo del titulo de mis post y visualmente queda desordenado y feo.
    Muchas gracias. Te dejo mi enlace para que puedas ver como lo tengo.
    http://estademoda-marlafra.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola Marlafra,

      Ve a tu plantilla, a la sección donde tienes el resto de CSS (justo antes de la línea ]]></b:skin>) y copia lo siguiente:

      div#related-posts a {
      width: 90px;
      }

      div#related-posts img {
      border-radius: 50%;
      }

      Con esto tendrías las imágenes en círculo (1) y ajustadas a un ancho fijo (2)

      :-)

      Eliminar
  17. Buenos días. Resulta que he puesto el código tal y cómo dijiste, y aunque funciona bastante bien, hay veces que me pone el título de la propia publicación o la palabra "undefined".
    ¿A qué se puede deber?

    ResponderEliminar
    Respuestas
    1. Hola! Vaya, este comentario no lo había leído. Si pone eso lo más seguro es que tengas alguna entrada sin etiquetas asignada. Trata de poner etiquetas a todos tus entradas, para poderlas relacionar.

      Eliminar
  18. Muy interesante esto es lo que buscaba, a mejora en buena hora

    ResponderEliminar
  19. Holas hice todo lo q mencionas en el post pero tengo el problema de que me sale en todos las ublicaciones yo solo quiero q aparesca cuando el lector ingrese a un determinado post. como lo puedo solucionar gracias.
    este en mi blog:

    http://maestrosdebolivia.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Maria,

      Seguramente lo has puesto en más de un sitio. Fíjate que en el punto 3 si hay varios lo pongas dentro del "b:if cond='data:blog.pageType == "item"". Esto aseguro que solo se vea en las entradas. Revisa tu plantilla y solo ponlo ahí.

      Ya me cuentas ;)

      Eliminar
  20. Hola Fran,
    Mira, como tengo memoria de pez, he borrado mi lista de archivos de mi blo y al volver a ponerlo, aparece el titulos de ese gadget con otra letra y color que los otros...y no me acuerdo como cambie su aspecto entonces...
    he busquado mirando los codigos html de los otros gadgets del menu pero no veo nada que los distiga al que he cambiado, donde podría esta lo que les cambia el color y la letra....lo hicé este verano siguiendo tus instrucciones pero ahora no me acuerdo (tendré que hacerme unas hojas de recuerdo de como se hace...)
    es aqui http://vacancessalamanque.blogspot.com.es/

    Otra pregunta: queria hacer unas listas distintas al de los archivos, ordenando mis articulos en distintos listados segun el teme como politica, arte, turismo...
    Lo hize en mi blo de senderismo y muy bien, pero alli solo tengo une lista de las rutas. en mi otro blo, con 5 listas distintos, puedo crear 5 gadgets iguales pero con nombres distintos? te pregunto porque lo he hecho, me deja hacerlo pero despues en el blog no se ven
    cual seria la mejor forma de hacer esto?
    gracias

    ResponderEliminar
    Respuestas
    1. Hola Alfred,

      No se exactamente el estilo que quieres cambiar, pero si lo resolvimos debe estar en los comentarios de esta misma entrada.

      En el otro asunto ¿te refieres a hacer lo que se suele llamar mapa del sitio?, es decir ¿un listado con los enlaces a todas las entradas de tu blog ordenadas por tema?

      Un saludo!

      Eliminar
  21. Hola Fran. Lo primero darte las gracias por la valiosa información que pones a disposición. Me esta siendo muy útil en el blob que estoy construyendo, cocinarenvaldemoro.es

    Al intentar aplicar este post sobre las entradas relacionadas tipo texto, me he encontrado el problema de que no encuentro ene el código de mi plantilla (simple) , por lo que no puedo aplicar el segundo paso que detallas.

    ¿Me puedes ayudar?

    Gracias,

    JR

    ResponderEliminar
    Respuestas
    1. Hola JR,

      Cualquier plantilla debería tener la etiqueta HEAD, fíjaque que lo que tienes que buscar es "</head>" y poner justo antes de esa etiqueta lo que te pongo en el punto 2. Supongo que habías entendido otra cosa ¿es así?

      Un saludo y gracias a ti por tus palabras ;)

      Eliminar
    2. Hola Fran.

      No tengo ningún problema con el punto 2. El problema lo tengo con el punto 3.Copia el código siguiente, justo después de "", porque lo que no aparece en mi plantilla es data:post.body.

      Gracias,

      JR

      Eliminar
    3. Hola JR!

      Pues en ese caso ocurre algo parecido, "data:post.body" muestra el contenido de tus entradas, de una forma u otra tiene que estar (si no estuviese no verías tus entradas). Prueba buscando trozos de la cadena, por si te aparece fragmentado, es decir, busca: «:post.body», por ejemplo. Te debería aparecer y normalmente más de una vez.

      Ya me cuentas ;)

      PD: Si sigues sin verlo, posiblemente el problema puede estar en como estás buscando. Recuerda situarte DENTRO del código de la plantilla (haciendo click en cualquier parte del código) y luego CTRL+F.

      Eliminar
    4. Hola Fran.

      Tienes razón, no lo estaba buscando correctamente. Ya lo he encontrado y he añadido el código y aunque no lo he conseguido a la primera, ya funciona.

      Como verás en CSS no puedo ayudarte, pero si quieres algo de fogones...:). Muchas gracias!

      Eliminar
    5. Por cierto, mi blog es www.cocinarenvaldemoro.es
      He aplicado bastantes de tus posts: todo lo relativo a SEO, el gadget de contacto, entradas relacionadas... Gracias de nuevo!

      Eliminar
    6. Hola JR,

      Genial que hayas podido resolverlo. Me alegra un montón saber que te ha resultado útil algunas de mis entradas y que haya aportado ese granito de arena para ese pedazo blog que te estás currando.

      Mucha suerte en ese proyecto y ya saber, si necesitas que te eche un cable por aquí me tienes :)

      Eliminar
    7. Hola Fran. Me temo que empiezo a ser pesado ;)

      Esta opción funciona me funciona correctamente, excepto por los undefined que aparecen como entradas relacionadas. He revisado otros comentarios y he puesto etiquetas en todas las entradas, incluso he probado a poner una misma etiqueta en todas las entradas, y siguen apareciendo los undefined. Sera por las páginas de Blogger, que no permiten etiquetas?

      Muchas gracias de nuevo, por tu ayuda y por tu paciencia.

      JR

      Eliminar
    8. Hola JR. Fíjate que las entradas relacionadas que he comentado en el artículo están ideadas para incluirlas dentro de la entrada, cuando entras en tus entradas, valga la redundancia, verás que te aparece correctamente, tal y como está pensado. Yo quitaría las entradas relacionadas de la página principal, fíjate que en el punto 3 explico donde pegar el código exactamente.

      Si tienes problemas para localizarlo coméntamelo :)

      Eliminar
  22. Hola Fran. Tienes razón, dentro de la entrada, las entradas relacionadas funcionan correctamente, pero no se como quitar las entradas relacionadas de la página principal.
    He probado a poner el código después de todas las entradas data:post.body que hay en la plantilla (no en todas al mismo tiempo, claro), que son tres, y solo consigo dos resultados: o que no aparezca nada relativo a las entradas relacionadas o que aparezcan en la página principal (con apariciones undefined) y dentro de la entrada al mismo tiempo.
    Como verás no tengo ni idea de CSS...

    ResponderEliminar
    Respuestas
    1. Hola JR,

      Si te fijas en el punto 3 del tutorial te digo exactamente donde debes ponerlo. Busca el "if" que te indico y pega lo del punto 3 justo debajo del post-body. (borra antes todos los bloques que hayas copiadoanteriormente de este punto 3) .

      Si sigues teniendo problemas puedes escribirme desde la zona contacto que tienes debajo ;)

      Eliminar
    2. ¡Hola! Me pasa algo parecido, solo que en mi caso solo hay dos post-body y no encuentro el así que lo he pegado en el segundo post-body, pero me aparecen en la página principal y al entrar al post. ¿Hay alguna forma de cambiar eso para que solo se vea al ingresar?

      Eliminar
    3. (no encuentro el if, el comentario me borró el fragmento)

      Eliminar
    4. Hola Jaz,

      Pon esta línea antes del código que has copiado (punto 3):

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

      Ahora, justo debajo de esa línea pon el código del punto 3 y una vez finalizada, ciérrala con:

      </b:if>

      De esta forma quedaría:
      <b:if cond='data:blog.pageType == "item"'>
      ..Aquí va el código que habías copiado ya...
      </b:if>


      Ya me cuentas ;)

      Eliminar
  23. Hola Fran: Tengo un blog con tres temas diferentes y los quiero separar por tema, he creado las páginas, pero no sé como pasar el blog a la página las entradas diferenciadas.

    ResponderEliminar
    Respuestas
    1. Hola,

      No puedes enlazar entradas a una página. Para resolver tu problema en Blogger deberías crear 3 etiquetas principales, que tratarías como categorías (Tema 1, Tema 2 y Tema 3). Luego crearías tantas etiquetas como quieras para dividir cada uno de los temas. Así una entrada podría quedar con las etiquetas "Tema 1, Subtema 1, Subtema 2".

      Ahora en el menú puedes crear 3 opciones cada una de ellas apuntando a un tema.

      Si te ves con algún problema ya me cuentas ;)

      Eliminar
  24. Hola Fran:
    Mi blog es:
    http://arcanosmagicos.blogspot.com/
    He seguido las indicaciones pero no funciona.
    Por favor ayudeme.
    Gracias

    ResponderEliminar
    Respuestas
    1. Hola Profesor Martin,

      Cuéntame ¿en que punto te falla? ¿tienes alguna duda en alguna de las indicaciones?

      Eliminar
    2. Hola Fran:
      Desde ya muchas gracias por tu respuesta.
      Tengo problemas con la parte 3 de tus indicaciones.
      En el codigo de mi plantilla el


      Solo aparece dos veces.En una de las veces se muestra como:






      Y en la segunda vez en que aparece se muestra asi:






      Por favor podrias mostrar explicitamente donde debo pegar el codigo
      que estas dando en el paso 3.
      Muchas Gracias.
      Martin

      Eliminar
    3. Disculpa pero no se pegan los codigos en el comentario.
      Pero por favor mi url es:
      http://arcanosmagicos.blogspot.com/
      puedes ver a lo que me refiero viendo el codigo fuente.
      Gracias de antemano por tu orientacion.
      Martin

      Eliminar
    4. Hola Martin,

      Me es imposible ver el código de tu plantilla ya que desde el blog lo que veo es el resultado, pero si te aparece dos veces una será para la versión de escritorio y otra para la versión móvil. Puedes ponerlo en los dos casos, pegándolo en los dos sitios, justo después de "data:post.body"

      Mirando tu código fuente veo que has dejado rastro de otros códigos de entradas relacionadas, posiblemente que has utilizado de otros tutoriales. Estaría bien que eliminases ese código por si pudiese interferir con el que expongo en este artículo.

      Ya me cuentas como te fue ;)

      Eliminar
  25. holaaaa! me gusto mucho pero tengo un pequeño problema, las entradas relacionadas me aparecen hasta en el inicio, y quiero que salgan solo en las entradas, que puede ser?

    ResponderEliminar
  26. muchas gracias campeon, funciona de maravilla en mi blog http://www.yosoyprosperando.com/
    bendiciones

    ResponderEliminar
  27. ¡Hola! Muchas gracias, esto es lo que estaba buscando. Tengo unas dudas, ¿cómo puedo poner que el título de "También te puede interesar" sea más pequeño (como un < h3 >)? ¿y cómo para que se encuentre todo con otra alineación (izquierda, centro)?

    Última duda, en este blog tengo una plantilla que hace resumen automático de entradas, ¿cómo hacerle para que no se muestren las entradas relacionadas en la página principal pero sí en la página de la entrada?

    Muchísimas gracias de nuevo, ¡saludos!

    ResponderEliminar
    Respuestas
    1. Hola Archie,

      Con respecto a tu primera duda, para modificar el aspecto del titular puedes utilizar esto en el css:

      #baer h2 {
      font-size: 1.3em;
      }

      Con esto podrás modificar el aspecto del h2 de ese titular a tu gusto.

      Con respecto a tu segunda duda, debes especificarle que si es una página de tipo índice no ponga las entradas relacionadas, para ello coloca lo siguiente:

      <b:if cond='data:blog.pageType == "item"'>
      ... Aquí el código que tenías de entradas relacionadas...
      </b:if>

      Con esto aseguras que solo aparece en las entradas.

      Ya me cuentas que tal te fue, suerte ;)

      Eliminar
    2. ¡Muchas gracias! Me quedó justo como lo quería n_n

      Eliminar
  28. Hola Fran un gusto. Sabes ocupe tu codigo pero donde muestra las entradas relacionadas me muestra entre ellas una que dice undefinid y otra que repite el articulo donde se esta en ese momento. Por favor amigo ayudame a solucionarlo. Mi blog es http://computacionamil.blogspot.cl/
    Saludos y mucho exito.

    ResponderEliminar
    Respuestas
    1. Hola, fíjate si tienes asignada etiquetas a tus entradas, por lo que me comentas lo más seguro que algunas de tus entradas no tenga asignadas etiquetas.


      Un saludo.

      Eliminar
  29. Hola, y qué hago si no me aparece ??? Gracias y un saludo

    ResponderEliminar
  30. Hola! Genial entrada. Cómo podría hacer para que apareciera esto en la versión movil? Muchas gracias!!!

    ResponderEliminar
  31. Hola "tocayo". Muchas gracias. Lo probé y, funcionó. En cuanto a; 1) Me aparecía en el medio y, 2) Me incluía un "undefinied" (o algo así, je!), al agregarle la modificación que mencionás en respuesta al comentario del día 19/10/15 - 15,35, en cuanto a agregar ..."
    ... Aquí el código que tenías de entradas relacionadas...
    "...
    Lo hice y funcionó "joya" (figura al final de cada entrada y ya, sin el "undefinied"). El único inconveniente es que, le agrega la entrada desde la que se ve. Igual, lo instalé y, le agregué el CSS que mencionás en el paso ¿4? y, me quedó "hermoso". Muchas gracias. Si podés, resolveme lo de NO incluir la entrada desde la que se lee. Sino, no importa. Más vale que "sobre y no que falte", je! (mis entradas son "largas" y, capaz las tienen que volver a releer, je!. Pero, ya he comprobado - con analytics - que, al menos los "míos" - Argentina - están más de 15 minutos por sesión, je! Lo que - aún - No logro, es "retener" a la pila de "extranjeros" que ingresan a mi blog (y eso que, a falta de uno, le instalé 2 traductores, je!. Uno en "modo automático" y otro, en "modo manual"). Y hacia ellos es que, buscaba algo como lo que explicás en esta entrada. Gracias!!! (te envió un enlace a mi blog por si querés analizarlo y, además de tu opinión, tal vez, me puedas ayudar a resolver ambos "conflictos" mencionados) Mi blog es; http://atutrabajo.blogspot.com.ar/ Y, desde ya, muchas gracias. Saludos!

    ResponderEliminar
  32. Me encanta tu blog chico listo! gracias :)

    ResponderEliminar
  33. todo funcionaba hasta hoy.
    Blogger ha "borrado" esta opción y más cosas como una lista de entradas y otras de enlaces que tenía en el menu.
    No sé que ha pasado, hoy 30 de septiembre, tengo el caché del blog del 27 y se ve bien, o sea que ha siso un bug en estos 3 dias.
    Pensé al pricipio si habia hecho algo mal, pero no he tocado nada desde hace una semana y además que se ha ido un monton de cosas.
    teneis idea de lo que me ha psado? le ha pasado a más gente?
    gracias

    ResponderEliminar
  34. Es más, intento rehacer por ejemplo esta función aplicada aqui. El script sigue en el codigo html, en cambio cuando busco "" con control+f, no encuentra nada, quitando letras, solo encuentra 3 data. no entiendo nada.
    Podria haber sido victima de un hacker?

    ResponderEliminar
  35. Ha sido solo en uno de los 2 blogs que tengo, el otro esta perfecto....

    ResponderEliminar
  36. Hola Fran,

    Otra vez con dudas. Esta vez no he conseguido que se vea nada, no me funciona, y probé a poner la segunda parte del código detrás de los dos . Lo que sí vi es que ninguno está dentro de

    ¿Cuál es el error que cometí?. ¿Podrías ayudarme por favor?. Mi blog es www.laaventuradeldragon.blogspot.com

    Gracias Fran. Un saludo

    ResponderEliminar
  37. Buenas, grandioso blog, muy bien explicado, espero que veas el mio y si puedes darme algunos consejillos te lo agradecería. UN saludo y chapeau

    ResponderEliminar
  38. no funciona el script, deberias actualizarlo de qué vale este post sino? es una perdida de tiempo

    ResponderEliminar
  39. Hola! Perdona que retome un post de hace unos años pero tratando de seguir los pasos me sale este error al guardar la plantilla:

    The widget settings in widget with id PageList2 is not valid. Page title is invalid.

    ResponderEliminar