Home » TUTORIAL » Widget Related Post Unik Dengan Summary (Deskripsi+Image)

Sunday, June 3, 2012

Widget Related Post Unik Dengan Summary (Deskripsi+Image)

Hallo selamat malamsahabat noz! Malam ini noztrada akan mengenalkan sebuah widget blog terbaru
 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.

Demonya seperti ini:



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&amp;callback=relpostimgthum&amp;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.
Widget Related Post Unik Dengan Summary (Deskripsi+Image) Reviewed by noztrada on Sunday, June 3, 2012 Rating: 4.5
Diposkan oleh di 4:14 AM
Label:
Facebook Comments
0 Blogger Comments

0 komentar:

Post a Comment

Terimakasih sudah berkunjung ^_^ , Tolong tinggalkan pesan atau komentar agar saya bisa berbenah :) dimohon untuk tidak SPAM dan LIVE LINK di blog saya :)

TERIMAKASIH ^_^