Membuat Related Pos Otomatis pada Blog

Salam sobat bloger, ketemu lagi dengan saya. Kali ini saya akan coba share tips untuk menambahkan related post pada blog. Ada banyak cara dan tentunya banyak juga model yang dapat kita pilih. Ya semuanya kembali kepada kita model manakah yang akan kita pilih.

Related pos yang akan saya share adalah related pos yang disertai dengan thumbenail dan sedikit cuplikan dari isi posting. Untuk lebih jelasnya sobat bisa lihat gambar berikut !

Yang berminat bisa ikuti langkah-langkah berikut!

1. Login ke Blogger

2. Buka menu Template > Edit HTML > Centang "Expand Template Widget.

3. Cari kode </head>, lalu masukkan kode berikut diatasnya.

<b:if cond='data:blog.pageType == "item"'>

<style>

#related_posts h4 {

background: none repeat scroll 0 0 #000000;

color: #99FF00;

margin: 0;

padding: 2px 5px 1px 8px;

text-transform: uppercase;

}

#relpost_img_sum {

/* height: 320px;

overflow: auto; */

margin: 0;

padding: 4px;

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 #DDD;

margin: 0;

padding: 5px;

height: 65px;

list-style: none;

}

#relpost_img_sum li:hover {

background-color: none;

}

#relpost_img_sum a {

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

}

#relpost_img_sum .news-title {

display: block;

font-weight: bold !important;

margin-bottom: 4px;

}

#relpost_img_sum .news-text {

display: block;

text-align: justify;

font-weight: normal;

text-transform: none;

}

#relpost_img_sum img {

float: left;

margin-right: 14px;

padding: 4px;

border: solid 1px #DDD;

width: 55px;

height: 55px;

}

</style>

var relnojudul = 0;

var relmaxtampil = 10;

var numchars = 180;

var morelink = "readmore";

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

</b:if>

Keterangan!

a. Kode warna yang berwarna hijau adalah kode warna begrround tulisan baca juga, sedangkan yang berwarna merah adalah warna tulisan baca juga. Sobat dapat menggantinya dengan warna yang sobat suka.

b. var relmaxtampil = 10; menujukkan banyak posting yang ditampilkan

c. var numchars = 180; ubah nilai 180 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca.

d. var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik

4. Lalu cari kode <data:post.body/>

5. Taruh kode berikut tepat di bawahnya. Jika terdapat banyak kode seperti di atas cari kode nomor dua (Menurut pengalaman <data:post.body/> nomor dia terletak di tengah

jadi kita perlu memisahkannya dengan menekan tombol enter terlebih dahulu baru memasukkan kodenya)

<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:post.labels' var='label'>

</b:loop>

<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>

</ul>

</div>

</b:if>

Keterangan!

Ganti Baca juga dengan kata-kata yang diinginkan

Selamat mencoba semoga berhasil ...... jika perlu bantuan sobat bisa bertanya di kolom komentar!