Cara Tambahkan Related Posts / Postingan Terkait Dengan Gambar

Fitur ini banyak di sukai oleh para blogger. Karena seperti yang sudah banyak di ketahui, dengan memasang Related Posts akan lebih memungkinkan kasih lihat pembaca / pengunjung blog pilihan-pilhan artikel lain yang berhubungan selain yang sedang di baca.

Untuk yang kebetulan  memakai template yang sudah built in dengan fitur related posts, mungkin tidak lah perlu lagi. Hanya jika menghendaki, bisa customize fitur tersebut dengan mengubah tampilannya, misal jumlah yang mau di tampilkan atau sekedar mengubah quote atau kalimat related posts sesuai yang di inginkan.

Kalau saya pribadi, sepengalaman saya karena kebanyakan blog- blog yang saya buat untuk pasang produk yang saya promosikan, fitur ini sangat berguna. Namun juga saya dari banyak fitur sejenis saya lebih suka yang bisa nmenampilkan gambar / image.

Di bawah ini langkah untuk menambahkan Related Post yangg saya copy paste dari situs  Lasantha Bandara.

1. Di dashboard blogger klik tab bertuliskan Template, terus klik Edit HTML lalu jangan lupa klik  Expand Widget Templates.

2. Cari kode </head>.  Dan sebelum tag </head>  letakan kode berikut:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
//<![CDATA[
//Script by Aneesh of www.bloggerplugins.org
//Released on August 19th August 2009
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){
thumburl[relatedTitlesNum]=d;} else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEtVA0UmFdcuDrtA2cougetXoEzrnSlyAm2rE6616ftYjAMt0tnjVV5XeotSuTYh6kLtQ5VNIcq3L9nmc46p9zcSQRzPOh7k02L5j8uHU4clsJOihpKbb1JT3pPVFOGZRYBfukXdBbiaE/s400/noimage.png';}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs() {
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i])))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
}
}

var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {

document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px #d4eaf2;"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:72px;height:72px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:72px;padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');

if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</div>');
}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

3. Cari kode <div class='post-footer-line post-footer-line-1'> Jika tidak ketemu bisa cari kode ini

<data:post.body>

4. Setelah kode tersebut taruh kode di bawah ini:

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Similar Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Selanjutnya bisa di lihat kode:

var maxresults=5;

var relatedpoststitle="Similar Posts";

• Angka 5 adalah default jumlah thumbnail & ringkasan artikel. Namun bisa di rubah sesuai selera atau sesuai lebar kolom postingan kalau mau.
• Tulisan Similar Posts  bisa di ganti sesuai keinginan .... misal   Related Products, dlsb.

Untuk melihat hasil nya harus di save dulu. Terus klik salah satu artikel. Jika sudah ada terlihat berarti langkah-langkah menambahkan Related Posts dengan image sudah berhasil.

*Fitur ini bisa muncul, ketika jumlah postingan dalam satu kategori lebih dari satu. Jika satu postingan hanya ada cuma satu postingan, maka tidak akan terlihat.