Sunday, 28 June 2015

Cara Membuat Artikel Terkait Di Blog Dengan Dilengkapi Gambar

Pojokshare.com- Bagi anda pemilik blog atau website pasti tidak asing mengenai istilah artikel terkait. Artikel terkait biasanya berisi judul, gambar dan beberapa patah kata mengenai artikel. Artikel terkait seringkali di tempatkan pada akhiran postingan atau akhir sebuah artikel pada blog dan website.
Artikel terkait memiliki fungsi untuk menyediakan dan menampilkan artikel yang berhubungan dengan artikel pada halaman blog atau website yang sedang di baca pengunjung. Dengan adanya artikel terkait memberikan peluang untuk pengunjung tidak langsung meninggalkan blog atau website anda. Artikel terkait juga dapat menjadi rekomendasi bagi pengunjung untuk membaca artikel lainnya pada blog dan website.

Sebagian template blog yang bisa di download di internet biasanya telah menyertakan artikel terkait pada file templatenya, namun tidak semua memiliki kondisi seperti ini, ada saja template yang di download tidak di sertakan koding pembentuk menu artikel terkait. Untuk menampilkan menu artikel terkait di blog dengan desain keren di sertakan gambar, simak tahapan berikut :

1. Login ke Blog anda, pilih Template lalu pilih Edit Html
2. Cari Kode </head>
3. Letakkan kode di bawah ini 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>

4. Cari kode <data:post.body/>
5. Letakan kode berikut tepat di bawah kode <data:post.body/>  (sebagai catatan : kode <data:post.body/> biasanya berjumlah 3 sampai 4 buah, untuk itu silahkan anda coba 1 persatu. Sebagai contoh pada template saya, saya meletakkan kode di bawah ini tepat di bawah kode
<data:post.body/> yang ketiga )

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

6. Terakhir klik simpan.


Keterangan :

var relmaxposts = 5;   = Angka 5 menunjukkan banyaknya jumlah artikel terkait yang akan di tampilkan
 
var numchars = 150; =
Angka 150 menunjukkan banyak karakter huruf yang akan di tampilkan pada artikel terkait.

Anda dapat mengubah angka diatas sesuai dengan keinginan. 

2 comments:

  1. terima kasih gan,dari blog agan udah memeberikan informasi yang sangat bermanfaat untuk saya,
    saya banyak belajar dan mendapat ilmu terbaru setelah melihat postingan yang ada di blog agan.
    saya tunggu postingan selanjutnya gan..

    ReplyDelete
    Replies
    1. ok ty gan.
      surganyamusic milik agan jg mantap,

      Delete

Untuk Berkomentar Tanpa Login, Silahkan Pilih "Anonymous" Pada Comment As Dibawah.
Komentar Akan Tampil Setelah Mendapatkan Persetujuan Admin.