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='http://3.bp.blogspot.com/-aAvBms3-6BI/Ti76tIcausI/AAAAAAAAYlc/j-jKFsVUBD4/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='http://3.bp.blogspot.com/-UPPNvJkQDyU/Ti76tCgCYpI/AAAAAAAAYlk/ySl6QklxOcI/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
Từ khoá:
Blogger 2/05/2012

5 Bình Luận

  1. Anh Vờ Lờ bắt đầu tung chiêu rồi đây ;))

    Trả lờiXóa
  2. @Đing Kiu Truê : Chiêu gì đâu , thấy hay hay thì re-post thôi :D

    Trả lờiXóa
  3. Bạn nên thêm target blank zô Demo. Nhảy tới nhảy lui chóng mặt lắm lun áh

    Trả lờiXóa
  4. @Võ Quốc An : Cái đó tùy theo mỗi người thôi , lúc đầu có target blank nhưng với em thấy hơi bất tiện nên lược bớt rồi ^^

    Trả lờiXóa

Hãy để lại comment, góp ý để blog hoàn thiện hơn

Vui lòng gõ có dấu khi sử dụng tiếng việt

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước

Sử dụng ngôn ngữ có văn hóa khi bình luận

Thiết kế web với Blogger - Blogspot

Thiết kế Responsive, SEO Friendly Blogger Templates, Bố cục gọn gàng, dễ dàng chỉnh sửa.

Thủ thuật Blogspot - Blogger

Free template blogger, Chia sẻ thủ thuật Blogger - Seo Templates, Tutorial CSS3 - HTML5 Blogger

Dịch vụ Blogspot

Tối ưu hóa SEO, tùy biến Template blogspot thân thiện với các công cụ tìm kiếm phổ biến