Cara Membuat Artikel Terkait di Blog

Apa kabar sobat Blog Mas Hendra?

Beberapa waktu yang lalu, saya sempat ada problem dengan artikel terkait saya. Saya pun tak tahu kenapa fitur artikel terkait di blog saya tiba-tiba menghilang. Dan akhirnya saya membuat artikel terkait model baru seperti yang terlihat di blog ini.

Sebenarnya apa sih manfaat artikel terkait? Salah satu manfaat artikel terkait yang paling berpengaruh terhadap blog adalah untuk memudahkan pengunjung blog dalam menjelajahi isi sebuah blog. Coba Anda bayangkan, apa jadinya bila suatu blog tak mempunyai artikel terkait, pasti bingung kan, setelah membaca artikel, saya harus kemana lagi. Pun begitu juga dengan apa yang saya alami. Lho wong saya saja bingung setelah membaca artikel di blog saya, harus kemana lagi. Apalagi dengan pengunjung blog saya.

tampilan artikel terkait blog mas hendra

Tak usah panjang lebar lagi, langsung saja saya share langkah-langkah cara membuat artikel terkait, silahkan disimak baik-baik.

1. Masuk ke akun blogger Anda di sini

2. Pilih menu Template --> Edit HTML

3. Cari kode </head> . Untuk memudahkan pencarian, tekan tombol F3

4. Setelah ketemu, copy kode berikut :

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


5. Letakkan kode tersebut di atas kode </head>

6. Selanjutnya, cari kode <data post:body/>

7. Copy kode berikut :

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

8. Letakkan kode tersebut di bawah kode : <data post:body/>

*Perlu diperhatikan, ada beberapa kode : <data post:body/> pada template blog, cari kode yang kedua atau ketiga. Untuk pemasangan di blog saya, saya meletakkannya, di bawah kode : <data post:body/> yang ketiga

9. Simpan template Anda

Proses editing :
  • var relmaxposts = 5, jumlah artikel terkait yang akan ditampilkan di blog Anda
  • var numchars = 150, jumlah karakter yang akan ditampilkan pada artikel terkait
  • Untuk mengubah ukuran huruf, warna dan lain-lain, edit kode yang ada di antara kode : <style> ... </style>
Selamat mencoba dan semoga berhasil.

14 comments

artikel terkait dapat meningkatkan trafic blog, saya lupa suka related post dengan gambar.

Reply

Iya mba Dewi, bener tuh. Tapi gak apa-apa pake gambar, yang penting ada related post kok...

Reply

Ya,,, untungnya related postnya udah ditanamkan jauh jauh dari templatenya, jadi ga susah lagi edit templatenya lewat hp.

Reply

Wah, mudah ya ngedit pake hape??! Kalau saya sih masalah ngedit harus lewat komputer, biar lebih maksimal...

Reply

Bagus mas, dengan begini pengunjung bakal makin betah menjelajahi isi blog kita, ide yang bagus, saya sendiri udah menerapkannya, makasih mas.

Reply

Iya Mas Adam. Benar-benar memudahkan siapapun untuk menjelajahi isi blog. Terasa banget efeknya sebelum masang artikel terkait. Makasih Mas Adam sudah mampir...

Reply

kebetulan related post (artikel terkait) punya saya kurang mengesankan nih.

Reply

Wah kang Cilembu, banyak pilihan kok untuk bikin related post. Makasih kang sudah mampir

Reply

kebetulan di blogg saya sudah pasang mas :) artikel terkait memang sangat penting sekali untuk di pasang di blogg yah agar lebih seoFriendly

Reply

Gue templatenya rada ribet sih. Jadi bingung sendiri gimana caranya. :(

Reply

Iya betul banget. Biar pengunjung blog kita jadi gampang berselancar di blog... Makasih sudah mampir

Reply

Iya saya juga pada awalnya gagal terus, tapi begitu dicoba berulang-ulang akhirnya berhasil. Coba saja yang teliti di waktu luang, soalnya harus teliti edit codenya..

Reply

Jelas mba.. kalau tidak dipasang bisa rugi. Soalnya visitor datang cuma sekali. Kalau dia tidak menemukan hal lain yang menarik pasti langsung kabur makanya kudu disuguhi related post.

Reply

Tuh benar kata mas Ary, penting banget memasang related post di blog....

Reply

Post a Comment