Cara Pasang Artikel Terkait Dengan Gambar Secara Vertikal

Panduan Cara Memasang Artikel terkait dengan thumbnail tepat dibawah artikel / postingan blog secara VERTIKAL.

Fungsi artikel terkait sangatlah bermanfaat sebagai petunjuk dan pengarah para pengunjung blog atau situs kita agar dengan mudah menemukan artikel-artike yang sesuai dengan yang mereka cari.

Tampilan artikel terkait yang atraktif sangat penting untuk ditempatkan tepat dibawah artikel blog kita dan tentu saja harus dilengkapi dengan foto kecil atau thumbnail agar lebih atraktif dan menarik pembaca untuk mengkliknya.

Banyak model dan cara menempatkan artikel terkait dibawah artikel ada yang secara horisontal dan ada juga yang secara vertikal tergantung selera masing-masing pemilik situs web. Jumlah artikel terkait juga bisa diatur sedemikian rupa sehingga berapa jumlah maksimal dan ukuran yang akan kita tampilkan sesuai dengan keinginan kita.

Berikut ini cara menampilkan artikel terkait secara VERTIKAL tepat dibawah artikel dan tentu saja dengan thumbnail yang menarik.

Langkah pertama setelah masuk akun blogger dan masuk ke menu Edit Template, carilah kode </head> kemudian pasangkan kode HTML Dibawah ini TEPAT DIATAS kode </head> tersebut.

<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:125px; 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:70px; height:80px; background:#fff}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 7;
var numchars = 100;
var morelink = "More";

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> 

Langkah berikutnya cari kode  <data:post.body/>  jika sudah ketemu maka copy pastekan kode dibawah ini TEPAT DIBAWAH kode <data:post.body/> tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts' style='margin-top:45px;'>
<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 kode  <data:post.body/> lebih dari satu biasanya bisa diletakkan dibawah kode yang kedua atau ketiga, silakan dicoba saja. Yang terpenting kode-kode diatas harus sama persis jangan ada yang berubah atau ketinggalan.

Jangan lupa SAVE setelah semua kode HTML terpasang pada tempatnya.  

Jika semua langkah yang anda lakukan tepat maka dibawah artikel pada blog anda akan tercantum artikel terkait dengan gambar yang mirip dengan artikel terkait di Blog tips cara peternak ini.

Kode diatas untuk jumlah artikel terkait sebanyak 7 baris, untuk mengganti jumlah artikel terkait seperti yang ada inginkan tinggal mengganti angka 7 warna merah pada kode yang pertama (var relmaxposts = 7;)dengan angka berapa saja yang anda kehendaki. Semoga bermanfaat.

Silahkan sebarkan artikel ini jika anda berkenan....terima kasih.