sábado, 12 de julio de 2014

Poner entradas relacionadas con miniatura en blogger (I)

Bueno ya he estado unos días fuera sin escribir en mi blog, pero, ya he vuelto en el día de hoy les traigo un truco funcional aunque su instalación es fácil alguna veces puede dar lío pues todo varía según el código de la plantilla y se trata de poner las entradas relacionadas en nuestro blog un ejemplo de como se veria sería el siguiente:


Así que para agregar esto en nuestro blog primero vamos a Plantilla | Editar HTML y buscamos la etiqueta </head> antes de ella pegaremos lo siguiente:

<!-- Entradas relacionadas con miniatura Script y Estilo -->
<b:if cond='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; /*Tamaño de la letra*/
color: white; /*Color de la letra*/
font-family: Arial, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:white; /*Color letra sin pasar el mouse*/
transition: all 0.7s ease 0s;
}
#related-posts a:hover{
color:black; /*Color letra al pasar el mouse*/
}
#related-posts a:hover {
background-color:#d4eaf2; /*Color de fondo al pasar el mouse*/
border-radius:10px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}}}}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) {
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
if (r < relatedTitles.length - 1) {r++;} else {r = 0;}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!-- Entradas relacionadas con miniatura. Script y Estilo -->

Muy bien, hecho esto seguirá la parte más incómoda pues es la que varia según el código de su blog para que se visualice correctamente lo normal será ponerlo en el pie del post (post-footer) si ya hay algo allí recomiendo que se coloque debajo de esto para que se vea a lo último generalmente está línea va expresada así búsquenla:

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

Si no les da entonces esta pero el proceso es igual:

<div class='post-footer'> 

Debajo de esta línea irá el siguiente código:


<!-- Entradas relacionadas con miniatura -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Posts relacionados&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Entradas relacionadas con miniatura -->

Y listo podría decir que ya estuvo todo es importante guardar lo cambios y visualizar directamente desde un post ya que desde una vista previa el script no se ejecuta en lo absoluto, si tienen duda alguna no olviden comentar. 

Hasta la próxima,

52 comentarios:

  1. Un problema fácil de solucionar. El letrero POST RELACIONADOS sale en color blanco y como mi blog www.quepodemosver.com está en blanco no se distingue. ¿Cómo puedo ponerlo en rojo o negro?

    El artículo un 10 ha funcionado a la primera, incluso en torpes como yo.

    ResponderEliminar
    Respuestas
    1. Cjam1963 ¿Qué tal?, bueno entré a tu blog y veo bien lo de el color de entradas relacionadas no hay problema ya por el color ahora veo el color de la mini descipción de cada entrada relacionada en la partede abajo es blanca pero al pasar el mouse es negra, esto lo puedes arreglar en el CSS del código que di:

      #related-posts a{
      color:white; /*Color letra sin pasar el mouse*/
      transition: all 0.7s ease 0s;
      }

      En donde está el white pon el color escrito en inglés que desees que se note y guardalo.. Así ya te habrá funcionado....

      Saludos,

      Eliminar
    2. Mil gracias Andrés por tu ágil y rápida respuesta.
      La primera parte la conseguí yo cambiar a rojo y la segunda parte me ha servido tus instrucciones.
      ¡¡¡Bravo por el artículo!!! consulta resuelta

      Eliminar
    3. De nada es con gusto........ Saludos y gracias por escoger este artículo...

      Eliminar
  2. He probado varios tutoriales y éste funciona y a la primera.
    Parecía imposible!
    Muchas gracias por la ayuda Andrés!!!!

    ResponderEliminar
    Respuestas
    1. Hola Rachel Que bien me alegra que te sirviera.-

      Saludos,

      Eliminar
  3. Oye bro de todos los métodos que realice este fue el único que funciono, muchas gracias.

    ResponderEliminar
  4. No soy capaz de ponerlo porque no me aparece la línea de post-footer ¿Será que mi plantilla no lo permite?

    ResponderEliminar
    Respuestas
    1. Hola A Ponernos Guapas Comprendo que no halles tal línea prueba no copiandola y pegándola, sino escribiendo caracter por caracter en el buscador de código de blogger así sale muchas veces, quedo atento.

      Saludos ;)

      Eliminar
  5. Gracias me sirvio despues de tanto buscar ...

    ResponderEliminar
    Respuestas
    1. Hola Odalis Osiris Me alegra que te sirva saludos..


      :)

      Eliminar
  6. hola ami me salio pero uno solo quisiera saber si es problema de mi blog o que es, y si sabes el problema me podes decir la solucion, muchas gracias genio

    ResponderEliminar
    Respuestas
    1. Hola Franco Suarez cuando dices que sólo te aparece uno es uno que ya que el problema pueda radicar en algún código o método en tu blog deja el enlace.

      Saludos,

      Eliminar
  7. Llevo intentándolo desde hace meses y no hay manera. Ni siquiera con tu tutorial. No sé si se debe a que he insertado ya varios elementos en esa zona, pero aun probando a insertarlo antes o después de lo que ya tengo implementado, no hay forma. Gracias, igualmente. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca Como dices si hiciste otros métodos y no te dieron resultado debes eliminar y dejar tu plantilla como la tenías antes de aplicar el truco ya que si los dejas así sea un fragmento de CSS por ejemplo podrías tener problemas y líos con ello, también ten en cuenta la versión de JQUERY.

      Saludos,

      Eliminar
  8. Gracias, Andrés Felipe. El Css lo he revisado a fondo varias veces y créeme he borrado todo lo relativo a este widget y su script. A ver si con el truco que he descubierto hoy por casualidad, doy con la solución. En todo caso, mil gracias por responder. Tomo nota, no obstante, sobre lo del JQUERY, pues quizá ahí esté la clave. Un abrazo.

    ResponderEliminar
    Respuestas
    1. Hola Rebeca Claro entiendo, quedo atento a cualquier inquietud que tengas.

      Saludos,

      Eliminar
  9. Como se puede hacer para visualizar mas texto del titulo porque solo aparece una pequeña parte del titulo y me gustara que se mostrara mas???????????

    ResponderEliminar
    Respuestas
    1. Hola Chadlers Reynols el título de toda la caja del gadget se encuentra modificable en estas líneas descritas:

      #related-posts h2{
      font-size: 1.6em; /*Tamaño de la letra*/
      color: white; /*Color de la letra*/
      font-family: Arial, “Times New Roman”, Times, serif;
      margin-bottom: 0.75em;
      margin-top: 0em;
      padding-top: 0em;
      }

      Saludos,

      Eliminar
  10. Excelente!

    Solo una pequeña ... como hago para poner mas relacionados, me aparecen 4 y me gustaría disponer de mas.

    Saludos.

    ResponderEliminar
  11. Nada ya lo he encontrado...

    es aqui :

    var maxresults=5;


    Un saludo!

    ResponderEliminar
    Respuestas
    1. Sí así es amigo estás en lo correcto.... Saludos,

      Eliminar
  12. Hola amigo! He probado tu widget y me funciona en un 90%... ¿Sabrias decirme porqué no se ven algunas de las imágenes?

    Muchas gracias de antemano

    Lo he probado aqui: www.actiontalesfanfictions.blogspot.com

    ResponderEliminar
    Respuestas
    1. Hola Roberto he revisado tu caso es un poco raro pensé de pronto que es por el tamaño de la primera imagen que cargas en tu post es decir la primera de arriba hacia abajo prueba cambiándola por una más grande, y por otra parte trata de que esa imagen para cada post sea cargada directamente por la herramienta de blogger para subir imágenes y no colocando un link de terceros para simplemente hostearla y que esta se muestre en tu sitio.

      Saludos,

      Eliminar
  13. Si uso Picasa como hosting de las imagenes (aunque es cierto que, con tantas imagenes que manejo, las tengo allí clasificadas)...
    ESpero que no se a eso porque tendría entonces casi 500 entradas para revisar

    Muchas gracias por atenderme!!

    ResponderEliminar
    Respuestas
    1. Hola amigo, sí podría ser posiblemente eso pero eso no involucra que revises tus 500 entradas, son de esos casos raros de la vida web porque la verdad es la primera que veo ese error con un blog y este código para entradas relacionadas.

      Saludos,

      Eliminar
  14. Una pregunta amigo. Me podrías ayudar con un código para que en mi blog se puedan ver las entradas en miniatura asi como en "http://hackstore.net/"

    Me refiero por ejemplo allí donde dice anime. Y que aparecen todas las entradas en miniatura, Se podría hacer eso en blogger.
    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Claro se puede hacer pero a mi me queda muy poco tiempo para ayudarte ya que tengo una academia por la cual responder haha es todo diseño web pero no lo encontrarás exactamente así eso sería que buscaras mucho a la final son entradas relacionadas y aprendes un poco de CSS podrías modificarlo...

      Saludos,

      Eliminar
    2. Ok. Muchas gracias de igual manera.

      Ahorita en tiempo libre tratare de aprender.

      Saludos.

      Eliminar
    3. Vale amigo suerte con ello...

      Saludos,

      Eliminar
  15. Hola! El tutorial me ha servido un montón y eso que soy bastante torpe.
    El caso es que me gustaría que las imágenes de los post relacionados quedaran centradas y no en el margen izquierdo, ¿cómo puedo hacerlo?
    Gracias!!

    ResponderEliminar
    Respuestas
    1. Hola Rocío, entonces cambiando los píxeles... aquí

      podrás padding-left:5px;

      Me cuentas si te salió ya que te respondí este comentario a los afanes haha voy de salida...

      Eliminar
  16. hola como puedo cambiarle el tamaño a los post estan muy pequeños, es posible?

    ResponderEliminar
    Respuestas
    1. Hola Amigo, para hacer lo que quieres implica mover varas elementos para darle un tamaño mayor proporcional a toda la caja de post relacionados por ello no puedeo indicarte todo el paso a paso por aquí.

      Saludos,

      Eliminar
  17. Hola Andres estos post relacionados se relacionan según la etiqueta del artículo ??

    Yo necesito que si un artículo cualquiera de mi blog tiene la etiqueta CULTURA, los post relacionados que aparecen abajo sean de la misma etiqueta

    ResponderEliminar
    Respuestas
    1. Hola Amigo, así es trabajando en función de la misma etiqueta según el articulo tal cual como lo describes..

      SAludos,

      Eliminar
    2. Andres sabes si el código sirve para móviles? ???

      Eliminar
    3. De que se visualice por supuesto siempre y cuando en blogger no tengas la versión para móviles activada en Blogger ahora bien el sistema de entrefas relacionadas no es responsive lo cual sería desventaja y no se vería muuuy bien.

      Saludos,

      Eliminar
  18. Hola.

    Lo he intentado, pero nada... ¿Sigue funcionando?...

    Saludos

    ResponderEliminar
    Respuestas
    1. Hola ANZAGA el truco aún sigue 100% ON a lo mejor algún paso estás haciendo mal...

      Saludos ;)

      Eliminar
  19. Hola, el post me ayudó mucho me funcionó a la primera.
    Pero me pregunto si puedes hacer un pequeño tutorial de como modificar el tamaño de las miniaturas para que se vean más grandes ya que son muy pequeñas.
    Gracias. Un saludo

    ResponderEliminar
    Respuestas
    1. Hola Anónimo, Claro, fíjate en el SCRIPT casi al final del código que copias viene un fragmento así tal cual:

      width:72px;height:72px;border:0px;

      Entonces los números que ves 72 72 al ser una imagen cuadrada las miniaturas deben ser igual sólo modifica esos dígitos a tu gusto y ya está ;)

      Saludos,

      Eliminar

SÍGUENOS EN: