Related Posts atau sering disebut postingan terkait (sama) dengan tulisan yang sedang dibuka pada sebuah blog atau web site akan mempermudah pengunjung untuk mencari tulisan-tulisan kita. Related post saat ini sangat banyak tampilannya, ada hanya menampilkan judul postingan dan tips kali ini saya mencoba memberikan cara membuat related posts yang ditampikan dengan gambar dan keterangan tulisan (Posts) kita.
Berikut bisa sobat blogger lihat di Demo Situs supaya sobat lebih mengerti seperti apa tampilan dari related post ini.
Suapaya blog anda terlihat elegant dengan tampilan related posts ini, maka perlu sobat blogger menampilkannya pada blog sobat. Sekarang mari kita belajar cara membuatnya pada blog.
1. Login terlebih dahulu pada blogger
2. Pilih Template
3. Kemudian pilih Edit HTML - Lanjutkan
4. Jangan lupa centang Expand Template Widget
5. Cari kode </head> dan letakkan kode script berikut di atasnya.
Biasanya kode <data:post.body/> lebih dari satu. Tergantung mau dibagian mana related posts anda letakkan. Silahkan anda coba (berkreasi) karena setiap template blog tidak sama. Kemudian silahkan anda ganti tulisan Widget dengan label yang akan anda tuliskan (harus sama persis penulisannya pada label blog anda).
var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)
width: 55px; = ukuran gambar
height: 55px; = ukuran gambar
7. Silahkan Simpan Template, dan lihat perubahan yang terjadi.
Widget related posts ini juga dapat kita tampilkan pada sidebar blog kita. Berikut tips untuk menampilkan pada sidebar blog.
1. Pilih Tata Letak - Tambah Widget - HTML/JavaScript
2. Paste-kan semua kode script di atas
3. Kemudian silahkan Simpan, dan lihat perubahannya.
Semoga bermanfaat, dan mohon maaf jika ada kesalahan dalam tulisan ini. (Jkt/2012)
<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:#ccc;
}
#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:#f0f0f0;
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: 14px;
padding: 4px;
border: solid 1px #ccc;
}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
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|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>
6. Kemudian cari kode <data:post.body/> dan letakkan kode script berikut di bawahnya.#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:#ccc;
}
#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:#f0f0f0;
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: 14px;
padding: 4px;
border: solid 1px #ccc;
width: 55px;
height: 55px;
background:#fff;}
</style>
<script type="text/javascript">
//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 165;
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|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>
<div id="related_posts">
<h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&callback=relpostimgthum&max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>
Keterangan: <h4>Related Posts</h4>
<script src="/feeds/posts/default/-/Widget?alt=json-in-script&callback=relpostimgthum&max-results=50" type="text/javascript">
</script>
<ul id="relpost_img_sum"><script type="text/javascript">
relatpost();
</script> </ul>
</div>
Biasanya kode <data:post.body/> lebih dari satu. Tergantung mau dibagian mana related posts anda letakkan. Silahkan anda coba (berkreasi) karena setiap template blog tidak sama. Kemudian silahkan anda ganti tulisan Widget dengan label yang akan anda tuliskan (harus sama persis penulisannya pada label blog anda).
var relmaxposts = jumlah artikel yang di tampilkan
var numchars = panjang summary (deskrisi yang di tampilkan)
width: 55px; = ukuran gambar
height: 55px; = ukuran gambar
7. Silahkan Simpan Template, dan lihat perubahan yang terjadi.
Widget related posts ini juga dapat kita tampilkan pada sidebar blog kita. Berikut tips untuk menampilkan pada sidebar blog.
1. Pilih Tata Letak - Tambah Widget - HTML/JavaScript
2. Paste-kan semua kode script di atas
3. Kemudian silahkan Simpan, dan lihat perubahannya.
Semoga bermanfaat, dan mohon maaf jika ada kesalahan dalam tulisan ini. (Jkt/2012)
