Widget Related Post Unik Dengan Summary (Deskripsi+Image)

Widget Related Post Unik Dengan Summary (Deskripsi+Image) - Hallo selamat malamsahabat DoroINC! Malam ini akan mengenalkan sebuah widget blog terbaru untuk artikel berkaitan. Berbeda dengan versi sebelumnya yang pernah kang salman ulas yaitu Related Post With Icon for Blogger danMembuat Related Post Dengan Fungsi Scroll. Kali ini widgetnya banar-benar unik dimana pengunjung tidak hanya melihat judul atau fotonya saja tetapi mereka juga bisa membaca sekilas terlebih dahulu sebelum memutuskan untuk mengklik link / artikel tersebut.

Sebenarnya widget ini lebih tepat di katakan label thumb.
Mau Tau Cara Pasangnya?
Langsung aja:

Langkah1:
1. Login Blogger > Rancangan > Edit Template > Copy kode berikut dan simpan di atas </head>

<style>
#related_posts {
}
#related_posts h4 {
border-top: 1px solid #333;
border-bottom: 1px solid #333;
color: #333;
font-size: 14px;
letter-spacing: 0;
line-height: 20px;
margin: 0 0 5px;
padding: 5px 10px;
background:#ccc;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 0px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #ccc;
background:#f0f0f0;
margin: 0 0 5px;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
var morelink = "readmore";
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]>
</script>

Langkah 2
Simpan kode ini di bawah <data:post.body/>

<div id="related_posts">
<h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&callback=relpostimgthum&max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>

Keterangan:
Tulisan warna merah adalah nama label yang ingin di tampilkan.

var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)

width: 55px; = ukuran gambar
height: 55px; = ukuran gambar

Cara paling mudah adalah dengan mengcopy semua kode di atas ke dalam widget di sidebar kita
1. Pilih Rancangan > Tambah Widget > Pilih HTML/Javascript
2. Paste semua kode di atas baik langkah1 dan langkah2
3. Simpan widget dan lihat hasilnya.

Semoga bermanfaat dan silakan komentar sesuai topik.

Subscribe via Email