Sunday, November 13, 2016

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail

Cara Membuat Artikel Terkait Related Post di Blog dengan Thumbnail


Hai sobat blogger semua !!! Kali ini fahrurrozi18 akan berbagi cara untuk membuat daftar Artikel Terkait / Related Post. Humh... Udah pada tau nggk, yang mana itu Related Post. Yang belum tau, silahkan lihat screenshot di bawah ini :


Nah... Gimana sob, udah tau kan ?!?!
Ya sudah deh, gak pakek lama, langsung aja sob terjun ke langkah-langkahnya !!! 

Cara Membuat Artikel Terkait / Related Post :
1. Login BLOGGER sobat.
2. Klik Template => Edit HTML.
3. Cari kode di bawah ini :
</head>
4.  Kalau sudah menemukan kode di atas, Copy script di bawah ini lalu paste di atas kode </head>
<b:if cond=data:blog.pageType == &quot;item&quot;>
<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:#03C}
#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:#fff; 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:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}
</style>
<script type=text/javascript>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 150;
var morelink = "selengkapnya";
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(){returnw+};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>
</b:if>
5. Selanjutnya cari kode di bawah ini, Gunakan Ctrl+F untuk mempermudah pencarian :
<data:post.body/>
6. Lalu, copy script di bawah ini tepat di bawah kode tadi. Dalam pencarian, sobat akan menemukan beberapa script yang sama... Gunakan script yang Kedua atau Ketiga :
<b:if cond=data:blog.pageType == &quot;item&quot;>
<div id=related_posts style=margin-top:35px;>
<h4 style=color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;>Artikel Terkait</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=relpostimgthum&amp;max-results=50&quot; type=text/javascript/>
</b:loop>
<ul id=relpost_img_sum>
<script type=text/javascript>relatpost();</script>
</ul>
</div>
</b:if>
7. Klik Simpan.

Nah... Sudah selesai deh membuatnya, sekarang coba lihat blog sobat... :)
Sekian dulu ya tips dariku, Bye... bye... :)

Keterangan :
  • var relmaxposts = 5, jumlah artikel terkait yang ditambilkan
  • var numchars = 150, jumlah dari ringkasan artikel
  • Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>

Go to link Download