Membuat Artikel terkait Di blog

Membuat Artikel terkait dengan gambar memang sangat penting pada blog yang membahas apa saja. Karena dengan Artikel Terkait atau Related Post, bisa membuat pengunjung akan berlama-lama melihat artikel-artikel unik pada blog anda.

Memang disana banyak sekali macam-macam atau gaya Artikel terkait hingga membuat anda bingung artikel terkait yang bagaimana yang seharusnya ada diblog Saya.

Untuk itu multiajaib akan membagikan Cara Membuat Related Post With Thumbnail (Gitu sih bahasa kerennya) tapi sudahlah! langsung saja kita menuju tutorial :

Cara Membuat Artikel Terkait Bergambar

1. Pertama login ke www.blogger.com

2. Klik judul blog anda

3. Pilih Template - Edit HTML

4. Cari Kode ]]></b:skin> atau </style>

5. Tambahkan kode dibawah ini tepat dibawah kode ]]></b:skin> atau </style> tadi

<style>
#related_posts{}#related_posts h2{border-top:1px solid #F4F3F3;border-bottom:1px solid #F4F3F3;color:#222;font-size:13px;color:#222;text-shadow:white 1px 1px 1px;letter-spacing:0;line-height:20px;background:#C4C4C4;margin:0 0 5px;padding:5px 10px}#relpost_img_sum{line-height:16px;margin:0;padding:0}#relpost_img_sum:hover{background:none}#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}#relpost_img_sum li{list-style-type:none;padding:5px;border:1px solid #eee;margin:5px 0;overflow:hidden}#relpost_img_sum .news-title{}#relpost_img_sum .news-text{display:block;text-align:left;font-weight:400;text-transform:none}#relpost_img_sum img{float:left;margin-right:10px;display:block}
.terkait-suka{text-align:left;margin-top:10px}.terkait-suka h2{ font-size:110%; font-weight:bold; color:#888; margin:0 0 5px; background:#EEE; padding:8px}.terkait-suka h2 a:link,.terkait-suka h2 a:visited{color:#555}.terkait-suka ul a{color:#1ABC9C;font-weight:bold;font-family:arial}.terkait-suka a:hover{text-decoration:underline}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 170;
var morelink = "";
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]+" ... <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>

6. Jika sudah, cari lagi kode ini <div class='post-footer'> biasanya kode ini terdapat 2. Silahkan anda pilih yang kedua, dan letakkan kode dibawah ini tepat diatas kode <div class='post-footer'> yang kedua

<div class='terkait-suka'>
<h2>Related : <data:blog.pageName/></h2>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=relpostimgcuplik&max-results=50"' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>

7. Simpan template, lihat hasilnya!

Ups... gampang sekali bukan? nah jika ada yang belum berhasil, silahkan tanyakan pada kolom komentar dibawah, jika saya dapat membantu, akan saya bantu. Demikianlah tutorial cara membuat artikel terkait dengan gambar / Thumbnail versi Horizontal dibawah artikel ini, semoga bermanfaat