Related Post dengan Thumbnail dan Text

613 views

Related Post Bergambar dan Cuplikan Posting – Membuat artikel terkait keren dengan gambar mini dan text cuplikan. Jika sebelumnya Blogger Gubug sudah memberikan tutorial membuat related post with thumbnail, kali ini masih sama artikel terkait dengan gambar namun ada tambahan yakni teks cuplikan posting. Bagi anda yang ingin membuat artikel terkait dibawah posting dengan gambar dan text disertai scroll, berikut langkah-langkahnya.

Cara Membuat Related Post Keren di Blog

Membuat Artikel Terkait Thumbnail & Text Snippet

1. Login ke akun Blogger
2. Masuk menu Template > Edit HTML
3. Cari kode </head> letekkan kode berikut tepat diatasnya

<style type=’text/css’>
#related_posts h4 {background: none repeat scroll 0 0 #333;color: #FFF;font-family: Arial,Tahoma,Verdana;font-size: 11px;font-weight: bold;margin: 0;padding: 2px 5px 1px 8px;text-shadow: 1px 1px #000000;text-transform: uppercase;}
#relpost_img_sum {margin: 0;padding: 4px;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 #DDD;margin: 0;padding: 5px;height: 65px;list-style: none;}
#relpost_img_sum li:hover {background-color: #d4eaf2;} #relpost_img_sum a {text-shadow: 0 0px 0px rgba();}
#relpost_img_sum .news-title {display: block;font-weight: bold !important;margin-bottom: 4px;}
#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 #DDD;width: 55px;height: 55px;}
</style>
<script type=’text/javascript’>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
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|relnojudul|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|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write’.split(‘|’),0,{}))
//]]></script>

4. Cari <data:post.body/> letakkan kode berikut tepat dibawahnya

<div id=’related_posts’>
<h4>Related Posts <data:blog.pageName/></h4>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;’ type=’text/javascript’/></b:loop>
<ul id=’relpost_img_sum’ style=’overflow:auto; height:250px’>
<script type=’text/javascript’>artikelterkait();</script></ul>
</div>

5. Simpan

Silahkan edit tulisan berwarna merah sesuai keinginan, ok selamat mencoba membuat related post keren di blog, semoga sukses..

Hosting Unlimited Indonesia