Posts relacionados em slide do Vagabundia

Como acho este slide de posts relacionados do Vagabundia o que há de melhor em matéria de posts relacionados, refiz este tutoraial para vocês, a aprtir das alterações soifridas pelo editor de imagens do Blogger, em abril de 2013.

Ariane refez um de seus templates, o Pinup e implementou este hack. Eu curiosa como o cão fui conferir a dica no blog Vagabundia. Fiquei perdidinha no post do J.Mujir, mas eis que gritei um help e a Ariane me indicou o caminho das pedras, para implementar o tal dos posts resumidos em forma de slide. (Ariane, obrigada ;-)



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

Agora clique em "Editar modelo" e em Ctrl e F.

 

Ao abrir a janela procure por:


<skin>...</b:skin>  

Abaixo dele, cole o próximo código:

<!-- Posts relacionados com Slide by JMiur -->
<script type='text/javascript'>
//<![CDATA[
// <!-- Posts relacionados com Slide by JMiur -->
// <!-- http://vagabundia.blogspot.com/ -->
var reltitulosslider = new Array();
var relurlsslider = new Array();
var relresumenslider = new Array();
var relimagenslider = new Array();
var reltituloscantidadslider = 0;
var relmaxamostrarslider = 20; // establecer cantidad de entradas
var relmaxlenslider = 75; // longitud del texto del resumen
var relimagenpodefectoslider = "URL_IMAGENxDEFECTO";
var SRwidth = 144; // ancho de cada DIV
var SRmin = 0;
var SRmax = -2160; // longitud máxima = (SRwidth * relmaxamostrarslider) - (SRwidth * VISIBLES) - SRwidth (en este caso son 4 visibles)
function leerpostetiquetasslider(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    if (i==json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    reltitulosslider[reltituloscantidadslider] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relresumenslider[reltituloscantidadslider] = eliminattagsslider(postcontent,relmaxlenslider);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relimagenpodefectoslider;
    }
    relimagenslider[reltituloscantidadslider] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relurlsslider[reltituloscantidadslider] = entry.link[k].href;
        break;
      }
    }
    reltituloscantidadslider++;
  }
}
function mostrarrelacionadosslider() {
  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 < relurlsslider.length; i++) {
    if(!containsslider(tmp, relurlsslider[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relurlsslider[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulosslider[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relresumenslider[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relimagenslider[i];
    }
  }
  reltitulosslider = tmp2; relurlsslider = tmp; relresumenslider = tmp3; relimagenslider = tmp4;
  for(var i = 0; i < reltitulosslider.length; i++){
    var indice = Math.floor((reltitulosslider.length - 1) * Math.random());
    var tempTitle = reltitulosslider[i]; var tempUrls = relurlsslider[i];
    var tempResumen = relresumenslider[i]; var tempImagen = relimagenslider[i];
    reltitulosslider[i] = reltitulosslider[indice]; relurlsslider[i] = relurlsslider[indice];
    relresumenslider[i] = relresumenslider[indice]; relimagenslider[i] = relimagenslider[indice];
    reltitulosslider[indice] = tempTitle; relurlsslider[indice] = tempUrls;
    relresumenslider[indice] = tempResumen; relimagenslider[indice] = tempImagen;
  }
  var cuantosPosts = 0;
  var r = Math.floor((reltitulosslider.length - 1) * Math.random());
  var rini = r;
  var salida;
  var dirURL = document.URL;
  while (cuantosPosts < relmaxamostrarslider) {
    if (relurlsslider[r] != dirURL) {
      salida = "<div class='relspostsslider'>";
      salida += "<a href='" + relurlsslider[r] + "' rel='nofollow'  target='_blank' title='" + reltitulosslider[r] + "'><img src='" + relimagenslider[r] + "' /></a>";
      salida += "<h6><a href='" + relurlsslider[r] + "' target='_blank'>" + reltitulosslider[r] + "</a></h6>";
      salida += "<p>" + relresumenslider[r] + " ... </p>";
      salida += "</div>";
      document.write(salida);
      cuantosPosts++;
      if (cuantosPosts == relmaxamostrarslider) { break; }
    }
    if (r < reltitulosslider.length - 1) {
      r++;
    } else {
      r = 0;
    }
    if(r==rini) { break; }
  }
}
function eliminattagsslider(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 containsslider(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}

function desplazarrels(direccion) {
  var div = document.getElementById("postsrelacionadoscontenedor");
  var pos = parseInt(div.style.left);
  pos = pos + (SRwidth * direccion);
  if(pos > SRmin) { return }
  if(pos < SRmax) { return }
  div.style.left = pos + "px";
}

//]]>
</script>

<style>
/* al rectángulo contenedor lo centramos, le damos altura y eliminamos los saltos de línea indeseados */
  #postsrelacionadosslider {
    margin:15px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    height: 190px;
    position: relative;
    width:100%; border: 0px;
  }
#postsrelacionadosslider h2{font-size: 14px;text-indent: 20px; }
 #postsrelacionadosslider br { display:none; }
 /* las imágenes que sirven para navegar las posiconamos una a cada extremo */
  #relleft { left: -5px; }
  #relright { right: 0; }
  .sflecha { height: 150px; position: absolute; width: 15px; }
  .sflecha img { height: 150px; width: 15px; border: 0px solid}

  /* al rectángulo central lo dimensionamos, lo posicionamos e impedimos que se deborde */
  #postsrelacionadosinner {margin:0px;padding:0px;
    height: 152px;
    left: 15px;
    overflow: hidden;
    position: absolute;
    width: 96%; /* es el ancho real de cada post resumido por la cantidad visible, en este caso 4 */
  }
  /* esta será la &quot;tira&quot; a desplazar */
  #postsrelacionadoscontenedor {
    height: 180px;
    position: absolute;
    width: 2800px; /* es el ancho real de cada post resumido por la cantidad a mostrar, en este caso 20 */
    /* el efecto */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
  }

  /* cada post resumido */
  .relspostsslider {
     background: -webkit-linear-gradient(#808080, #eee);
   background: -moz-linear-gradient(#808080, #eee);
   background: -o-linear-gradient(#808080, #eee);
    float: left;
    height: 150px;
    margin: 0 1px;
    overflow: hidden;
    padding: 0 4px;
    text-align: center;
    width: 129px;border:1px solid #ccc;
  }

  /* los contenidos de esos posts resumidos */
  .relspostsslider a {
    color: #000;
    display: inline;
    font-size: 11px;
    line-height: 1;
  }
  .relspostsslider img {
    height: 82px;
margin: 1px auto;
    padding:5px 5px 5px;background: #fff;
    width: 95px;border:1px solid #000;
  }
  .relspostsslider h6 {
    display: table-cell;
    height: 5em;
    margin: 0;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
    width: 130px;
  }
  .relspostsslider p {display:none;}
</style>
<!-- FIM posts relacionados com Slide by JMiur -->

Salve.


Salve.

Clique então em "Ir para um widget" e depois em Blog1

Clique agora na setinha para abrir...

Procure por:  <b:includable id='post' var='post'>...</b:includable>

Ao encontra-lo, clique na setinha para expandir mais uma vez o código.

 Procure então por:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <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>

Abaixo da parte do código em azul, cole este código abaixo:

<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=leerpostetiquetasslider&amp;max-results=50&quot;' type='text/javascript'/>
</b:if>

Agora procure por:

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

E abaixo dele, cole este próximo código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='postsrelacionadosslider'>
<h2>Posts Relacionados</h2>

  <a class='sflecha' href='javascript:void(0);' id='relleft' onclick='desplazarrels(1);'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXPPq_A57PHQhtbTE0NfMg2k-VhcSkorc1Jvnl3zM6atyNHPo1nlikJiCSyzqZHUrj3ltpN86JcMhvxPJlWxqcEMogLD0t5dbke_f0i32LowyCtDUgrMKy-cPYXAHvfq6MzpA8h48qSn6U/s1600/LWicoleft.png'/>
  </a>
  <div id='postsrelacionadosinner'>
    <div id='postsrelacionadoscontenedor' style='left:0'>
      <script type='text/javascript'>mostrarrelacionadosslider();</script>
    </div>
  </div>
  <a class='sflecha' href='javascript:void(0);' id='relright' onclick='desplazarrels(-1);'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rXr0iFF4u09FgW7FnPVtX9bxmiMbhhRlWsQyZ1kzDBgmu3opDiGhqzZILyPhLgKxkX6jUVBNAFuehfRdTno-W-J7F1LnbmnuPuC0Hsd3T-Xklb7jmgu9_4uuKgxVazdAMpp59Q3bIfzx/s1600/LWicoright.png'/>
  </a>
</div>
</b:if>