Posts relacionados do J.Mugir

 

DEMO

Essa dica me foi indicada pela Ariane do Templates para o Novo Blogger, e foi desenvolvida pelo J.Mugir do blog Vagabundia. É o hack de posts relcionados mas com um pequeno resumo do post.


Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por:  

]]></b:skin>  
 

Substitua então pelo código abaixo: (Código na cor azul=cor de fundo do widget.)

]]></b:skin>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.relsposts {
background: #fff;
border: 1px solid #eee;
  float: left;
  margin: 16px 5px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
  /* el tamaño dependerá de como diseñemos el contenido */
  width: 130px;
  height: 190px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0px 9px 9px -9px #888;
-webkit-box-shadow:0px 9px 9px -9px #888;
}
.relsposts:hover { /* si queremos algún efecto */ }
.relsposts a {
  /* las propiedades de los textos, color, fuente, etc */
  color: #808080;
  display: inline;
  font-size: 11px;
  line-height: 1;
}
.relsposts img {
  /* las propiedades de las miniaturas */
  height: 82px;
  padding: 18px 5px 5px 5px;
  width: 102px;
}
.relsposts h6 {
  /* las propiedades del título */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}
.relsposts p {
  /* las propiedades de los resúmenes */
  color: #AAA;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0;
  text-align: left;
}
</style>
</b:if>
<script type='text/javascript'>
//<![CDATA[
 var reltitulos = new Array();
var relurls = new Array();
var relresumen = new Array();
var relimagen = new Array();
var reltituloscantidad = 0;

var relmaxamostrar = 4; // cantidad de entradas a ser mostradas
var relmaxlen = 100; // la cantidad de caracteres de los resumenes
var relimagenpodefecto = "URL_imagen"; // la imagen por defecto

function leerpostetiquetas(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    reltitulos[reltituloscantidad] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relresumen[reltituloscantidad] = eliminattags(postcontent,75);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relimagenpodefecto;
    }
    relimagen[reltituloscantidad] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relurls[reltituloscantidad] = entry.link[k].href;
        break;
      }
    }
    reltituloscantidad++;
  }
}
function mostrarrelacionados() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relurls.length; i++) {
    if(!contains(tmp, relurls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulos[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumen[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagen[i];
    }
  }
  reltitulos = tmp2; relurls = tmp; relresumen = tmp3; relimagen = tmp4;
  for(var i = 0; i < reltitulos.length; i++){
    var indice = Math.floor((reltitulos.length - 1) * Math.random());
    var tempTitle = reltitulos[i]; var tempUrls = relurls[i];
    var tempResumen = relresumen[i]; var tempImagen = relimagen[i];
    reltitulos[i] = reltitulos[indice]; relurls[i] = relurls[indice];
    relresumen[i] = relresumen[indice]; relimagen[i] = relimagen[indice];
    reltitulos[indice] = tempTitle; relurls[indice] = tempUrls;
    relresumen[indice] = tempResumen; relimagen[indice] = tempImagen;
  }
  var cuantosPosts = 0;
  var r = Math.floor((reltitulos.length - 1) * Math.random()); // elegimos un post al azar
  var rini = r; // este es el primer post relacionado a mostrar
  var salida;
  var dirURL = document.URL;
  // hacemos un bucle hasta que encontramos la cantidad definida en relmaxamostrar
  while (cuantosPosts < relmaxamostrar) {
    if (relurls[r] != dirURL) {
      // si el post no es el que estamos viendo, lo mostramos
      salida = "<div class='relsposts'>";
      salida += "<a href='" + relurls[r] + "' rel='nofollow'  target='_blank' title='" + reltitulos[r] + "'><img src='" + relimagen[r] + "' /></a>";
      salida += "<h6><a href='" + relurls[r] + "' target='_blank'>" + reltitulos[r] + "</a></h6>";
      salida += "<p>" + relresumen[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      // y vamos contando hasta llegar al total
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrar) { break; }
    }
    if (r < reltitulos.length - 1) {
      // habiamos empezado desde cualquier parte de la lista y este es el siguiente post
      r++;
    } else {
      // si es el último, empezamos desde el primero de la lista
      r = 0;
    }
    // si ya dimos toda la vuelta en al lista y no encontramos la cantidad, significa que no hay suficientes entradas y terminamos
    if(r==rini) { break; }
  }
}
function eliminattags(cual,longitud){
  var resumen = cual.split("<");
  for(var i=0;i<resumen.length;i++){
    if(resumen[i].indexOf(">")!=-1){
      resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
    }
  }
  resumen = resumen.join("");
  resumen = resumen.substring(0,longitud-1);
  return resumen;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}

//]]>
</script>

Salve. Clique em "Expandir modelo de widget.

Procure então por:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> </div>

Troque então pelo código abaixo:

<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 == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=leerpostetiquetas&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
          </b:loop>
        </b:if>
      </span> </div>

Agora procure por:

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

 Troque então por:

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='postsrelacionados'>
      <script type='text/javascript'>mostrarrelacionados();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>