Cara Buat Arikel Terkait Berwarna

Sambil menunggu bola first leg liga champions antara tim jagoan saya Real Madrid melawan Bayern Munchen, semoga saja tim jagoan saya menang, Oupppzzz ko jadi ngomongin bola ya,,, ^_^

Pada kali ini saya akan berbagi Cara Buat Artikel Terkait Berwarna yang berdasarkan random acak menurut label/kategori tanpa mencantumkan nama label nya, karena bola sudah mulai, langsung saja yukkk...

*) Langkah Pertama :

• Masuk ke Blogger
• Pilih Template → Edit HTML
• Centang pada Expand Template Widget
• Gunakan Ctrl + F cari kode </head>
• Tempatkan kode dibawah ini 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 < 20) {
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>    

*) Langkah Kedua :

• Kemudian cari kode <data:post.body/>
• Jika ada dua pilih <data:post.body/> yang pertama, untuk lebih jelasnya lihat yang dibawahnya ada kode ini <b:if cond='data:post.hasJumpLink'>
• Jika sudah ketemu tempatkan kode berikut ini dibawah <data:post.body/>  yang pertama tersebut

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<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=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3><b>Artikel Terkait :</b></h3>
<div style='border: 2px solid #FAF8CC; margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color:#5CB3FF; '>
<div style='border: 1px solid #eee; overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
</div>
</div>
</b:if>

• Simpan Template

Keterangan, silahkan ganti dan kembangkan menurut selera :
1. Yang berwarna Orange merupakan warna border garis tepi luar
2. Yang berwarna Biru merupakan warna background
3. Yang berwarna Hijau merupakan warna batas kotak scroll, jika tidak ingin memakai warna batas kotak scroll hapus saja kode border: 1px solid #eee;
4. Yang berwarna Pink merupakan jumlah postingan / artikel yang ingin ditampilkan

Selamat Mencoba.