Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

Cara Membuat Artikel Terkait Di Blog - Hai sobat blogger,Apa kabar? Semoga aja kabarnya pada baik-baik semua ya .oke, pada kesempatan ini saya akan share Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog. Mungkin yang ini agak lebih berbeda,karna dibuat oleh Bung Frangki.Oke langsung saja langkah-langkah di bawah ini di simak baik-baik ya

Tambahkan CSS

1. Login ke Blogger.com

2. Klik Template > Edit HTML

3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

/* Related Post
-----------------------------------------------
*/
#related_posts{border-radius:0 0 4px 4px;padding:0 0 5px;margin:10px 5px 5px 5px;background:#fff}
#related_posts h3 {border-radius:4px 4px 0 0;margin:0 0 10px;padding:12px 0;width:100%;font-weight:normal; line-height:1.4em; text-transform:uppercase;font-size:150%;text-align:center;background:rgba(13, 150, 251, 1);color:#fff;}
#relpost_img_sum{line-height:16px;padding:0;transition:all .3s ease-in;margin:15px}
#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}
#relpost_img_sum ul li {list-style-type:none;margin:0;padding:0}
#relpost_img_sum li{height:65px;list-style:none;border:1px solid #f2f2f2;padding:5px;transition:all .3s ease-in;margin-bottom:5px}
#relpost_img_sum a:link, #relpost_img_sum a:visited, #relpost_img_sum a:active{font-size:15px;color:#3498DB;transition:all .3s ease-in;font-weight:700}
#relpost_img_sum a:hover{color:#f3c18c}
#relpost_img_sum .news-text{font-size:15px;display:block;text-align:left;font-weight:400;text-transform:none;color:#888}
#relpost_img_sum img{float:left;margin-right:14px;background:#FFF;border:solid 1px #3498DB;width:55px;height:55px;padding:4px;transition:all .3s ease-in}

Tambahkan JavaScript

cari kode </head>, dan letakan kode JavaScript ini tepat di atas kode tersebut

<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5; // Jumlah Artikel Terkait
var numchars = 200; // Jumlah Text pada Artikel Terkait
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
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\' A=\'"+4[r]+"\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <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>

Tambahkan HTML

Cari kode <data:post.body/> , bila kode tersebut ada 2, pilih saya yang kedua. dan copy kode di bwah ini tepat di bawah kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
  <h3> Artikel Terkait : </h3>
<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;amp;callback=relpostimgcuplik&amp;amp;max-results=5&quot;' type='text/javascript'/>
</b:loop>
<div id='relpost_img_sum'>
  <script type='text/javascript'>artikelterkait();</script>
</div>
</div>
</b:if>

terakhir Simpan Template. dan lihat Hasilnya

 تم النشر يوم  السبت، 5 يوليو 2014 ' الساعة  3:33 م

Facebook Twitter Google+ Linkedin Digg Print