Hasta ahora muchos usan el gadget de Linkwithin, pero este presenta la limitación de solo mostrar hasta 5 entradas y depender de una plataforma externa. Aquí les traemos el mismo truco maravilloso para la visualización de los post o entradas relacionadas debajo de cada una de las entradas de su blog, junto con miniaturas, pero totalmente independiente. Los artículos relacionados son elegidos entre otros de la misma categoría / etiqueta. Con este hack muchos de sus lectores se mantendrá en su sitio durante largos períodos de tiempo en los que ven los mensajes de interés relacionados.
Paso 1. Ir a Panel de control >> Diseño Blogger HTML >> Editar;
Paso 2. Marque la casilla "Expandir plantilla de artilugios" ;
Paso 3. Buscar con (Ctrl + F) este trozo de código:
</head>
Paso 4. Copia y pega el siguiente código justo antes de / por encima de
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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://4.bp.blogspot.com/-sCQy7v-L2bo/T3OYPnm7LuI/AAAAAAAABl4/cbteumcrZSU/s1600/noimage.png";
var maxresults=5 ;
var splittercolor="#d4eaf2";
var relatedpoststitle="You might also like these posts";
</script>
<script src='https://dl.dropbox.com/u/14895124/Javascript/related-posts-with-thumbnails-for-blogger%5B1%5D.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Nota:
para cambiar la imagen predeterminada cuando no hay imágenes disponibles, sustituir el URL en azul con otra de su elección.
-para la visualización de más de 5 mensajes, cambie el valor de "5 maxResults var = 5;"
-eliminar el código de color violeta si desea que los mensajes relacionados que se mostrará en la página principal también
Paso 5. Ahora busca el siguiente código:
<div class='post-footer-line post-footer-line-1'>
Si no lo encuentra, a continuación, busque la siguiente:
<p class='post-footer-line post-footer-line-1'>
O:
<data:post.body/>
Paso 6. Copia y pega el siguiente código justo después de cualquiera de estas líneas
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Nota: - cambiar el valor 6 de max-results = 6 con el número de mensajes que desea que se muestren.
- Si desea que los mensajes relacionados que se mostrará en la página principal también, eliminar el código de color violeta.
Paso 7. Guarde la plantilla
Visto en http://helplogger.blogspot.com.ar/2012/03/how-to-add-related-posts-widget-to.html
Muchas gracias. Funciona perfectamente.
ResponderEliminar¿Habría posibilidad de cambiar el tamaño de las miniaturas?
Saludos
Supongo (porque no recuerdo lo que había probado oportunamente) que cambiando las líneas height:100%;
ResponderEliminarmin-height:100%; por valores en pixels tales como 100px, debería cambiar. Para que quede prolijo deberás cambiar también la cantidad de resultados.
Saludos
Hola, ese código funciona al entrar a la página principal, o solo se ven las miniaturas cuando hacemos click en una entrada?
ResponderEliminarYo tengo ese, pero estoy buscando uno donde al entrar al blog se muestre las entradas relacionadas... ¿sabes?
Luis, eso depende de si tienes una plantilla normal o de estilo magazine que son las que vienen con resumen de post con miniatura de imagen (las que dicen "leer más"). El gadget aparece en la ubicación donde lo coloques. En el ejemplo se pone en el pie del post 'post-footer-line post-footer-line-1', esto quiere decir que si tu blog muestra todo el post en la primer página lo verás de entrada y si es estilo magazine deberás entrar en el post para verlos.
EliminarHay varios trucos para mostrar u ocultar los gadgets a voluntad, pero aquí se trata de que lo verás según donde alojes la modificación encerrada entre Related Posts with Thumbnails Code Start y Related Posts with Thumbnails Code End
Disculpa, hay alguna forma para que se muestren mas caracteres,lo que pasas es que uso títulos largos y no me sirve.
ResponderEliminarNo es un diseño mío así que estoy tan acotado como usted para darle una respuesta. Otras aplicaciones similares ( como la que usa mi plantilla en este momento) no tienen limitaciones. Tal vez se deba a que depende de la separación y tamaño de los campos. Espero que encuentre su solución.
EliminarGracias amigo, me ha servido a la perfeccion, ademas es algo simple, Aunque debo decir que en paso 5 no encontraba la linea que tenia que buscar pero busque el post-footer y despues de un > ubique el codigo y ha funcionado. Saludos. Muy buen blog.
ResponderEliminarExcelente trabajo. Espero que la disfrute con alegría.;)
EliminarExcelente, muchas gracias.
ResponderEliminarTengu una duda he observado que ne muchas ocasiones, entre los post relacionados que se muestan, también se muestra el mismo post en cuestión que estoy viendo, lo cual me fastidia un poco, evidentemente "este" post está relacionado consigo mismo, claro, pero este ya lo estoy viendo. ¿Sabes porqué puede ser o cómo evitarlo?
Seldon, tiene toda la razón del mundo. Como supondrá, todo puede llegar a hacerse mediante código, pero dentro del que existe en forma gratuita, éste no considera el bloqueo del post donde aparece el relacionado. Creo incluso que en Linkwithin aparece de tanto en tanto el mismo post como recomendado. Es que casi todos toman la información del RSS publicado y no hace un análisis de donde se encuentra o lo va a mostrar(cosa que no sería difícil de hacer).
EliminarPor lo tanto la respuesta a su pregunta es , no, no sé cómo evitarlo.
Un abrazo
Gracias OPin, yo tampoco tenía nivel técnico como para modificar el código y evitarlo, aunque curioseando un poco si que veo que elimina duplicados (para que no salga dos veces el mismo post). Así que si alguien sabe programar lo suficiente y se anima a decirnos cómo se cambia.... :-)
ResponderEliminarEso, eso, que aparezca alguien que sepa :)
Eliminargracias, me a quedado perfecto.
ResponderEliminarGracias a ti (p)
EliminarHola y muchas gracias, pero lamentablemente a mi no me ha funcionado, aunque lo he intentado de mil maneras.
ResponderEliminarCada plantilla es un mundo y a veces no funcionan como uno quisiera.
EliminarPrueba la manera 1001 y ubica el código bajo
class='post-footer-line post-footer-line-2'
o
class='post-footer-line post-footer-line-3'
o incluso antes del area de comentarios.
Si eso no funciona puedes usar Linkwithin, o que alguien que sepa más te analice la plantilla.
Cariños.
Hola: Muchas gracias por tus tutoriales, son muy prácticos.
ResponderEliminarMe atrevo a abusar de tu bondad para hacerte una consulta: después de mucho buscar, por fin he añadido una descripción en la cabecera de mi blog, pero no puedo cambiar el tamaño ni el formato de la fuente. Quisiera poner parte de la descripción en cursiva, pero no encuentro la forma. En el diseñador de plantillas solo está la opción de cambiar el color de la fuente.
Perdona por el morro y gracias de antemano.
Por lo que he visto en tu blog has incluido una etiqueta description con datos encerrados entre etiquetas "span"
Eliminar<p class="description"><span>"Verdaderamente grandes son las cosas que propongo en este breve tratado a la visión y a la contemplación de los estudiosos de la naturaleza.(...)"
(Avviso Astronomico, Sidereus Nuncius. Galileo)</span></p>
la forma más sencilla de continuar con tu intento es la siguiente:
En una entrada vacía escribe tu texto, ponle la fuente que quieras en itálica o no, luego copia el código que resulta pero del área HTML de tu entrada. Verás que se encuentra entre spans. Por ejemplo
<span style="font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;"><i>"Verdaderamente grandes son las cosas que propongo en este breve tratado a la visión y a la contemplación de los estudiosos de la naturaleza.(...)"<br />(Avviso Astronomico, Sidereus Nuncius. Galileo)</i></span>
Creo que es la forma más sencilla.
Si quieres otro tipo de letra utiliza nuestra entrada http://generacionopin.blogspot.com.ar/2012/09/cambiar-el-tipo-de-letra-en-blogger.html
y pon el nombre de la familia de fonts de tu elección antes de donde dice Helvetica.
Debería funcionar.
Muchísimas gracias por tu eficacio y rapidez.
EliminarPero vas a alucinar con mi falta de pericia: una vez copiado el código, ¿dónde accedo al código HTML general del blog para pegarlo y en qué parte del código lo pego? Porque lo intenté yendo a "plantilla" y pulsando el botón de "editar HTML" y como ahí no pude encontrar ninguna etiqueta que tuviera mi texto, me decidí a consultarte.
Lo que encontré fue, al principio del código, lo que yo supongo que se refiere a la descripción, porque pone "group description (igual) Blog Description", etc.
pero el trozo de código que has pegado tú en tu respuesta,
el que va entre etiquetas span, este no soy capaz de encontrarlo.
De verdad que te lo agradezco.
Si expandes tu plantilla HTML mediante el botón superior etiquetado como "Expandir plantillas de artilugios" y buscas tu texto mediante ctrl + F seguramente encontrarás lo que has agregado y podrás cambiarlo pegando el nuevo sobre el anterior.
EliminarNo olvides hacer un resguardo antes de cualquier modificación.
Suerte.
Hola, OPin: Muchas gracias por tu paciencia. Finalmente logré cambiar el formato, a base de dar la lata a muchos blogueros.
ResponderEliminarLa solución era tan simple como poner la etiqueta ... en la propia casilla de descripción. No te deja copiar todo en HTML, pero sí poner algunas etiquetas en sitios precisos.
Saludos y enhorabuena por tu labor.
Lamento no haberte sido útil pero me alegra que lo hayas logrado solucionar, aunque ignoro de cual casilla de descripción me hablas. Nadie mejor que quién puede acceder al contenido de la plantilla para encontrar su problema, no hay duda. Desde fuera solo podemos adivinar mirando lo que el sistema permite visualizar.
EliminarGracias por pasar y que disfrutes tu blog con alegría.
Este comentario ha sido eliminado por el autor.
ResponderEliminarJohnver si te fijas al pie de página esta plantilla no me pertenece, pero he utilizado este formato de post relacionados en otros blogs sin problemas.
EliminarNo, no creo que haga un tuto sobre ésto, pero puedes bajar esta platilla en http://www.soratemplates.com/2012/07/inspiration-blogger-template.html , instalarla en un blog de pruebas y copiar el CCS y los Scripts para integrarlo en tu plantilla.
El cambio más importante es el CCS asociado a Related Post.
Suerte.
Hola, cuando el título de la entrada es largo salen cortadas las palabras ¿hay forma de corregirlo?
ResponderEliminarNo se trata de una falla ya que el mismo LinkWithin hace exactamente lo mismo. Se trata de ajustarse a un espacio predefinido en el CCS y que al tener un tamaño fijo de imagen debe sacrificar el texto.
EliminarUna forma de minimizarlo es darle más espacio a cada entrada, por ejemplo usando tres o cuatro de ellas en el ancho de la plantilla, o como en ésta que estoy usando, hacer que el ancho de cada ítem permita títulos largos y puedan expandirse en varias filas.
Pero ya sería otra implementación.
Hola, este gadget yo lo tenía instalado con este tutorial, yo desaparecieron las entradas relacionadas, miré y todos los codigos seguian en su lugar, los elimine y volvi a aplicar y ya no se muestran mis entradas ralacionadas, sabes qué pudo haber sido? gracias! christiandpy.blogspot.com
ResponderEliminarVerifiqué que sigue funcionando en la página del autor original, así que lo más probable es que haya algún tipo de colisión con otra función que hayas instalado a posteriori. Fíjate qué has agregado antes de que desapareciera ésta función y probablemente encontrarás el problema.
EliminarLos datos del autor se encuentran en el post.
Suerte.
Gracias por contestar! Veré qué puedo hacer, saludos.
ResponderEliminarMuy bueno, varios widgets como este han dejado de trabajar al cambiar el panel de diseño html de Blogger los últimos días, pero este funciona a la perfección. Lo que sí tengo es una duda: ¿Cómo puedo centrarlo?
ResponderEliminarLo muestro: http://cloudgar.blogspot.com.es/2013/04/minecraft-harder-better-faster-stronger.html
Me gustaría que los seis saliesen centrados, pero he probado con varios códigos y no hay tu tía. Al final será algo tan simple que ni habré caído en ello. Muchísimas gracias por el aporte OPin.
Lo mejor en tu caso es jugar con los márgenes de manera de hacerlos más amplios y lograr ocupar todo el ancho. Si lo centras no quedará tan bien como si ocupas todo el ancho.
EliminarEn estos momentos no puedo hacer pruebas pero apenas pueda te dejaré más información.
Puedes modificar la separación agregando
Eliminar#related-posts a{
color:black;
margin:0px 20px 0px 0px;
}
o puedes compensar el centrado cambiando el padding-left:0px; por la mitad del espacio sobrante (esto centrará el widget por desplazamiento a la izquierda)
Muchas gracias por tu sugerencias, a mi me no me funciona tengo una plantilla minima de blogger y lo he intentado de mil maneras y no va. Además tampoco me va linkwithin, nada un desastre
ResponderEliminarEstimada Zara: Cuando utilizas este tipo de widgets, (sea ésta implementación o Linkwithin) el sistema utiliza información publicada en tu RSS, es decir, debes tener habilitada tu dirección en algún Feed.
EliminarTe dejo una muy buena explicación del Potro (Ciudad Blogger) para que habilites tu feed y así puedas usar Linkwithin o lo que en este post te contamos.
http://ciudadblogger.com/2011/05/crear-un-feed-en-feedburner-y.html
Mucha suerte.
Está muy bien muchas gracias! Me ha dado dolor de cabeza porque hasta el
ResponderEliminardiv class='post-footer-line post-footer-line-3' no me funcionaba pero bueno, arreglado =)
Felicitaciones ! (o)
ResponderEliminarUna pregunta! ¿Sabrías cómo hacer que quedara centrado? Ya sería el toque final!
ResponderEliminarUn beso!
Por ahora la mejor respuesta que tengo es la que le he dado más arriba a Boba Fett. Compensar los márgenes o la separación.
EliminarSaludos.
Hay alguna forma de aumentar el tamaño de la imagen en miniatura? probe cambiando el height:100%;min-height:100%; por valores en pixels como aparece en el primer comentario, pero sigue sin funcionar...
ResponderEliminarTiene usted toda la razón. Luego de aquella respuesta trabajé un poco el tema y resulta que la definición está dentro del archivo JAVA. Habría que editarlo y modificar la línea
Eliminar<img style="width:72px;height:72px;border:0px;
por los valores que uno pretenda. Salvarlo y volver a subirlo a un host, para finalmente cambiar la url en la plantilla.
Otra opción, que no he probado pero supongo que funcionará es cambiar los valores 100% por otros tales como 150% y ver que pasa.
Como no tengo tiempo de probarlo le agradecería que nos cuente a todos como le resultó.
Un abrazo.
Gracias, muy bueno!! Tras un rato toqueteando, he conseguido dejarlo a mi gusto, he podido cambiar el tamaño de las imagenes y la longitud de los titulos modificando el archivo .js sin problema.
ResponderEliminarLo unico que no me ha convencido es que, creo, que salen los últimos post de esas etiquetas siempre, es decir si pones que salgan 5 recomendaciones y estas en una entrada cuya etiqueta es "Pepito", te salen los últimos 5 post que hayas puesto de "pepito", cuando en mi caso al menos seria mejor que saliesen 5 entradas aleatorias de esa/esas etiquetas, no siempre las mas recientes.
PornoD3. Debo confesar que no lo he notado, quizás porque no uso este widget en particular. Usualmente utilizo el que está instalado en esta página y que varía cada vez que ingresas en el post. Es posible que en una nueva entrada lo publique, pero como todas las cosas tiene una contra: ralentiza la carga del blog.
EliminarPero si en tu post este widget muestra cinco entradas y luego de presionar F5 vuelven a aparecer las mismas, estoy seguro que no durará mucho en tu página.
Saludos.
Hola,gran tutorial pero no me funciona trato de piner todo los codigos bien pero nada lo e intentado de mil marenas pero se me resiste.ne cesito que me ayudas,tengo una plantilla de autor o terceros soratemples
ResponderEliminareste es mi blog http://fujoshinoyaoi.blogspot.com.es/ te agradeceria la ayuda
saludos
Estimado amigo. Lamentablemente no me será posible darle la ayuda que necesita. La plantilla Project 10 siempre me ha dado problemas para cargarla y hoy no ha sido la excepción. De tal manera me es imposible hacer pruebas pues me bloquea la máquina. Sora Templates cuenta con muy hermosas plantillas pero lamentablemente su autor ofusca el código para que nadie pueda cambiar los créditos. En esa protección incluye mucho del código de funcionamiento de los widgets, razón por la cual puede haber alguna parte del código que bloquea nuestros Related Post y no podremos solucionarlo porque se encuentra ofuscado.
Eliminarhttp://es.wikipedia.org/wiki/Ofuscaci%C3%B3n
Será en otra oportunidad.
Saludos.
Hola:
ResponderEliminarPor más que incluyo el código no consigo que funcione. No me hace nada, es decir, no muestra el gadget de entradas relacionadas.
Un saludo
Felicitaciones.....
ResponderEliminarHola Opin, quería preguntarte, por favor, cómo eliminaste las entradas relacionadas de la página principal de este blog y las conservaste en las entradas. Gracias, un saludo
ResponderEliminarDavid. Las entradas relacionadas no deberían aparecer en la página principal y si dentro del post. Pero algunas plantillas se conportan de forma diferente.
EliminarPara solucionarlo deberás ocultar el elemento siguiendo estas indicaciones de Ciudad Blogger.
http://www.ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html
Saludos.
Es que lo que me resulta extraño es que yo también tengo esta plantilla y a mí sí que me aparecen en la página principal, entre el pequeño resumen de las dos entradas que tengo publicadas a modo de prueba. Como le he estado haciendo muchas modificaciones puede que sea debido a que he tocado algo del código. Leeré el link que me indicas, muchas gracias O Pin por tu respuesta tan rápida.
ResponderEliminarFuncionó perfectamente, muchas gracias nuevamente, un saludo.
ResponderEliminar