11 de abr. de 2013

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>


22 comentários:

  1. ia mesmo te perguntar se vc havia conseguido usar o slide. foi mais rápida que eu, apanhei uns dias até pescar que começava num capítulo e terminava noutro :D
    eu achei o hack muito show, aliás, acho o JMiur um show, pq o cara tem umas idéias ótimas ( e não tem nada dessa impáfia que a gente encontra tanto em muito blogueiro daqui, que não entende p* nenhuma de códigos mas adora fazer listinhas de 'pode' 'não pode'). enfim, desabafo básico, nem liga :D
    aliás, a título de curiosidade, eu conheci o vagabundia através do seu blog, que eu assino o feed à mil anos (somos a velha guarda, né, bem?). toda vez que me perguntam qualquer coisa que não está no meu blog, mando te procurar, pq eu sei que aqui tem TUDO (e mais um pouco, né?).
    te adoro muié, precisando de qualquer coisa, sabe que é só me chamar.
    bjocas

    ResponderExcluir
  2. Ariane, graças a vc, nean ?! Hehe. Eu fico biscate da vida quandfo tento algo e não consigo, sabe, começo a suar e a chorar, a rolar no chão, um horror. Isso começou aos dois anos e até hj, nada. Brincadeiras a parte, pois é menina, somos as velhas de guerra, mais a Mamanunes, a Áurea...E é isso. Vou te falatr uma coisa, o Vagabundia tem excelentes idéias mas sempre apanho com as explicações dele, por isso e outras sempre que posso vou lá e trago a dica pra cá. Acho que é isso que sempre temos que fazer. Explicar da melhor forma e menos complicada possível, que é como fazemos. #PRONTOFALEI ! Beijos. (Fique a vontade para levar as dicas de cá para seus leitores postando em seu blog.) Beijos

    ResponderExcluir
  3. o meu não funcionou direito vc sabi oque ouve Elke http://www.vipersdarede.com/2011/08/voce-e-hetero-sim-ou-nao.html olha ai como fica

    ResponderExcluir
  4. Não há no meu HTML (Mesmo expandindo os modelos de widget) a parte >> ,
    Ajuda ???

    ResponderExcluir
  5. Guilherme, essas tutoriais são para aplicar no modelo Simple, dos novos modelos do Blogger, mas duvido muito que não tenham em seu blog. Beijos.

    ResponderExcluir
  6. Não tem, procurei ja varias vezes... Não tem akela parte vermelha do "label", então não sei o que fazer "/

    ResponderExcluir
  7. Guilherme, refiz a parte. Veja se em seu blog possui a primeira parte do código em vermelho, se tiver, tente substituindo por todo o código. Veja se agora da certo e me reescreva. Um abraço.

    ResponderExcluir
  8. Ai, ai... Quase desistindo (Como se eu pudesse..) Eu consegui agora, substitui aquela parte... Salvei o modelo, deu tudo certo, mas o mais importante que é aparecer não aparece "/

    ResponderExcluir
  9. Guilherme, seu blog tem os marcadores ? A cada postagem vc coloca os marcadores relacionados com o assunto ? Se não tiver realmente não dá certo.

    ResponderExcluir
  10. E outra, é necessário ter vários posts com o mesmo marcador. Entendeu ? Beijos

    ResponderExcluir
  11. É... Apareceu, mas apareceu cortado na metade (Ja aumentei a distância entre o post e o rodapé no triplo e mesmo assim) e não tem nenhuma imagem, fica undefined T.T
    Too achando que não é pra ser >.<'

    ResponderExcluir
  12. Elke, tentei instalar em 3 templates diferentes, no The Mez, em um dos modelos simples do blogger e no Mínima. Só funionou no Mínima, nos outros templates as imagens dos posts não apareceram e ficou com o nome undefined.

    ResponderExcluir
  13. Oi Elke
    muito bom essa força que vc tem me dado
    eu instalei e acabou dando um probleminha embaixo do primeiro slide, assim como no seu. Eu resolvi aqui:
    #postsrelacionadosinner {margin:0px;padding:0px;
    height: 152px;

    estou fazendo um novo layout par meu blog
    http://ghteste.blogspot.com/

    Abraços
    Guilherme

    ResponderExcluir
  14. Preciso de ajuda, pessoal!!! Sempre q tento usar uma imagem minha pra colocar no meu blog(como fundo,template), aparece uma mensagem de q a imagem é muito grande. Afinal, alguém pode me dizer q medida tem q ter uma imagem pra ser usada no blogspot?
    Obrigada.

    ResponderExcluir
  15. Gostei!
    Apliquei em meu blog:
    www.nosso-ceara.blogspot.com.br

    Ocorre uma pequena observação de minha parte.
    A organização dos slides estão fora da ordem de postagem.

    Por exemplo:
    Meu blog só divulga festa por data.
    Então procuro colocar as festas no dia que ocorre.
    Mais as postagens com Slide da Vagabundia não deixou na ordem.

    Qual código para chamar a ordem dele sendo crescente e não aleatório?
    Alguém poderia responder, caso queria deixar um comentário no meu blog acima, fico agradecido, mais se não me engano, é alguma troca de código, não sei qual, mais acho que deve ser substituído por um, mais não sei qual.

    ResponderExcluir
  16. Como faço para inserir o código que organiza os posts em ordem de postagem e não como ficam mostrando em ordem aleatória?

    ResponderExcluir
  17. Obrigado pela Dica! Muito bom o seu blog!

    UMA DICA

    Não estava conseguindo instalar pelo campo de:

    b:skin

    Então instalei os estilo acima de / head

    Funciona do mesmo modo! Grato e obrigado!

    ResponderExcluir
  18. Oi Elke, tô utilizando o teu template Costumizável 2012 Revista, onde o mesmo já estava inserido dentro do template. Ocorre que as imagens não aparecem, umas sim outras não. Alguma dica? Se tiver um tempinho que eu sei que é curto, dá uma olhadinha: http://portalleaodonorte.blogspot.com.br/, adoro teus tutos..xeiruuuuuuuuu

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube