Bài viết liên quan dạng Slide

Blogger đã có khá nhiều tiện ích "Bài viết liên quan" (Related Posts) đa dạng của nhiều tác giả . Một lần tình cờ ngồi vọc templates thấy dạng này cũng hay nên tham khảo và post lại : "Related Posts With Slide" được viết bởi JMiur .

DEMO 

Các bước thực hiện :

Blogger -> Edit HTML -> Expand Widget Templates (Download template đề phòng bất trắc)

Bước 1 : Chèn đoạn mã bên dưới trước </head>

<!-- Related Posts With Slide by JMiur -->
<script type='text/javascript'>
//<![CDATA[
// <!-- Related Posts With 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:570x;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: 180px;
left: 15px;
overflow: hidden;
position: absolute;
width: 510px; /* 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 Related Posts With Slide by JMiur -->

Bước 2 : Tìm đến đoạn mã :

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

Và thêm vào sau nó đoạn mã dưới đây :

<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>

Bước 3 : Tìm đến đoạn mã :

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

Và chèn đoạn mã bên dưới vào giữa nó :

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

<a class='sflecha' href='javascript:void(0);' id='relleft' onclick='desplazarrels(1);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgElmVw3RPdxrHg8juS-m84MToCu1H6y6_rTWotx8_rT0OySJ-IQrm6-PIBISKmmZVBzL3JZIVeV3ehjcV8RdcdwhtloJyEOiyXxzXKRsMrWSVehxnIXzn3dXGfFJyMxRlBY8DrAkOzYm0t/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/AVvXsEi19lkF_PaoRyydUuryulZNNJ93JM623CXcqYgaUc18yih7jN8XMH816Rc-1ZIxEdEj5tkHUUHOJvpwUbdcHVeFxo1kAwW4pclP0N8J6gfPfxtorYgbyf-v3TkcbbNc93LbyrxctYDjPfJj/s1600/LWicoright.png'/>
</a>
</div>
</b:if>

Bước 4 : Save template .

Chú ý :

Bước 2 : Trong template blog phải có thẻ post-labels , chính xác hơn thẻ này nằm trong Post-footer