Tips para Blogger! Entradas Relacionadas con miniaturas + Tutorial

9:00:00 Princess Aleka 39 Comentarios

Muy buenos días-tardes-noches, dependiendo del huso horario desde que me estás leyendo y bienvenid@s a ésta entrada que promete ser el inicio de unos cuantos tips y trucos que me he conseguido en Internet, que me han ayudado muchísimo a la hora de mejorar mi blog. Por favor lee hasta el final, ya que necesito de tu ayuda.

Dedico esta primera entrada de la nueva sección a Isabella, que abrió su blog recientemente y fue la que me inspiró para recopilar estas ideas, siempre con miras a hacer de nuestros blogs un espacio más personalizado.

Antes de empezar, quiero dejar claro que mucho de lo que publicaré en esta sección no es de mi autoría, sin embargo siempre procuraré colocar los créditos de los respectivos dueños. Generalmente, los tips son para Blogger, ya que es la plataforma que he usado hasta ahora y no he visto cómo funcionan los demás (perdónenme, usuarios de WordPress). También es importante tener claro que los pasos deben ser seguidos cuidadosamente y aprovechar aquello de “copiar y pegar” para evitar errores, te recomiendo leer el tutorial COMPLETO antes de empezar a modificar tu plantilla. Aclarado esto, empecemos!

Entradas Relacionadas con miniaturas
El objeto de este tutorial es el de mostrar una lista de entradas relacionadas al final de cada post, cada una con una imagen en miniatura. Esto te ayudará a aumentar el tráfico en tu blog, ya que le ofreces al lector contenido parecido al que acaba de leer. Los pasos son los siguientes:

Paso 0: Por seguridad, te recomiendo guardar tu plantilla actual, ya que si no te funciona o no te gusta lo que cambiaste, puedas volver a su estado anterior mediante unos cuantos clicks. Este paso aplica para todos los tutoriales futuros. Para hacer un respaldo de tu plantilla:
    • En el menú de la izquierda, haz click en “Plantilla”.
Captura0a
    • Haz click en el siguiente botón (lo conseguirás en la esquina superior derecha de tu dashboard):
Captura0b
    • Te aparecerá la imagen que sigue. Haz click en el botón naranja y guárdala en un lugar que recuerdes.
Captura0c
Paso 1: Ya que tengas el respaldo guardado, vamos a lo que vinimos. Para empezar, haz click en botón “Edición de HTML”
Captura1
Paso 2: Te aparecerá ésta amenazadora pantallita, da click en “Continuar”
Captura2
Paso 3: En la próxima pantalla que aparezca, marca la casilla “Expandir plantillas de artilugios”
Captura3
Paso 4: ATENCIÓN! A partir de aquí, ten sumo cuidado. Trabaja con tranquilidad y confianza. Haremos una búsqueda en el código. Presiona Ctrl + F en tu teclado. Esto abrirá un cuadrito que lucirá algo como este (así se verá si usas Firefox)
Captura4
Paso 5: En ese cuadrito pega lo siguiente y dale Enter

</head>

Paso 6: Y reemplázalo por

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:ifcond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Entradas relacionadas";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Paso 7: Ahora, busca lo siguiente

<div class='post-footer-line post-footer-line-1'>

Si no la consigues, prueba con esta

<p class='post-footer-line post-footer-line-1'>

Paso 8: Inmediatamente DESPUÉS de esa línea, pega lo siguiente

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript''/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

Paso 9: Puedes ajustar el número máximo de entradas relacionadas que se muestran, editando esta línea

var maxresults=5;

Pero también debes cambiar la siguiente línea, tomando en cuenta que el número aquí debe ser uno más que el número que pongas en la línea que cambiaste arriba

max-results=6

Paso 10: Para editar el título que aparece antes de las miniaturas, cambia lo que aparece entre las comillas en esta línea

var relatedpoststitle="Entradas Relacionadas";

Paso 11: Para cambiar la imagen que aparece cuando no hay miniatura disponible, cambia el enlace a la imagen en esta línea

var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

Paso 12: Para cambiar el color de la línea que separa las miniaturas, cambia esta línea

var splittercolor="#d4eaf2";

Paso 13: Guarda tu plantilla, cierra el cuadro de edición y revisa tu blog. Al final de cualquier entrada que abras, aparecerán las miniaturas.

Si nada de esto te funciona o te genera un problema, NO ENTRES EN PÁNICO. Simplemente déjame un comentario, o un mensaje en Facebook o Twitter, que yo te respondo lo más pronto posible.

Todo el código pertenece a Blogger Plugins y puedes encontrar el tutorial original siguiendo este link.

Espero que les haya gustado. Pronto tendré más tutoriales. Por favor, déjenme sus comentarios.

Como les dije al principio, necesito la ayuda de todos ustedes para nombrar esta sección. Me gustaría que me dejaran sus ideas en la página de Facebook y lo someteremos a votación. Cuento con ustedes. Un beso,

Denise
Twitter

39 comentarios:

  1. Muchas gracias por el tutorial, no había aplicado lo de “Expandir plantillas de artilugios” por eso no me funcionaba, de verdad me sirvió mucho.

    ResponderEliminar
  2.  Solo hay un pequeño fallo

    Error al analizar XML, línea 651, columna 25: Element type "b:ifcond"
    must be followed by either attribute specifications, ">" or "/>".

    ResponderEliminar
  3.  Hola! Me alegro que te haya servido. Gracias por tu comentario!

    ResponderEliminar
  4. Hola! Es posible que al pegar el código, hayas sustituido por error el cierre de algún tag. Te invito a restaurar tu plantilla (tengo otro tuto para eso --> http://princessaleka.blogspot.com/2012/04/tips-para-blogger-restablecer-la.html), e intentar todo el proceso de nuevo. Cuéntame cómo te fue. Gracias por pasar por acá y dejar tu comentario.

    ResponderEliminar
  5. Hola Denise, muchísimas gracias por tu ayuda. Te cuento que hice exactamente lo mismo tal como lo describís y no hay forma, no quieren aparecer. Tendrás una idea de por qué puede pasar? Yo uso la plantilla simple de Blogger, mi blog es estudiocuatroparedes.blogspot.com. Muchas gracias! 

    ResponderEliminar
  6. Hola, Lucía! Te fijaste si marcaste la opción “Expandir plantillas de artilugios”? A mí me pasó también cuando lo intenté la primera vez. Trata de nuevo y me cuentas. Un beso.

    ResponderEliminar
  7.  A mí me mostraba los errores que comenta PEDRO LUIS, y al igual que usted, no me mostraba las entradas relacionadas.
    Traté de entender los errores y conseguí que estos no aparecieran más. Pero tampoco aparecían las entradas relacionadas.
    Entonces fui al enlace inspiración de este post jeje, y allí acabo de ver que luego de encontrar

    nos dice pegar el código"AFTER".
    Me parece entonces que la partecita que dice "Inmediatamente antes de esa línea, pega lo siguiente" en esta entrada debe ser cambiada por: "Justo después de esa línea, insertar lo siguiente".
    Pues así lo acabo de hacer y he conseguido los cambios deseados.

    El problemita que tengo ahora es que mis entradas no tienen thumbnail . . .

    Muchas gracias por aparecer como los primeros resultados de mi búsqueda en Google ;)

    ResponderEliminar
  8. @PrincessAleka:disqus El problema se debe a que en la linea 12 del Paso 8 de tu código hay un error.

    b:if> 

    Debería de ser: 

    Gracias por tu código! Funciona de maravilla. Ya lo he implementado en mi blog.

    ResponderEliminar
  9. Hola,buenas tardes!!1 muchas gracias por el tutorial,de todos lo que he visto por la red es el más sencillo y fácil se usar.En mi caso,me ha sido imposible,no me funciona,me dá error y eso que lo he inentado como 5 veces.También he reetablecido la plantilla y vuelto a empezar pero nada,,,Alguien puede ayudarme? 

    ResponderEliminar
  10. hola!! Me ha parecido MUY ÚTIL, pero me ha dado un problema al final. Me aparece este mensaje: Error al analizar XML, línea 655, columna 25: Element type "b:ifcond" must be followed by either attribute specifications, ">" or "/>".
    Cuando le añado ambas cosas (pruebo con ambos), me pone esto: Error al analizar XML, línea 693, columna 18: The element type "head" must be terminated by the matching end-tag "".
    NO sé qué hacer. Perdona el color rojo...jejeje
    Muchísimas gracias por tu aportación ;) Muy buen trabajo.

    ResponderEliminar
  11. Yo tengo un problema cuando busco esta linea me sale que tengo 2 en cual debería de pegar el siguiente código?

    ResponderEliminar
  12. Alguna vez lo dijo un filósofo griego, considero más valiente al que vence
    sus caprichos que al que vence a sus oponentes, ya que la conquista más
    dura es la conquista sobre si mismo.
    My blog :: Manuela D

    ResponderEliminar
  13. En el primero que consigues. Avisame si te funciona.

    ResponderEliminar
  14. hola, yo tengo otro código, y sí me funcionas pero solo cuando se ven individualmente  las entradas, osea al darle click a una de ellas recién se muestra las "entradas relacionadas", y quiero que se muestre entrando al blog... me entiende? 
     
    ¿Este código que compartes funcionará igual al que tengo? Espero su respuesta. saludos.

    indiemusiclist.blogspot.com

    ResponderEliminar
  15. Sí, este código funciona en cada entrada por separado, no en la página principal del blog. Creo que con LinkWithin se puede hacer eso que dices. Quizás este tuto te sea útil: http://www.areatic.net/2012/11/blogger-gadget-entradas-relacionadas.html

    ResponderEliminar
  16. disculpas @diariodeunlondi:disqus , cuál sería el error específicamente? me sale lo mismo que a @yahoo-REASZNCUPC2TC7WKJPTJSFIFLA:disqus 

    ResponderEliminar
  17. Fíjense en cómo cierran las etiquetas. Blogger avisa cuando alguna está suelta.

    ResponderEliminar
  18. hola gente linda del blogger pos tengo un problema ya hize todo pero aun asi me sale el error Error al analizar XML, línea 651, columna 25: Element type "b:ifcond" 

    must be followed by either attribute specifications, ">" or "/>". y pues no c jajajaja nada de como corregirlo U_U no saben como sufro XD 

    ResponderEliminar
  19. hola gente linda sera que me pueden ayudar ya eh echo todo lo posible pèro me sigue saliendo el mismo error y creo que es el mismo de la otra vez U_U Error al analizar XML, línea 651, columna 25: Element type "b:ifcond" 

    must be followed by either attribute specifications, ">" or "/>".
    ese pequeño fallo no c como corregirlo ni c en donde es U_U sera que podrian darme la correccion o algo encerio que ni idea jajaj XD 

    ResponderEliminar
  20. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes. Espero que aún te funcione. Saludos.

    ResponderEliminar
  21. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  22. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  23. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  24.  ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  25.  ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  26. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  27. ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  28.  ¡Hola! Disculpa, cuando publiqué la primera vez el tuto cometí un error
    tremendo. Revisa el paso 8, el código se coloca DESPUÉS, no antes.
    Espero que aún te funcione. Saludos.

    ResponderEliminar
  29. Hola!!!
    Tengo un problema, tras pegar el primer código, busco las lineas del paso 7, pero no encuentro ninguna de las dos :(
    Muchas gracias!!

    ResponderEliminar
  30. hola.
    habra alguna manera de que no salga el titulo de las entradas.. gracias

    ResponderEliminar
  31. también me podrias ayudar para agrandar las imagenes en miniatura.

    ResponderEliminar
  32. ¡Hola! ¿Tu blog tiene alguna plantilla personalizada?

    ResponderEliminar
  33. ¡Hola! El script que muestra las entradas relacionadas lo cargo desde un servidor y no sé si se pueda modificar. Gracias por tu inquietud. Suerte.

    ResponderEliminar
  34. Debo darte la misma respuesta que tu pregunta anterior. Lo siento.

    ResponderEliminar
  35. Hola me aparece esto Error al analizar XML, línea 1414, columna 94: The reference to entity "callback" must end with the ';' delimiter. que hago aqui? me podrian ayudar?

    ResponderEliminar
  36. Gracias. en caso de error arreglen esto Paso 6: por y Paso 8

    ResponderEliminar
  37. Hola, disculpa este tutorial lo tienes aplicado a tu blog como se muestra en esta entrada, osea que las imagenes se muestran asu 100% y no recortadas y cuadradas como en la mayoria de los tutoriales?
    saludos!! ;)

    ResponderEliminar
  38. Hola, disculpa este tutorial lo tienes aplicado a tu blog como se
    muestra en esta entrada, osea que las imagenes se muestran asu 100% y no
    recortadas y cuadradas como en la mayoria de los tutoriales?
    saludos!! ;)

    ResponderEliminar

Deja tu huella en este Universo

Populares de la semana