Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail

Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail sangatlah mudah. Artikel terkait ini banyak digunakan untuk membantu blogger yang kesulitan melakukan interlink antar artikel. Manfaat lain penggunaan artikel terkait ini adalah membantu meningkatkan pageview blog anda dengan terus menawarkan artikel-artikel yang lain ke pengunjung blog.

Untuk membuat artikel terkait tampil di bagian bawah postingan cukup lakukan prosedur sederhana berikut ini:

• Login ke akun blogger saudara]


• Buka menu TEMPLATE lalu pilih EDIT HTML


• Centang EXPAND TEMPLATE WIDGET


• Copy kode di bawah ini dan paste tepat 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(){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>
</b:if>

• Sekarang cari kode <data:post.body/> 


• Copy kode di bawah ini dan taruh tepat di bawah <data:post.body/> tadi

<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>

• Jika lebih dari satu coba saja pasang satu persatu. Jika tidak terjadi perubahan, pindahkan ke kode <data:post.body/> lainnya. Sebaiknya mulai dari <data:post.body/> yang paling bawah.... 

Hasil dari pemasangan kode ini akan terlihat seperti gambar di bawah ini:

Ok, terima kasih sudah mau mampir di blog saya ini. Mudah-mudahan artikel ini bisa membantu anda.

Sumber : http://trikmudahseo.blogspot.com/2012/10/cara-membuat-artikel-terkait-vertikal-dengan-thumbnail.html

• Seperti biasa anda harus login ke Blogger.



• Langsung tuju Edit HTML.


• Klik Expand Template Widget.


• Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

  /* breadcrumbs
  
  ----------------------------------------------- */
  
  .breadcrumbs{padding-top:5px;padding-bottom:5px; margin:0 0px 5px 0px; font-size:11px; border-bottom:4px double rgb(224, 224, 224); font-weight:bold; font-family:Tahoma; height:auto;}
  
  .breadcrumbs a, 
  
  .breadcrumbs a:visited{color:#222; font-size:11px;  font-weight:bold; font-family:Tahoma; height:auto;}
  
  .breadcrumbs a:hover{color:blue;font-size:11px; font-weight:bold; font-family:Tahoma; height:auto;}

• Setelah itu, cari kode seperti ini :

  <b:includable id='main' var='top'>




• Lalu ganti kode berikut <b:includable id='main' var='top'> dengan kode berikut:

  <b:includable id='breadcrumb' var='posts'>
  
  <b:if cond='data:blog.homepageUrl != data:blog.url'> 
  
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
  
  <div class='breadcrumbs'><span>Browse »
  
  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  
  </span> &#187; <span><data:blog.pageName/></span></div> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;item&quot;'> 
  
  <!-- breadcrumb for the post page --> 
  
  <b:loop values='data:posts' var='post'> 
  
  <b:if cond='data:post.labels'> 
  
  <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'> 
  
  <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span> 
  
  <b:loop values='data:post.labels' var='label'> 
  
  &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 
  
  </b:loop> 
  
  &#187; <span><data:post.title/></span> 
  
  </div> 
  
  <b:else/> 
  
  <div class='breadcrumbs'>
  
  <span>
  
  Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
  
  </span> &#187; <span>Unlabelled</span> &#187;
  
   <span><data:post.title/></span></div> 
  
  </b:if> 
  
  </b:loop> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;archive&quot;'> 
  
  <!-- breadcrumb for the label archive page and search pages.. --> 
  
  <div class='breadcrumbs'> 
  
  <span> Browse » <a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>Archives for <data:blog.pageName/>
  
  </span> 
  
  </div> 
  
  <b:else/> 
  
  <b:if cond='data:blog.pageType == &quot;index&quot;'> 
  
  <div class='breadcrumbs'> 
  
  <b:if cond='data:blog.pageName == &quot;&quot;'> 
  
  <span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>All posts</span> 
  
  <b:else/> 
  
  <span>Browse »<a expr:href='data:blog.homepageUrl'>Home</a>
  
  </span> &#187; <span>Posts filed under <data:blog.pageName/>
  
  </span> 
  
  </b:if> 
  
  </div> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:if> 
  
  </b:includable> 
  
  <b:includable id='main' var='top'> 
  
  <b:include data='posts' name='breadcrumb'/>

  Simpan Template.