Cara Membuat Artikel Terkait Plus

Tiga postingan saya sebelumnya yaitu tentang Artikel Terkait dibawah Posting, Artikel Terkait dengan Thumbnail dan Artikel Terkait di Sidebar, sekarang yang akan saya share-kan dengan kawan Artikel Terkait Plus :r 

Untuk Demonya kawan bisa lihat di Blog ini ! :D 

Banyak para Blogger memasang Artikel Terkait Plus ini di Blognya dan pada umumnya yang ditampilkan "Artikel Terkait dan Rss Berlangganan"  yang sudah tentu caranyapun berbeda pula, tapi setelah saya terapkan selalu menemui kegagalan, mungkin karena kebodohan saya :D kalau kawan sama seperti saya, jangan putus asa karena saya akan mencoba berbagi dengan kawan ber-Kreasi tentunya, bagaimana ?! dan hasilnya selama ini saya sudah coba di berbagai template cukup memuaskan :z

Cara yang saya pakai ini adalah Cara Membuat Artikel Terkait di Sidebar dengan menambahkan sedikit kode tambahan sebagai pembagi kolomnya :@

Okey langsung saja ke Cara Pembuatannya :

• Masuk ke Account Blogger dengan ID kawan
• Pada Design / Perancang Template pilih Edit HTML
• Beri tanda Centang disamping Expand Template Widget
• Copas Kode berikut dibawah ]]></b:skin> atau diatas </head>

<script type="text/javascript">

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;

}

}

}

}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

}

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 10) {

document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>

');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;

}

i++;

}

document.write('</ul>

');

}

//]]>

</script>

Angka 10 berwarna merah adalah jumlah Artikel terkait yang akan ditampilkan

• Selanjutnya kawan cari Kode seperti berikut : 

<b:if cond='data:post.labels'> <data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

• Kalau sudah ketemu Hapus / Ganti dengan Kode berikut

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&amp;
max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Sekarang kawan coba perhatikan script yang saya beri warna hijau 

Akan saya tambahkan Kode yang hasilnya seperti berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='width:100%;height:100%;background:#95CAFF;padding:5px; border:1px solid #000;float:left'>
<div style='width:65%;height:auto;background:#7ca9c0; padding: 5px 10px; border:0px solid #000; float:left'>
          <h4 style='color: rgb(255, 242, 0); font-size:17px; font-weight:normal;'> Artikel Terkait yang ingin kawan baca :</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div style='overflow:hidden;width:30%;height:auto;padding:15px 5px;border:0px solid #000;float:right'>
<center>&lt;form id=&quot;subscribe&quot; action=&quot;http://feedburner.google.com/fb/a/mailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/infoBlogbego&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;subbox&quot; onfocus=&quot;if (this.value == &#39;Email Address here...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Email Address here...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Email Address here...&#39;;}&quot; type=&quot;text&quot;&gt;&lt;input value=&quot;blogspot/infoBlogbego&quot; name=&quot;uri&quot; type=&quot;hidden&quot;&gt;&lt;input value=&quot;&quot; name=&quot;loc&quot; type=&quot;hidden&quot;&gt;&lt;p&gt;&lt;input id=&#39;subbutton&#39; type=&#39;submit&#39; value=&#39; S E N D &#39;/&gt;&lt;/p&gt;&lt;/form&gt;</center>
<br/>
<center><div style='width:125px;height:125px;border:1px solid #ddd;background:#7ca9c0;margin:2px;padding:5px'><h4><big>ADVERTISE HERE</big><h2 style='color: rgb(255, 255, 0); font-size:14px; font-weight:normal;'> BANNER [125x125] </h2></h4></div></center>
</div></div>
</b:if>

• Teks / Kode yang saya beri warna merah adalah warna dan lebar background, silahkan dirubah sesuai dengan tampilan Blog kawan :# 
• Teks / Kode yang saya beri warna Violet adalah Rss Langganan dan Banner Iklan silahkan juga dirubah sesuai Keinginan kawan 
• Dengan merubah Teks yang saya beri warna Kuning [float:left / right] akan membalikkan tampilannya
• Jangan lupa simpan Template kawan