Jumat, 20 Mei 2011

Related Post for Blogger All in One

Kilas balik lagi ah, gak ada bahan postingan lagi nih. Postingan kali ini akan membicarakan mengenai Related Articles. Kalau dilihat-lihat para blogger dari Indo sudah pada memasangnya. Karya dari more tech tips web mengenalkan Smarter Related Posts Google Blogger Widget. Tidak mau kalah gaya juga blogger plugins mengeluarkan Related Posts Widget for Blogger with Thumbnails. Master gema out the product Etiquetas relacionadas en miniaturas de Blogger Widgets.
Kali ini Beben Koben si bloglang anu ganteng kalem tea mau berbagi lagi mengenai related post karya bos Vagabundia.

Untuk yang instant sobat dapat mencoba Asterpix SearchLight Program Application dan linkwithinThe Ways! :D Kalau kurang juga this is come from master lasantha Nice Related Post Widget For Bloggers!
Kapan ngebahasnya ini kalau ngumpulin macam² artikel terkait dari para master :)) This hack got title "Entradas relacionadas con slider" or in indo language "Posting Terkait dengan Menggunakan Slider"
Pada sisi kiri & kanan akan ada berupa gambar panah guna slide kesana kemari. Feature secara keseluruhan:

  • Thumbnail image display.
  • Tittle post to be a link.
  • Headlines writed article.

Javascript

Letakin script berikut diatas tag </head>
<script type="text/javascript">
//<![CDATA[
var reltitulosslider = new Array();
var relurlsslider = new Array();
var relresumenslider = new Array();
var relimagenslider = new Array();
var reltituloscantidadslider = 0;
var relmaxamostrarslider = 20;
var relmaxlenslider = 75;
var relimagenpodefectoslider = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisG_RCORNU6cMQ_3ozas0VvCgQbX9mzCIFQ0XgpylbjXAjjQDn6NupJ9aTs9N52jkBUBHiIJ0Zmfsk21XZO9gRxOhRpmBhLokznWseLOn_KKdq6w_kaTJmH-K6cfX7Y5Gea3EJN7qnNZC_/s0/vagaPlantilla_resumenpostsnoimage.gif";
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;
}

var SRmin = 0;
var SRmax = -2160;
var SRwidth = 144;
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>
<script src="http://NAME-BLOG.blogspot.com/feeds/posts/default/-/Blogger?alt=json-in-script&callback=leerpostetiquetasslider&max-results=50" type="text/javascript"></script>
Keterangan script:
relmaxamostrarslider = 20 // Jumlah postingan yg akan ditampilkan
relmaxlenslider = 75; // Jumlah karakter headlines
relimagenpodefectoslider = "http://URL-IMAGE.gif"; // Link gambar default
NAME-BLOG // Ganti dengan nama blog sobat

Kode CSS

#postsrelacionadosslider {
position:relative;
width:635px;
}
#postsrelacionadosslider br {
display:none;
}
#relleft {
left:0;
}
#relright {
right:0;
}
.sflecha {
height:180px;
position:absolute;
width:25px;
}
.sflecha img {
height:180px;
width:25px;
}
#postsrelacionadosinner {
height:180px;
left:30px;
overflow:hidden;
position:absolute;
width:576px;
}
#postsrelacionadoscontenedor {
height:180px;
position:absolute;
width:2800px;
-moz-transition:all 1s ease 0;
-webkit-transition:all 1s ease 0;
-o-transition:all 1s ease 0;
transition:all 1s ease 0;
}
.relspostsslider {
background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);
background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');
float:left;
height:180px;
overflow:hidden;
text-align:center;
width:130px;
margin:0 2px;
padding:0 5px;
}
.relspostsslider a {
color:#aaa !important;
display:inline;
font-size:11px !important;
line-height:1;
}
.relspostsslider img {
height:72px;
width:72px;
padding:5px;
}
.relspostsslider h6 {
display:table-cell;
height:5em;
overflow:hidden;
vertical-align:middle;
width:130px;
margin:0;
padding:0;
}
.relspostsslider p {
color:#eee;
font-size:10px;
height:4em;
line-height:1;
overflow:hidden;
margin:0;
padding:0;
}
Silahkan diedit-edit dah sesuaikan dgn template agan :)

Kode HTML

<div id="postsrelacionadosslider">

<a onclick="desplazarrels(1);" class="sflecha" id="relleft" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8FqCWxOwF0pnhtbKy12Hx0uoWUY20qC_yqATJMbmGC7OwHWn_6_KXxNUhxInnfDwajlfAse3lpoQe38Gu_CrfcC_odydIS0vVd9jlrPqGUFhTcFDtEzPEg8cMJjDbNL7SC3ugM2sm0mY/s70/LWicoleft.png"/></a>
<div id="postsrelacionadosinner">
<div id="postsrelacionadoscontenedor" style="left:0">
<script type='text/javascript'>mostrarrelacionadosslider();</script>
</div>
</div>
<a onclick="desplazarrels(-1);" class="sflecha" id="relright" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFixwSQvU5Clt4a9clQaTvooro05tttPiWX6XGafYKfp1q6gX2BpRccVW-xDxiqHMUD5bfEUv9fuyWKJHtKxRAM9Ino03DIx5sSGMvFnqe3r2P_4Rp8Ynn4Uk8mptKiVkqPjfiJKXVNko/s70/LWicoright.png"/></a>

</div>
Semoga berhasil :D Begini deh kalau enggak nemuin yg baru-baru, reply ajah yg punya master-master :))

related-postHappy related post \m/

Diposting oleh di
Label: , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)