Postagens Recentes
Mostrando postagens com marcador Posts relacionados. Mostrar todas as postagens
Mostrando postagens com marcador Posts relacionados. Mostrar todas as postagens

24 de jul. de 2016

Postagens relacionados

Nenhum comentário:


A ideia é, fazer o visitante explorar seu blog, conhecendo a maior quantidade de páginas, lendo o conteúdo de seu blog, aprofundando no assunto e permanecendo alí, indefinitivamente. Então o segredo é instalar ferramentas para isso. Essa é uma boa ferramenta para aguçar a curiosidade. 


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.







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


Abaixo dele, cole o próximo código colocando o endereço do seu blog no local indicado:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var _0x5db5=["C 2j(a){(C(e){2 f={15:\x22\x22,V:5,1l:5,17:5,E:\x22\x22,6:14,13:\x22\x22,12:\x221O\x22,N:\x22\x22,19:\x222x 1i\x22,1d:\x221H://1.2y.1J.20/-2a/2r/2u/2v/2w/2B.2C\x22,1k:1I,1m:[\x221K\x22,\x221L\x22,\x221N\x22,\x221P\x22,\x221Q\x22,\x221R\x22,\x221S\x22,\x221T\x22,\x221U\x22,\x221W\x22,\x221X\x22,\x221Y\x22],1a:\x2225 1i\x22,16:\x22\x22,1o:2s};f=e.2t({},f,a);2 k=0,b=14,g=14;3(!f.E){1n.1G(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27);f.E=\x22#F-R\x22}2 c=C(x,n){k++;3(x.U.W){J(2 o=0;o\x3Cx.U.W.z;o++){2 u=x.U.W[o];2 q=\x22\x22;J(2 m=0;m\x3Cu.18.z;m++){3(u.18[m].1e==\x2224\x22){q=u.18[m].L;28}}2 p=u.2i.$t.O(0,10);2 l=p.O(0,4);2 w=p.O(5,7);2 s=p.O(8,10);2 r=f.1m[1f(w,10)-1];2 y=u.2z$2A.$t;2 t=u.X.$t;3(\x221j$1c\x22Y u){2 v=u.1j$1c.11.T(/\x5C/s[0-9]+\x5C-c/g,\x22/s\x22+f.1k+\x22-c\x22)}K{2 v=f.1d}3(1M.L.1r()!=q.1r()){i(q,t,v,l,s,y,r)}}}3(k\x3E=f.6.z){g.G(\x22B\x22,\x22\x22);e(\x22#F-P-1g\x22,b).1h();3(f.V\x3E0){e(\x22Q:1V(\x22+(f.V-1)+\x22)\x22,g).1h()}}};2 i=C(p,v,w,l,t,x,r){2 q=e(\x22Q\x22,g);J(2 o=0;o\x3Cq.z;o++){2 u=e(\x22a\x22,q.H(o));2 s=j(u);3(u.G(\x22L\x22)==p){h(u,++s);J(2 n=o-1;n\x3E=0;n--){2 m=e(\x22a\x22,q.H(n));3(j(m)\x3Es){3(o-n\x3E1){q.H(n).1Z(q.H(o))}M}}3(o\x3E0){q.H(0).21(q.H(o))}M}}g.22(\x27\x3CQ\x3E\x3Ca B=\x2223\x22 L=\x22\x27+p+\x27\x22 X=\x22\x27+(f.N?f.N.T(\x22\x5Cd\x22,1):\x22\x22)+\x27\x22\x3E\x3CD B=\x2226\x22\x3E\x3C27 1b=\x22\x27+v+\x27\x22 29=\x22\x27+w+\x27\x22/\x3E\x3C/D\x3E\x3C1p\x3E\x27+v+\x27\x3C/1p\x3E\x3C/a\x3E\x3CA B=\x222b\x22\x3E\x3CD B=\x222c\x22\x3E\x27+t+\x22 \x22+r+\x22 \x22+l+\x27\x3C/D\x3E\x3CD B=\x222d\x22\x3E\x3Ca L=\x22\x27+p+\x27#2e-2f\x22 2g=\x222h\x22\x3E\x27+x+\x22\x3C/a\x3E\x3C/D\x3E\x3C/A\x3E\x3C/Q\x3E\x22)};2 j=C(l){2 m=1f(l.G(\x221q\x22));M m\x3E0?m:1};2 h=C(l,m){l.G(\x221q\x22,m);3(f.N){l.G(\x22X\x22,f.N.T(\x22\x5Cd\x22,m))}3(f.16){l.G(\x22B\x22,f.16+m)}};2 d=C(){3(f.E!=\x22#F-R\x22){2 l=e(f.E);3(l.z!=1){M}b=e(\x27\x3CA Z=\x22F-R\x22\x3E\x3C/A\x3E\x27).I(l)}K{b=e(f.E)}3(!f.6){f.6=[];e(\x27a[1e=\x222k\x22]:2l(\x27+f.1l+\x22)\x22).2m(C(){2 n=e.2n(e(2o).2p().T(/\x5Cn/g,\x22\x22));3(e.2q(n,f.6)==-1){f.6[f.6.z]=n}})}3(f.6.z==0\x26\x26!f.1a){M}3(f.6.z==0){e(\x22\x3CS\x3E\x22+f.1a+\x22\x3C/S\x3E\x22).I(b)}K{3(f.19){e(\x22\x3CS\x3E\x22+f.19+\x22\x3C/S\x3E\x22).I(b)}}3(f.13){e(\x27\x3CA Z=\x22F-P-1g\x22\x3E\x27+f.13+\x22\x3C/A\x3E\x22).I(b)}g=e(\x22\x3C1s \x22+(f.12?\x27B=\x22\x27+f.12+\x27\x22\x27:\x22\x22)+\x22\x3E\x3C/1s\x3E\x22).I(b);3(f.6.z==0){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}K{J(2 m=0;m\x3Cf.6.z;m++){e.1t({11:f.15+\x22/1u/P/1v/\x22,1w:{2D:f.6[m],\x221x-1y\x22:f.17,1b:\x221z-Y-1A\x22},1B:c,1C:\x221D\x22,1E:1F})}}};3(f.1o){e(2E).2F(d)}K{e(1n).2G(d)}})(2H)};","|","split","||var|if|||tags|||||||||||||||||||||||||||||length|div|class|function|span|containerSelector|related|attr|eq|appendTo|for|else|href|return|relevantTip|substring|posts|li|postsx|h4|replace|feed|maxPosts|entry|title|in|id||url|loadingClass|loadingText|null|blogURL|postScoreClass|maxPostsPerTag|link|relatedTitle|recentTitle|alt|thumbnail|rlpBlank|rel|parseInt|loadingtext|remove|Relacionados|media|rlt_thumb|maxTags|rlt_monthNames|document|onLoad|strong|score|toLowerCase|ul|ajax|feeds|summary|data|max|results|json|script|success|dataType|jsonp|cache|true|write|http|70|blogspot|Jan|Fev|location|Mar|loadingnya|Abr|Mai|Jun|Jul|Ago|Set|gt|Out|Nov|Dez|after|com|before|append|jdlunya|alternate|Recent|gmbrrltd|img|break|src|htG7vy9vIAA|infonya|dt|jkmt|comment|form|target|_blank|published|relatedPostsWidget|tag|lt|each|trim|this|text|inArray|Tp0KrMUdoWI|false|extend|AAAAAAAABAU|e7XkFtErqsU|s1600|Posts|bp|thr|total|grey|gif|category|window|load|ready|jQuery","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (_0xd509x1,_0xd509x2,_0xd509x3,_0xd509x4,_0xd509x5,_0xd509x6){_0xd509x5=function (_0xd509x3){return (_0xd509x3<_0xd509x2?_0x5db5[4]:_0xd509x5(parseInt(_0xd509x3/_0xd509x2)))+((_0xd509x3=_0xd509x3%_0xd509x2)>35?String[_0x5db5[5]](_0xd509x3+29):_0xd509x3.toString(36));} ;if(!_0x5db5[4][_0x5db5[6]](/^/,String)){while(_0xd509x3--){_0xd509x6[_0xd509x5(_0xd509x3)]=_0xd509x4[_0xd509x3]||_0xd509x5(_0xd509x3);} ;_0xd509x4=[function (_0xd509x5){return _0xd509x6[_0xd509x5];} ];_0xd509x5=function (){return _0x5db5[7];} ;_0xd509x3=1;} ;while(_0xd509x3--){if(_0xd509x4[_0xd509x3]){_0xd509x1=_0xd509x1[_0x5db5[6]]( new RegExp(_0x5db5[8]+_0xd509x5(_0xd509x3)+_0x5db5[8],_0x5db5[9]),_0xd509x4[_0xd509x3]);} ;} ;return _0xd509x1;} (_0x5db5[0],62,168,_0x5db5[3][_0x5db5[2]](_0x5db5[1]),0,{}));
//]]>
</script>
<div id='artikelterkaitmkr'>
<script type='text/javascript'>
//<![CDATA[
$(window).load(function(){
relatedPostsWidget({
related_title: "Artikel Terkait",
recentTitle: "Posts Relacionados",
containerSelector: "#artikelterkaitmkr",
blogURL: "AQUI O ENDEREÇO DE SEU BLOG",
maxPosts: 4,
maxPostsPerTag:4,
rlt_thumb: 120
});
});
//]]>
</script>
</div>
</b:if>
<br/>

Salve !


Procure por ]]></b:skin>  e cole o código abaixo depois dele.


<style>
#related-postsx h4{font-family: Segoe Print;font-size:160%;text-shadow:0 1px 2px #fff; margin-bottom:10px; text-align: center; background: #ccc; padding: 3px;}
#related-postsx ul,#related-postsx li{padding:0;list-style:none;margin:0;overflow:hidden;position:relative}
#related-postsx li{width:49.5%;float:left;height:135px;margin:0 0.25% 2px}
#related-postsx .overlayb{width:100%;height:250px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8Sfk9IYor5IrlJJaRjK0b8chihOeuFeYfoRu8JdAWYvISV60t0FFIDxoGdKLRlQ47tZn4mzy_L_4nKQqSruXDsKbtBriwgjURIeJ8pqxdTQhHTX50UC5ECoTs1vcTVsBDnIzH7KrkTo/s1600/linebg-fade.png);z-index:1;position:absolute;background-position:0 0;background-repeat:repeat-x;bottom:-50%}
#related-postsx li:hover .overlayb{-ms-filter:&quot;progid:DXImageTransform.Microsoft. Alpha(Opacity=10)&quot;;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
#related-postsx img{width:100%;position:absolute;bottom:-40%;height:250px}
#related-postsx strong{position:absolute;bottom:30px;color:white;font-family:&quot;Bitter&quot;,arial,sans-serif;padding:0 10px;z-index:4;width:100%;font-size:150%;font-weight:normal;text-shadow:0 1px 2px black}
#related-postsx .infonya{position:absolute;bottom:10px;padding:0 10px;width:100%;z-index:3;color:white}
#related-postsx .dt{margin-right:5px;padding-right:5px;border-right:1px solid #E9E9E9}
#related-postsx .jkmt{position:absolute;right:10px;padding:2px 4px;top:-5px;background-color:#8A8A8A;z-index:3}
#related-postsx .jkmt::after{content:&quot;&quot;;width:0;height:0;border-width:2px 4px;border-style:solid;border-color:#8A8A8A #8A8A8A transparent transparent;position:absolute;top:100%;right:0}
@media only screen and (max-width:479px){
  #related-postsx li{width:100%;margin:0 0 2px}
}


Procure por </body> e acima dele cole o próximo código




<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
SocialBookmarks();
relatedPostsWidget({
related_title: "Posts relacionados",
containerSelector: "#relatedpostsx",
maxPosts: 4,
loadingClass: "loadingxx",
rlt_thumb: 300
});

});
//]]>
</script>
</b:if>






Salve!

Agora acima de </head> cole este código abaixo.


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

17 de out. de 2013

Posts relacionados com efeito hover

Nenhum comentário:




Mais um modelo de posts relacionados para deixar seu blog mais, digamos, navegável. Para instala-lo, siga as dicas abaixo


Vá até o "Modelo de seu blog", clique em "Editar HTML"
  Hack para o template do Blogger, implementado em  abril de 2013.





 Agora vamos procurar por



 Agora que encontrou, clique na seta ao lado do código.

 Pronto. Veja, o código de seu template está todo dividido em partes. Mas para encontrar o código que queremos você precisará abrir a seguinte parte:


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





<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-post .post-thumbnail {
 z-index: 1;
position: relative;
width: 98px;
height: 98px;
display: block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #bbb;
}
#related-posts h3 {
background: #fff;
padding: 5px 10px 5px 10px;
border-radius: 5px;
border: 1px solid #ddd;
font-family: &#39;Segoe UI Light&#39;, &#39;Open Sans&#39;, Verdana, Arial, Helvetica, sans-serif;
font-weight: 200;
font-size: 17pt;
letter-spacing: 0.01em;
color: #000;
margin-bottom: 7px;
width: 565px;}
.related-post:hover {filter: saturate(1.0);
-webkit-filter: saturate(1.0);
-moz-filter: saturate(1.0);
-o-filter: saturate(1.0);
-ms-filter: saturate(1.0);}
.related-post {
float: left;
position: relative;
width: 105px;
height: 105px;
margin: 0 15px 15px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
filter: saturate(0.0);
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-o-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
 }
.related-post .related-post-title {
display: none;
float: left;
background: #cc0000;
color: #fff;
text-shadow: none;
font-weight: normal;
padding: 5px;
position: absolute;
top: -39px;
left: -45px;
z-index: 99999999;
width: 185px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
font-size: 13px;
border-radius: 5px;
text-align: center;
overflow:hidden;
}
.related-post:hover .related-post-title {display: block;}


</style>
<div id='related-posts'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Leia também</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAA2zstTyXP5luHz17tCE3qN9t1MCXUhiT8LH4M6fU159r0n1-pecAHepGNd_w6OdbE-Y0JOpLKFGp9V_0Sc-78DWsodBX3yGqxX8vab6QPKHP0esbvve27X1Ht0wJc-Mc9iqajxaQaTMZ/s0/logo.jpg'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>

</b:if>





11 de abr. de 2013

Posts relacionados em slide do Vagabundia

22 comentários:


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>



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